Pog-Wysiwyg

About

WYSIWYG editor with simple base functionality and customised

| ||| |--- |--- |--- | |bold |underline |img | |italic |ul |url | |strike |ol |justify|

Install

npm install pog-wysiwyg

Usage

import { WysiwygModule } from 'pog-wysiwyg';

@NgModule({
imports: [
    ...
    WysiwygModule,
    ...
  ]
});

Base case

<pog-wysiwyg 
(content)="contentHtmlStr"
(result)="resultHandler($event)"
></pog-wysiwyg>

Styling

Target item class

<pog-wysiwyg
[frameClassName]="'classNameForFrameOfEditorPanel'"
[toolBoxClassName]="'classNameForToolBox'"
[editorBoxClassName]="'classNameForEditorAndPreviewBox'"
...
></pog-wysiwyg>

resultBoxClassName-nested editorBoxClassName

Target item style property

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

Interfases

IWysiwygPropertiers

{
    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;
}

IWysiwygElementProperties

{
    //CSS propertis mapping
    textAlign?:TextAlign,
    overflowY?:OwerflowTypes,
    minHeight?: string,
    maxHeight?:string,
    borderWidth?: string,
    borderStyle?: string,
    borderColor?: string
}

IWysiwygButtonPropertiers

{
    type:ToolButtonLabelType, //type of label (from enumToolButtonLabelType);
    button:ToolButton, //name oh button (from enum ToolButton);
    label:string // htm valid string label or icon url;
}