エディタ

エディタは、Quillに基づくリッチテキストエディタコンポーネントです。

インポート #


import Editor from 'primevue/editor';

Quill #

エディタは、Quillエディタを内部で使用しているため、依存関係としてインストールする必要があります。


npm install quill

基本 #

標準のv-modelディレクティブを使用して、モデルをバインドできます。


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

読み取り専用 #

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は、アクセシビリティの面で一般的に良好に機能します。ツールバーの要素はタブで移動でき、スクリーンリーダーに必要なARIAロール/属性を持っています。既知の制限事項の1つは、ツールバーのドロップダウンで矢印キーがサポートされていないことです。これは、カスタムツールバーで克服できる可能性があります。