import
VueQuillEditor
from
'vue-quill-editor'
import
'quill/dist/quill.core.css'
import
'quill/dist/quill.snow.css'
import
'quill/dist/quill.bubble.css'
Vue
.
use
(
VueQuillEditor
)
定义富文本编辑器数据项
data() {
return {
content: ''
<el-form-item label="文章内容">
<quill-editor v-model="content"></quill-editor>
</el-form-item>
美化富文本编辑器样式
/deep/ .ql-editor {
min-height: 300px;
富文本编辑器还可以自定义工具栏工具
// 全局配置
// 工具栏
const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ align: [] }], // 对齐方式-----[{ align: [] }]
[{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ font: fonts }], // 字体种类-----[{ font: [] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
//全局所有的配置
Vue.use(VueQuillEditor, {
modules: {
toolbar: {
container: toolbarOptions
// 局部
<quill-editor :options="editorOption"></quill-editor>
data() {
return {
editorOption: {
modules: {
toolbar: {
container: toolbarOptions
复制代码
