import Editor from 'primevue/editor';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/editor/editor.min.js"></script>
A model can be bound using the standard v-model directive.
<Editor v-model="value" editorStyle="height: 320px"/>
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.
<Editor v-model="value" editorStyle="height: 320px">
<template #toolbar>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
</template>
</Editor>
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | string | null | Value of the content. |
| placeholder | string | null | Placeholder text to show when editor is empty. |
| readonly | boolean | false | Whether to instantiate the editor to readonly mode. |
| formats | string[] | null | Whitelist of formats to display, see here for available options. |
| editorStyle | any | null | Inline style of the container. |
| modules | object | null | Modules configuration, see here for available options. |
| Name | Parameters | Description |
|---|---|---|
| text-change |
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. event.instance: Text editor instance. |
Callback to invoke when text of editor changes. |
| selection-change |
event.range: Representation of the selection boundaries. event.oldRange: Representation of the previous selection boundaries. event.source: Source of change. Will be either "user" or "api". event.htmlValue: Current value as html. event.textValue: Current value as text. event.instance: Text editor instance. |
Callback to invoke when selection of the text changes. |
| load | event.instance: Quill instance | Callback to invoke when the quill modules are loaded. |
| Name | Parameters |
|---|---|
| toolbar | - |
Refer to Quill documentation for more information.
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-editor-container | Container element |
| p-editor-toolbar | Toolbar of the editor |
| p-editor-content | Editable area |
Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for dropdowns in the toolbar that may be overcome with a custom toolbar.
Quill Editor 1.3+.
Resources of quill needs to be added to your application.
npm install quill --save