Editor

編輯器是基於 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 />

範本 #

編輯器提供具有常用選項的預設工具列，若要自訂它，請在 header 元素內定義您的元素。有關可用控件，請參閱 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 角色/屬性。一個已知的限制是下拉選單在工具列中缺少方向鍵支援，這可以透過自訂工具列來克服。