QEditor 元件是一個所見即所得 (WYSIWYG) 編輯器元件，讓使用者可以撰寫甚至貼上 HTML。它使用所謂的設計模式和跨瀏覽器的 contentEditable 介面。以下是一些來自 MDN webdocs 的參考頁面，其中包含有關底層技術的更詳細資訊
範例
警告
在第一個範例中，編輯器下方有兩張卡片。第一張卡片使用雙大括號顯示未剖析的 html，而第二張卡片使用 v-html="editor" 顯示呈現的版本。以這種方式使用 v-html 會讓您的使用者容易受到跨網站腳本攻擊。如果內容是使用者產生的，請務必在呈現時或伺服器端（或兩者）對其進行消毒。
預設情況下，QEditor 提供您在所見即所得編輯器中需要的大部分（如果不是全部）命令：粗體、斜體、刪除線、底線、無序（列表）、有序（列表）、下標、上標、連結、全螢幕、引用、左對齊、置中對齊、靠右對齊、分散對齊、列印、減少縮排、增加縮排、移除格式、水平線、復原、重做、h1 到 h6、p（段落）、程式碼（程式碼段落）、size-1 到 size-7。
這些命令中的每一個都預先配置了圖示和它們自己的國際化工具提示。但是，如果您想覆蓋它們的某些設定，您可以使用 definitions Object 屬性來做到這一點。
:definitions="{
bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
}"以下是一個新增自訂定義的範例。在這種情況下，請確保您不會與預設命令重疊
下拉選單
下拉選單類型
<q-editor
v-model="model"
:toolbar="[
[
{
label: 'Icons & Label',
icon: 'filter_1',
fixedLabel: true,
fixedIcon: true,
options: ['bold', 'italic', 'strike', 'underline']
}
],
[
{
label: 'Only label',
icon: 'filter_2',
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: ['bold', 'italic', 'strike', 'underline']
}
],
[
{
label: 'Only icons',
icon: 'filter_3',
fixedLabel: true,
fixedIcon: true,
list: 'only-icons',
options: ['bold', 'italic', 'strike', 'underline']
}
]
]"
/>具有互斥選項的下拉選單
使用者只能從每個下拉選單中選擇一個選項。
- 第一個具有根據目前選擇變更的圖示和標籤
- 第二個具有固定的標籤但動態的圖示
- 第三個具有固定的圖示但動態的標籤
<q-editor
v-model="model"
:toolbar="[
[
{
label: 'Dynamic label',
icon: 'help_outline',
options: ['left', 'center', 'right', 'justify']
}
],
[
{
label: 'Static label',
fixedLabel: true,
options: ['left', 'center', 'right', 'justify']
}
],
[
{
label: 'Some label',
icon: 'account_balance',
fixedIcon: true,
options: ['left', 'center', 'right', 'justify']
}
]
]"
/>注意事項
自動校正 & 拼字檢查
在某些情況下，您可能想要關閉許多現代瀏覽器提供的整合式自動校正、自動完成、自動大寫和拼字校正「功能」。若要執行此操作，只需將 <q-editor> 元件包裝在 <form> 元素中，如下所示
<form
autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
>
<q-editor v-model="editor" />
</form>圖片
從緩衝區貼上和將圖片拖放至編輯器中，在不同瀏覽器之間有所不同，並且高度取決於圖片最初是如何進入緩衝區的。事實上，直到最近，您甚至可以在使用 Firefox 時調整 ContentEditable 中的圖片大小。如果您想允許圖片貼上/拖放，我們強烈建議您編寫自己的方法。
<q-editor
v-model="editor"
@paste.native="evt => pasteCapture(evt)"
@drop.native="evt => dropCapture(evt)"
/>純文字貼上
如果貼上事件內容類型為文字，並且取決於文字來源，則可能已經存在大量標記，contentEditable 會自動剖析這些標記。如果您只想貼上「乾淨、無標記」的文字，那麼您可以使用此範例中的方法（該範例也關閉了拼字校正，如上所述）
列印
如果您未設定字型（或使用者未選擇字型），則列印對話方塊將預設為系統字型，這可能會因瀏覽器和底層作業系統而異。請務必考慮到這一點。
國際化
QEditor 的工具提示內容由 Quasar 語言包翻譯，因此僅僅更改語言也會更改介面。如果您所需的語言包遺失或您發現錯誤，請考慮將更新作為 PR 提供。