QEditor 组件是一个所见即所得 (“所见即所得”) 编辑器组件，使用户能够编写甚至粘贴 HTML。它使用所谓的“设计模式” 和跨浏览器的 contentEditable 接口。以下是一些来自 MDN 网页文档的参考页面，其中包含有关基础技术的更多详细信息
示例
警告
在这个第一个示例中，编辑器下方有两个卡片。第一个使用双花括号显示未解析的 html，而第二个使用 v-html="editor" 显示渲染后的版本。以这种方式使用 v-html 使您的用户容易受到跨站点脚本攻击。如果内容是由用户生成的，请确保在渲染时或服务器端（或两者）对其进行消毒。
默认情况下，QEditor 提供了您在 WYSIWYG 编辑器中所需的大多数（如果不是全部）命令：粗体、斜体、删除线、下划线、无序（列表）、有序（列表）、下标、上标、链接、全屏、引用、左（对齐）、居中（对齐）、右（对齐）、两端对齐（对齐）、打印、缩进减少、缩进增加、删除格式、水平线、撤销、重做、h1 到 h6、p（段落）、code（代码段落）、size-1 到 size-7。
这些命令中的每一个都预先配置了图标和他们自己的国际化工具提示。但是，如果您想覆盖某些设置，可以使用 definitions 对象属性。
: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。