编辑器（WYSIWYG）

QEditor是一个WYSIWYG（“what you see is what you get”, 即所见即所得）编辑器组件。

警告
在生成的V-model上使用v-html会使您容易遭受跨站点脚本攻击。
如果内容是用户生成的，请务必在渲染或服务器端对其进行清理。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QEditor']
}

基本用法

<q-editor v-model="model" />

国际化

QEditor的工具提示内容是Quasar I18n的一部分。如果您的语言包缺失，请为其提供PR。

Vue属性

支持v-model，它应该绑定到你的作用域中的一个字符串，这本质上是HTML代码。

Vue属性 类型 说明
readonly 布尔 将编辑器设置为只读模式。
disable 布尔 将编辑器设置为禁用模式。
min-height 字符串 CSS单位,用于输入区域的最小高度。
max-height 字符串 CSS单位,用于输入区域的最大高度。
definitions 对象 带有定义的对象（请参阅下一节）。
fonts 对象 带有字体定义的对象（请参阅下一节）。
toolbar 数组 带有工具栏命令的对象/字符串数组（参阅下一节）。
toolbar-color 字符串 工具栏命令的颜色（来自Quasar Palette）。
toolbar-text-color 字符串 工具栏命令的文字颜色（来自Quasar Palette）。
toolbar-toggle-color 字符串 工具栏命令处于“活动”状态时的颜色（来自Quasar Palette）。
toolbar-bg 字符串 工具栏背景颜色（来自Quasar Palette）。
toolbar-flat 布尔 工具栏按钮变成“扁平”类型。
toolbar-outline 布尔 工具栏按钮变为“轮廓”类型。
toolbar-push 布尔 工具栏按钮变成“推”型。
toolbar-rounded 布尔 工具栏按钮变为“圆形”类型。
content-style 对象 输入区域的对象格式的CSS样式。
content-class 对象/数组/字符串 输入区域的CSS类。

定义

默认情况下，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对象属性的帮助下完成。

<!--
  覆盖“bold”命令以包含标签而不是图标
  并改变它的工具提示
-->
:definitions="{
  bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
}"

添加您自己的定义的例子。 在此例中，请确保您不会覆盖默认命令：

<!-- 我们可以稍后使用“toolbar”属性中的“save”和“upload”-->
:definitions="{
  save: {
    tip: 'Save your work',
    icon: 'save',
    label: 'Save',
    handler: saveWork
  },
  upload: {
    tip: 'Upload to cloud',
    icon: 'cloud_upload',
    label: 'Upload',
    handler: uploadIt
  }
}"
<!--
  注意handler。 当使用这些定义的工具栏命令
  被点击/轻按时，它引用你的Vue作用域中的方法。
-->

命令定义属性：

属性名称 类型 说明
label 字符串 按钮标签
icon 字符串 按钮的图标
tip 字符串 按钮的工具提示
cmd 字符串 此属性或者“handler”是必需的 本节开头描述的命令之一。
handler 函数 此属性或者“cmd”是必需的。 当按钮被点击/轻按时触发的函数。
disable 布尔/函数 按钮是否被禁用？ 如果指定一个函数，则返回一个布尔值。

使用QEditor命令添加定义的另一个示例：

:definitions="{
  customItalic: {
    cmd: 'italic',
    icon: 'camera_enhance',
    tip: 'Italic'
  }
}"

字体

指定字体的例子，以便稍后可以将它们用作工具栏中的选项。 它们变成了“命令”本身，所以请确保你不重叠任何默认命令。

:fonts="{
  arial: 'Arial',
  arial_black: 'Arial Black',
  comic_sans: 'Comic Sans MS'
}"

然后在工具栏中，您可以引用它们。 下面的例子创建一个下拉菜单。

:toolbar="[
  ...,
  [{
    label: $q.i18n.editor.defaultFont,
    icon: $q.icon.editor.font,
    fixedIcon: true,
    list: 'no-icons',
    options: ['default_font', 'arial', 'arial_black', 'comic_sans']
  }]
]"

工具栏

tooltip属性是您根据自己的命令和默认命令配置工具栏外观的方式。 这是一个对象/字符串阵列。 每个子数组代表一个按钮组。

[ // 按钮组数组
  [ ... ], // 按钮组
  [ ... ], // 按钮组
  ...
]

:toolbar="[
  ['bold', 'italic', 'strike', 'underline'],
  ['token', 'hr', 'link', 'custom_btn'],
  ['print', 'fullscreen']
]"

看看下面的演示和示例，了解如何指定下拉菜单。 您可以将下拉列表作为单个选择，这意味着列表中只有一个命令可以进入“活动”状态。

<!-- 带文本对齐命令的下拉列表示例 -->
:toolbar="[
  [
    {
      label: $q.i18n.editor.align,
      icon: $q.icon.editor.align,
      fixedLabel: true,
      list: 'only-icons',
      options: ['left', 'center', 'right', 'justify']
    }
  ]
]"

Vue活动

Vue事件 说明
@input 当输入区域内容改变时触发。

例子

复杂的例子

<q-editor
  v-model="model"
  :toolbar="[
    ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
    ['token', 'hr', 'link', 'custom_btn'],
    ['print', 'fullscreen'],
    [
      {
        label: $q.i18n.editor.formatting,
        icon: $q.icon.editor.formatting,
        list: 'no-icons',
        options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
      },
      {
        label: $q.i18n.editor.fontSize,
        icon: $q.icon.editor.fontSize,
        fixedLabel: true,
        fixedIcon: true,
        list: 'no-icons',
        options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7']
      },
      {
        label: $q.i18n.editor.defaultFont,
        icon: $q.icon.editor.font,
        fixedIcon: true,
        list: 'no-icons',
        options: ['default_font', 'arial', 'arial_black', 'comic_sans', 'courier_new', 'impact', 'lucida_grande', 'times_new_roman', 'verdana']
      },
      'removeFormat'
    ],
    ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
    [
      {
        label: $q.i18n.editor.align,
        icon: $q.icon.editor.align,
        fixedLabel: true,
        list: 'only-icons',
        options: ['left', 'center', 'right', 'justify']
      },
      {
        label: $q.i18n.editor.align,
        icon: $q.icon.editor.align,
        fixedLabel: true,
        options: ['left', 'center', 'right', 'justify']
      }
    ],
    ['undo', 'redo']
  ]"
  :fonts="{
    arial: 'Arial',
    arial_black: 'Arial Black',
    comic_sans: 'Comic Sans MS',
    courier_new: 'Courier New',
    impact: 'Impact',
    lucida_grande: 'Lucida Grande',
    times_new_roman: 'Times New Roman',
    verdana: 'Verdana'
  }"
/>

覆盖并扩展默认的工具栏按钮定义

这些特定情况：

<q-editor
  v-model="model"
  :toolbar="[
    ['bold', 'italic'],
    ['customItalic'],
    ['save', 'upload'],
    ['spellcheck'],
    ['disabledButton'],
    ['custom_btn']
  ]"
  :definitions="{
    bold: {cmd: 'bold', label: 'Bold', icon: null, tip: 'My bold tooltip'},
    italic: {cmd: 'italic', icon: 'border_color', tip: 'My italic tooltip'},
    customItalic: {cmd: 'italic', icon: 'camera_enhance', tip: 'Italic'},
    save: {tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork},
    upload: {tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: upload},
    spellcheck: {tip: 'Run spell-check', icon: 'spellcheck', handler: spellCheck},
    disabledButton: {tip: 'I am disabled...', disable: true, icon: 'cloud_off'}
  }"
>
  <q-btn
    slot="custom_btn"
    dense
    color="secondary"
    icon="import_contacts"
    label="Import"
    @click="importSomething"
  />
</q-editor>

自定义样式

<q-editor
  v-model="model"
  toolbar-text-color="white"
  toolbar-toggle-color="yellow-8"
  toolbar-flat
  toolbar-bg="primary"
  :toolbar="[
    ['bold', 'italic', 'underline'],
    [{
      label: $q.i18n.editor.formatting,
      icon: $q.icon.editor.formatting,
      list: 'no-icons',
      options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
    }]
  ]"
/>

下拉类型

<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']
      }
    ]
  ]"
/>
自动完成 搜索