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
]

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

Logo

前往低代码交流专区

更多推荐