vue+element+富文本编辑器

最新推荐文章于 2021-10-31 21:24:13 发布

原创最新推荐文章于 2021-10-31 21:24:13 发布 · 1.1w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue+element+富文本编辑器专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中全局使用Quill富文本编辑器，包括安装、配置及自定义工具栏，确保图片上传效率并优化存储方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+element+富文本编辑器

全局使用

1.使用npm安装 vue-quill-editor

npm install vue-quill-editor --save

2.在main.js中引入富文本编辑器

//引用富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
 //引入富文本css
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//富文本编辑器添加实例
Vue.use(VueQuillEditor, /* { default global options } */)

3.在页面需要的地方放入

v-model 是双向绑定的数据
:options 是要给富文本编辑器的规则，值是个对象

<quill-editor v-model="goodsForm.goods" :options="editorOption">
</quill-editor>

在没有写配置之前，图片也是可以上传的但是他的上传编码是html，这样上传在数据库中非常大，不方便存储，所以我们要改变这种存储方式
不希望这样存储
在这里插入图片描述
如何配置可以参考这个网址

https://github.com/NextBoy/quill-image-extend-module
在这里插入图片描述

这里面的 toolbar对象就是工具栏，对象中的 container:是配置工具栏显示什么东西
在这里插入图片描述
image是个函数，这个函数在你点击图片的时候执行，我们可以在这个函数中设置图片什么时候上传

如果没有配置container，工具栏就只有默认的几个
接下来我们来配置container:toolbarOptions

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'] // remove formatting button
]

这样就实现我们要的样子了
在这里插入图片描述