WYSIWYG editor with simple base functionality and customised
bold | underline | img |
italic | ul | url |
strike | ol | justify |
npm install pog-wysiwyg
import { WysiwygModule } from 'pog-wysiwyg';
@NgModule({
imports: [
...
WysiwygModule,
...
]
});
<pog-wysiwyg
(content)="contentHtmlStr"
(result)="resultHandler($event)"
></pog-wysiwyg>
<pog-wysiwyg
[frameClassName]="'classNameForFrameOfEditorPanel'"
[toolBoxClassName]="'classNameForToolBox'"
[editorBoxClassName]="'classNameForEditorAndPreviewBox'"
...
></pog-wysiwyg>
resultBoxClassName-nested editorBoxClassName
This method has hight priorite for rendring
<pog-wysiwyg
[frameProperties]="framePropertyItem"
[editorBoxProperties]="editorBoxPropertyItem"
[resultBoxProperties]="resultBoxPropertyItem"
...
></pog-wysiwyg>
-
WYSIWYGProperties - item nested
IWysiwygPropertiers
interface -
frameProperties, editorBoxProperties, resultBoxProperties - item nested
IWysiwygElementProperties
interface
{
delay?:number, //default 500, delay in ms beetwen input and result emmit;
showToolBox?:boolean, //show tool buttons afteredit/show;
promptUrlMessage:string, //messahe for prompting link;
promptImgMessage:string, //messahe for prompting IMG link;
toolButtonSettings:IWysiwygButtonPropertiers[]// button customising;
}
{
//CSS propertis mapping
textAlign?:TextAlign,
overflowY?:OwerflowTypes,
minHeight?: string,
maxHeight?:string,
borderWidth?: string,
borderStyle?: string,
borderColor?: string
}
{
type:ToolButtonLabelType, //type of label (from enumToolButtonLabelType);
button:ToolButton, //name oh button (from enum ToolButton);
label:string // htm valid string label or icon url;
}