Value: {{text1||'empty'}}
Value: {{text2||'empty'}}
import {Editor} from 'primeng/primeng';
import {Header} from 'primeng/primeng';
Two-way value binding is defined with ngModel.
<p-editor [(ngModel)]="text" style="height:320px"></p-editor>
export class EditorDemo {
text: string;
}
Editor can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-editor ngControl="description" style="height:320px"></p-editor>
Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.
<p-editor [(ngModel)]="text2" style="height:320px">
<header>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</header>
</p-editor>
Name | Type | Default | Description |
---|---|---|---|
style | string | null | Inline style of the container. |
styleClass | string | null | Style class of the container. |
Name | Parameters | Description |
---|---|---|
onTextChange | event.delta: Representation of the change. event.source: Source of change. Will be either "user" or "api". event.htmlValue: Current value as html. event.textValue: Current value as text. |
Callback to invoke when text of editor changes. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-editor-container | Container element |
ui-editor-toolbar | Toolbar of the editor |
ui-editor-content | Editable area |
Quill Editor.
<h3 class="first">Default</h3>
<p-editor [(ngModel)]="text1" style="height:320px"></p-editor>
<p>Value: {{text1||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
<hr style="border-top:0px;border-color:#dde3e6">
<h3>Custom Toolbar</h3>
<p-editor [(ngModel)]="text2" style="height:320px">
<header>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</header>
</p-editor>
<p>Value: {{text2||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>
export class EditorDemo {
text1: string = '<div>Hello World!</div><div>PrimeNG <b>Editor</b> Rocks</div><div><br></div>';
text2: string;
}