vue 富文本插件vue-quill-editor以及富文本图片

1. 安装vue-quill-editor
   npm install vue-quill-editor -S

npm install vue-quill-editor -S

2.安装quill
npm install quill -S

npm install quill -S

3. 引入
   main.js：
   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)

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
[图片上传中...(WechatIMG33.png-46d7ec-1590805181157-0)]
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

4。
需要用富文本的页面

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
data() {
return {
editorOption: {
placeholder: "编辑项目描述"
},
},

components: { quillEditor },

methods: {
onEditorChange({ quill, html, text }) {
this.ruleForm.description = html;
},
}
}

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";


export default {
  data() {
    return {
      editorOption: {
        placeholder: "编辑项目描述"
      },
 },

  components: { quillEditor },

  methods: {
    onEditorChange({ quill, html, text }) {
      this.ruleForm.description = html;
    },
}
}

代码1jpg 效果图1.png

5.富文本里面添加图片：
传到后台会有base64图片数据过大，前端页面过慢的问题，
解决办法是：可以考虑让后端人员做一个转换将图片转成链接的形式