QEditor 组件是一个所见即所得 (WYSIWYG) 编辑器组件，用户可以编写甚至粘贴 HTML。它使用所谓的设计模式和跨浏览器的 contentEditable 接口。以下是 MDN 网页文档中的一些常用参考页面，其中包含有关底层技术的更多详细信息：

¥The QEditor component is a WYSIWYG (“what you see is what you get”) editor component that enables the user to write and even paste HTML. It uses the so-called Design Mode and the cross-browser contentEditable interface. Here are some go-to reference pages from the MDN webdocs with more detailed information about the underlying technology:

• 使内容可编辑

  ¥Making content editable

• 设计模式

  ¥Design Mode

• execCommand() 参考

  ¥execCommand() reference

• contentEditable 规范

  ¥contentEditable spec

示例(Examples)

¥Examples

默认情况下，QEditor 提供了你在所见即所得 (WYSIWYG) 编辑器中所需的大多数（如果不是全部）命令：粗体、斜体、删除线、下划线、无序（列表）、有序（列表）、下标上标、链接、全屏、引用、左对齐、居中对齐、右对齐、两端对齐、打印、减少缩进、缩进、移除格式、小时、撤消、重做、h1 到 h6、p（段落）、代码（代码段落）、size-1 到 size-7。

¥By default, QEditor offers most if not all the commands you’d need in a WYSIWYG editor: bold, italic, strike, underline, unordered (list), ordered (list), subscript, superscript, link, fullscreen, quote, left (align), center (align), right (align), justify (align), print, outdent, indent, removeFormat, hr, undo, redo, h1 to h6, p (paragraph), code (code paragraph), size-1 to size-7.

每个命令都预先配置了图标和国际化的工具提示。但是，如果你想覆盖某些设置，可以借助 Definition 对象属性来实现。

¥Each of these commands is pre-configured with icons and their own internationalized tooltips. However, if you want to override some of their settings you can do so with the help of definitions Object property.

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

以下是添加自定义定义的示例。在这种情况下，请确保不要与默认命令重叠：

¥The following is an example that adds custom definitions. In such cases, make sure you don’t overlap the default commands:

下拉菜单(Dropdowns)

¥Dropdowns

下拉菜单的类型(Types of dropdowns)

¥Types of dropdowns

<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']
      }
    ]
  ]"
/>

带有独占选项的下拉菜单(Dropdowns with exclusive options)

¥Dropdowns with exclusive options

用户只能从每个下拉菜单中选择一个选项。

¥User can pick only one option from each dropdown.

• 第一个示例的图标和标签会根据当前选择进行变化。

  ¥First has icon and label changing based on current selection

• 第二个 QBtnToggle 具有固定标签但动态图标。

  ¥Second has fixed label but dynamic icon

• 第三个版本具有固定图标和动态标签。

  ¥Third has fixed icon but dynamic label

<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']
      }
    ]
  ]"
/>

注意事项(Caveats)

¥Caveats

自动更正和拼写检查(Autocorrect & spellcheck)

¥Autocorrect & spellcheck

有时你可能需要关闭许多现代浏览器提供的集成自动更正、自动补齐、自动大写和拼写纠正 “features” 功能。只需将 <q-editor> 组件封装在 <form> 元素中，如下所示：

¥There may be occasions where you want to turn off the integrated autocorrect, autocomplete, autocapitalization and spelling correction “features” that many modern browsers offer. To do this, simply wrap the <q-editor> component in a <form> element, like this:

<form
  autocorrect="off"
  autocapitalize="off"
  autocomplete="off"
  spellcheck="false"
>
  <q-editor v-model="editor" />
</form>

图片(Images)

¥Images

遗憾的是，从缓冲区粘贴图片并将图片拖放到编辑器中，不同浏览器的操作有所不同。 - 并且高度依赖于图片最初是如何进入缓冲区的。实际上，直到最近，你甚至可以在使用 Firefox 时在 ContentEditable 中调整图片大小。如果你想允许粘贴/拖放图片，我们强烈建议你编写自己的方法。

¥Pasting from the buffer and drag & dropping images into the editor is unfortunately different across browsers - and also highly dependent upon how the image got into the buffer in the first place. In fact, up until very recently, you could even resize images within the ContentEditable when using Firefox. If you want to allow image pasting / dropping, we highly recommend writing your own methods.

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

纯文本粘贴(Plaintext pasting)

¥Plaintext pasting

如果粘贴事件的内容类型是文本，并且根据文本来源，可能已经存在大量 contentEditable 自动解析的标记。如果你只想粘贴 “干净、无标记” 文本，那么你可以使用本例中的方法（该方法也会关闭上面提到的拼写更正）：

¥If the paste event content type is text and depending on the source of text, there may already be a great deal of markup that the contentEditable automatically parses. If you want to paste only “clean, markup-free” text, then you can use the approach in this example (which also turns off spelling correction as mentioned above):

打印(Printing)

¥Printing

如果你未设置字体（或者用户未选择字体），打印对话框将默认使用系统字体，该字体可能因浏览器和底层操作系统而异。请务必考虑到这一点。

¥If you don’t set a font (or the user doesn’t choose one), the print dialogue will default to the system font, which can vary depending on browser and underlying operating system. Make sure to take this into consideration.

国际化(Internationalization)

¥Internationalization

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

¥The tooltips content of QEditor are translated by the Quasar Language Pack, so merely changing the language will also change the interface. If your desired language pack is missing - or you find an error, please consider providing the update as PR.