编辑器

编辑器是基于 Quill 的富文本编辑器组件。

导入 #


import Editor from 'primevue/editor';

Quill #

编辑器底层使用 Quill 编辑器，因此需要将其作为依赖项安装。


npm install quill

基本 #

编辑器使用 v-model 属性进行双向值绑定。


<Editor v-model="value" editorStyle="height: 320px" />

表单 #

编辑器与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col gap-1">
        <Editor name="content" editorStyle="height: 320px" />
        <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

只读 #

当存在 readonly 时，该值无法编辑。


<Editor v-model="value" editorStyle="height: 320px" readonly />

模板 #

编辑器提供了一个带有通用选项的默认工具栏，要自定义它，请在标题元素内定义您的元素。有关可用控件，请参阅 Quill 文档。


<Editor v-model="value" editorStyle="height: 320px">
    <template v-slot:toolbar>
        <span class="ql-formats">
            <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
            <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
            <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
        </span>
    </template>
</Editor>

可访问性 #

屏幕阅读器

Quill 在可访问性方面表现良好。工具栏中的元素可以被 tab 键选中，并且具有屏幕阅读器所需的 ARIA 角色/属性。一个已知的限制是工具栏中下拉列表缺乏箭头键支持，可以通过自定义工具栏来克服。

编辑器