QEditor组件是WYSIWYG（“所见即所得”）编辑器组件，使用户能够编写甚至粘贴HTML。 它使用了所谓的“设计模式”和跨浏览器的contentEditable界面。 以下是MDN Webdocs的一些参考手册，其中包含有关基础技术的更多详细信息：

• 使内容可编辑
• 设计模式
• execCommand()参考
• contentEditable规范

QEditor API

例子

默认情况下，QEditor在所见即所得编辑器中提供大部分（如果不是全部）命令：粗体(bold)、斜体(italic)、删除线（strike）、下划线（underline）、无序（列表，unordered）、有序（列表，ordered）、下标（subscript）、上标（superscript）、链接（link）、全屏（fullscreen）、引用符（quote）、左（对齐，left）、中心（对齐，center）、右（对齐，right)、两端对齐（justify）、打印（print）、减少缩进（outdent）、缩进（indent）、删除格式（removeFormat）、hr、撤销（undo）、重做（redo）、h1到h6、p（段落）、代码（代码段，code）、大小1到7(size-1到size-7)。

这些命令中的每一个都预先配置了图标和它们自己的国际化工具提示。 但是，如果要覆盖它们的某些设置，则可以在definitions对象属性的帮助下做到这点。

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

以下是添加自定义definitions的示例。 在这种情况下，请确保您没有覆盖默认命令：

下拉

下拉类型

<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 model="editor" />
</form>

图片

不幸的是，从缓冲区中粘贴图像并将图像拖放到编辑器中在不同浏览器下表现不一致——并且还高度依赖于图像如何首先进入缓冲区。 实际上，直到最近，使用Firefox甚至可以在ContentEditable中调整图像的大小。 如果要允许图像粘贴/拖放，我们强烈建议编写自己的方法。

<q-editor
  model="editor"
  @paste.native="evt => pasteCapture(evt)"
  @drop.native="evt => dropCapture(evt)"
 />

纯文本粘贴

如果粘贴事件的内容类型是文本，并且取决于文本的来源，则contentEditable可能已经自动解析了很多标记。 如果您只想粘贴“干净，无标记”的文本，则可以在此示例中使用此方法（如上所述，该方法也将关闭拼写校正）：

打印

如果未设置字体（或用户未选择一种字体），则打印对话框将默认为系统字体，具体取决于浏览器和基础操作系统。 确保考虑到这一点。

国际化

QEditor的工具提示内容由Quasar语言包翻译，因此仅更改语言也将更改界面。 如果缺少所需的语言包——或发现错误，请考虑将更新作为PR提供。