An editor is a rich text editor (WYSIWYG ) based on the Quill editor. It contains a default toolbar with common options whose controls can be customized using the header element. The latest version of Quill 1.0 is used as a dependency for this. The basic text editor with a default toolbar can be represented as follows:
<p-editor name="basic" [(ngModel)]="basictext"
styleClass="editor-dimensions">
</p-editor>
The text editor with common options will look as follows:
1. Add the Quill 1.0 dependency in package.json and install it, or use the CLI tool to install it (npm install quill --save).
2. Also add the Quill script and style URLs in the entry page:
<script src="https://cdn.quilljs.com/
1.0.0-beta.3/quill.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.quilljs.com/1.0.0-
beta.3/quill.snow.css">
2. Also add the Quill script and style URLs in the entry page:
<script src="https://cdn.quilljs.com/
1.0.0-beta.3/quill.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.quilljs.com/1.0.0-
beta.3/quill.snow.css">
The editor supports onTextChange and onSelectionChange events, which will be invoked when the text of the editor changes and when the selected text of the editor changes, respectively.