pog-wysiwyg
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i pog-wysiwyg

Weekly Downloads

2

Version

0.0.6

License

MIT

Unpacked Size

157 kB

Total Files

32

Last publish

Collaborators

  • tapakahatop