富文本编辑器 (WYSIWYG)

QEditor 组件是一个 WYSIWYG （“what you see is what you get”——所见即所得）富文本编辑器，它可以将用户输入的内容转化成 HTML。它使用了浏览器的 contentEditable 和 designMode 接口。这里有一些关于所使用到的底层技术的文档：

WARNING

在第一个示例中，编辑器下面有两张卡片。第一个使用双大括号语法直接显示未解析 html 结果，而第二个使用 v-html="editor" 显示解析后的渲染版本。但是这样使用 v-html 会使您的用户容易受到跨网站脚本攻击。如果内容是用户生成的，请确保在渲染端或服务器端（或两者）对其进行消毒清理。

默认情况下，QEditor 提供了 WYSIWYG 编辑器中所需的大部分功能：粗体、斜体、删除线、下划线、无序列表、有序列表、下标、上标、链接、全屏、引号、左对齐、居中对齐、右对齐、对齐、打印、输出、缩进、删除格式、hr、撤消、重做、h1 到 h6、段落、代码段、字体大小 1 到大小 7。

每个功能都预先配置了图标和国际化文案提示。但是，如果您想重写它们的某些设置，可以修改 definitions 配置对象。

:definitions="{ bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'} }"

TIP

QEditor 的工具提示文案内容由 Quasar 语言包提供，因此仅更改语言也会更改界面。如果缺少所需的语言包，或者发现错误，请考虑以 PR 形式提供更新。

添加链接

link 命令会将工具栏切换为一个指向当前选区（或者，如果没有选中内容，则指向光标所在单词）的 URL 输入字段。如果选中的文本本身看起来就是一个 URL，字段会预填该文本，否则预填 https://。

只有当你确认提交 URL 时，内容才会被修改——可以按 Enter，点击"更新"按钮，或者简单地点击字段外部。如果保持 https:// 不动就离开，不会提交任何东西，因此放弃字段不会留下损坏的链接。Escape 直接取消，而"移除"按钮则会从选区中删除链接。

无论你把该命令放在哪里（包括下方描述的下拉框内），它的行为都是一致的。

下拉框

下拉框的类型

<q-editor
  v-model="model"
  :toolbar="[
    [
      {
        label: '图标 & 标签',
        icon: 'filter_1',
        fixedLabel: true,
        fixedIcon: true,
        options: ['bold', 'italic', 'strike', 'underline']
      }
    ],
    [
      {
        label: '只有标签',
        icon: 'filter_2',
        fixedLabel: true,
        fixedIcon: true,
        list: 'no-icons',
        options: ['bold', 'italic', 'strike', 'underline']
      }
    ],
    [
      {
        label: '只有图标',
        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']
      }
    ]
  ]"
/>

无障碍
v2.25+

键盘导航

遵循 WAI-ARIA 工具栏模式，工具栏是一个单独的 Tab 停靠点：按 Tab 将焦点移入工具栏（到上次使用的按钮，或第一个启用的按钮），再按一次 Tab 则移到编辑区域，而不是遍历每个按钮。在工具栏内部，Arrow Left 和 Arrow Right 在按钮间移动焦点（两端环绕，RTL 下跟随文字方向），Home 和 End 跳到第一个或最后一个按钮。通过自定义工具栏插槽渲染的内容保留其自身的 Tab 停靠点。

与当前工具栏关联的命令在编辑时也响应对应的 CTRL 快捷键组合（显示在按钮工具提示中）——例如 CTRL + B 切换粗体。

你可以通过阻止 QEditor 的 keydown 事件来阻止其执行某个命令；例如，@keydown.ctrl.b.prevent 会让 CTRL + B 交给你自己的处理函数，而不是切换粗体。

编辑区域以多行 textbox 角色暴露，工具栏携带来自 Quasar 语言包的本地化 aria-label。它还将自身的属性映射到该角色上：placeholder 变为 aria-placeholder，readonly 和 disable 分别以 aria-readonly 和 aria-disabled 呈现。切换命令（粗体、斜体、对齐按钮等）通过 aria-pressed 而非仅仅通过颜色来通报状态，超链接编辑器的 URL 字段也从同一个语言包获取标签。传递给 QEditor 本身的属性（如 aria-label、aria-labelledby 或 aria-describedby）会应用到编辑区域，因此你可以——也应该——给它一个无障碍名称：

<q-editor v-model="model" aria-label="文章正文" />

帮助对话框

一些所见即所得编辑器提供列出可用键盘命令的对话框。QEditor 没有内置这样的对话框，但通过自定义工具栏插槽可以实现：

注意事项

自动纠错 & 拼写检查

在某些情况下，您可能想关闭许多现代浏览器提供的自动纠错、自动补全、自动大写和拼写纠错"功能"。您可以简单的给 <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="evt => pasteCapture(evt)"
  @drop="evt => dropCapture(evt)"
/>

粘贴纯文本

如果粘贴事件内容类型是文本，浏览器可能会根据文本的来源，自动解析可满足的标签。如果您只想粘贴"干净，无标签"纯文本，则可以使用在此示例中的方法（该方法也会关闭上述拼写校正）：

打印

如果您没有设置字体（或者用户没有选择字体），打印对话框中将使用系统默认字体，根据浏览器和底层操作系统的不同而不同。一定要考虑到这一点。

国际化