富文本编辑器 (WYSIWYG)

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

定义工具栏

toolbar 属性是一个由若干组构成的数组，各组之间会带间隔渲染，而每一组又是一个由若干 token 组成的数组。一个 token 可以是某个命令的名称（下方列表中的内置命令，或你通过 definitions 属性添加的命令）、一个带 options 的对象（表示命令下拉框），或任意其他字符串（此时它会成为同名的工具栏插槽）。

toolbar: [
  // 由若干组构成的数组，每组又是一个 token 数组
  // 内置命令，按名称
  ['bold', 'italic', 'strike', 'underline'],

  [
    // 一个下拉框：一个对象，其列出的命令放在 'options' 下
    {
      label: 'Formatting', // 通常用 $q.lang.editor.formatting，这样会被翻译
      icon: 'format_size', // 通常用 $q.iconSet.editor.formatting，这样会跟随图标集
      // （可选）'no-icons' 仅按 label 列出选项，'only-icons' 仅按图标列出；
      // 否则两者都显示
      list: 'no-icons',
      // （可选）保留下拉框自身的 label 和 icon，而非选中项的
      fixedLabel: true,
      fixedIcon: true,
      // （可选）当某个选中项生效时，把下拉框着色为已切换状态（"toolbar-toggle-color"）
      highlight: true,
      options: ['p', 'h1', 'h2', 'h3', 'code']
    }
  ],

  // 一个你通过 'definitions' 属性添加的命令
  ['save'],

  // 任意其他字符串：同名的工具栏插槽（<template v-slot:token>）
  ['token']
]

内置命令，每个都预先配置了图标和国际化提示：

分组	命令
文本	`bold`、`italic`、`strike`、`underline`、`subscript`、`superscript`、`removeFormat`
块	`p`（段落）、`h1` 到 `h6`、`code`（代码段）、`quote`
对齐	`left`、`center`、`right`、`justify`
列表与缩进	`unordered`、`ordered`、`outdent`、`indent`
插入	`link`、`hr`
字体	`size-1` 到 `size-7`、`default_font` 以及来自你 `fonts` 属性的名称
历史与视图	`undo`、`redo`、`fullscreen`、`viewsource`、`print`

要覆盖某个内置命令的部分设置，或添加你自己的命令，请使用 definitions 属性：一个以命令名为键的对象（键见其 API：label、icon、tip、handler 或 cmd 等）。该命令名随后即可像其他命令一样放进工具栏。

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

示例

WARNING

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

TIP

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

添加链接

link 命令会将工具栏切换为一个指向当前选区（或者，如果没有选中内容，则指向光标所在单词）的 URL 输入字段。如果选中的文本本身看起来就是一个 URL，字段会预填该文本，否则字段为空（并以 https:// 作为提示占位符显示），这样复制来的 URL 可以直接粘贴进去。

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

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

只读和禁用

readonly 属性会阻止内容被编辑，因此每一个会修改内容的工具栏命令都会被禁用。只读取内容的命令仍然可用：fullscreen（全屏）、print（打印）和 viewsource（查看源码），这让一个只读的 QEditor 仍能作为查看器使用。

disable 属性则会让整个组件停止工作：内容不可编辑，整个工具栏都被禁用，并且编辑器会变暗显示。

下拉框

下拉框的类型

<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.30+

dropdown-hover 属性使工具栏下拉框在鼠标悬停其按钮时也会打开，当指针离开按钮和菜单后关闭。点击、轻触和键盘交互仍然像往常一样切换下拉框，而触屏设备（没有悬停）会回退到这些交互方式。

dropdown-hover-delay（默认 0）是指针需要在按钮上停留多久其下拉框才会打开，这可以在指针只是路过时保持工具栏安静。dropdown-hover-hide-delay（默认 150）是指针可以重新进入按钮或其菜单以避免下拉框关闭的宽限期，这样在按钮间隙上稍微偏离目标的移动不会把它关掉。

无障碍
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)"
/>

粘贴纯文本

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

打印

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

国际化