编辑器(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']
}
]
]"
/>