vue-quill-editor 工具栏插槽
时间: 2023-10-09 22:08:12 浏览: 124
浅谈vue中使用编辑器vue-quill-editor踩过的坑
vue-quill-editor插件的工具栏插槽可以通过在编辑器组件中使用<slot name="toolbar"></slot>来添加。这意味着你可以在<quill-editor></quill-editor>标签中的<template>标签中自定义工具栏的内容。通过在options.js文件中设置toolbar选项,你可以指定要显示的工具栏按钮及其顺序。工具栏的设置可以参考以下代码示例:
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange">
<template v-slot:toolbar>
<!-- 在这里添加工具栏按钮 -->
</template>
</quill-editor>
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image']
]
},
handlers: {},
placeholder: "一开始提示文本"
}
阅读全文