vue+element+富文本编辑器

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

]

这样就实现我们要的样子了