vue-quill-editor 富文本使用

 1.下载安装    官方文档：https://www.kancloud.cn/liuwave/quill/1409423

npm install quill -S

npm install vue-quill-editor -S

2. 如果需要设置图片大小还需安装

npm install quill-image-resize-module --save

一、开始使用

1.全局挂载

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, /* { default global options } */)

2.组件中挂载 

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'

 //　设置图片大小

 import ImageResize from 'quill-image-resize-module'
　Quill.register('modules/imageResize', ImageResize)

export default {
  components: {
    quillEditor，ImageResize
  }
}

二、在vue.config.js 添加代码 ，不然引入import ImageResize from 'quill-image-resize-module'，会报错 

const webpack = require("webpack")
// 放在 configureWebpack 中
plugins: [
           new webpack.ProvidePlugin({
              'window.Quill': 'quill/dist/quill.js',
               'Quill': 'quill/dist/quill.js',
            })
         ]

三、使用vue页面中使用
   1.通过上传图片到服务器，服务器返回图片的地址，然后放到富文本中 （不建议使用富文本自带的功能- 图片转换成base64然后插入到富文本中）

<quill-editor
             ref="myQuillEditor"
             v-model="textContent"
             style="height: 500px;"
              @blur="onEditorBlur($event)"
             @focus="onEditorFocus($event)"
             @ready="onEditorReady($event)"
             :options="editorOption"
           />
         </el-card>
         <!-- 上传图片 -->
         <input
           v-show="false"
           id="fileInput"
           ref="clearFile"
           type="file"
           multiple="multiplt"
           class="add-file-right-input"
           @change="getFile($event)"
         >

2.富文本配置 

editorOption: {
            placeholder: '请输入...',
            modules: {
               toolbar: {
                 container: [ // 工具栏配置, 默认是全部
                   ["bold", "italic", "underline", "strike"],
                   [{ color: [] }, { background: [] }],
                   [{ header: 1 }, { header: 2 }],
                   [{ script: "sub" }, { script: "super" }],
                    [{ indent: "-1" }, { indent: "+1" }],
                    [{ size: ["small", false, "large", "huge"] }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ font: [] }],
                    [{ 'align': [] }], 
                   [{
                     'list': 'ordered'
                   }, {
                     'list': 'bullet'
                   }],
                   ['blockquote'],
                   ['code-block'],
                   ['link'],
                   ['image'],
                 ],
                 // 插入图片连接到富文本中
                 handlers: {
                   'image': function(value) {
                     if (value) {
                       // this.$refs.clearFile.value = null
                       console.log('value', value)
                       document.getElementById('fileInput').click()
                     } else {
                       this.quill.format('image', false)
                     }
                   }
                 }
               },
               // 调整图片大小
                imageResize: {
                    displayStyles: {
                        backgroundColor: 'black',
                        border: 'none',
                        color: 'white'
                    },
                    modules: ['Resize', 'DisplaySize', 'Toolbar']
                }
            }
        }

3.上传图片

getFile(event) {
        const file = event.target.files
        console.log('file', file[0])
        const img = file[0]
        const imgName = file[0].name
        const size = file[0].size
        // 这里你是图片上传的代码
           .....
       // 上传完成后从接口返回值中获取到 图片地址
            const quill = this.$refs.myQuillEditor.quill
            const length = quill.getSelection().index
            // 插入图片 response.data.url为服务器返回的图片地址
            quill.insertEmbed(length, 'image', imgUrl)
            // 调整光标到最后
            quill.setSelection(length + 1) 
}

methods: {
      //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    }

以上就可以基本使用富文本编辑器了

注意事项：

1.在富文本编辑器中样式是对的，但在客户端样式没生效

　　a.从管理端复制  quill.core.css

          

 

      b.在客户端引用css

     c. 在用到富文本的地方 加上样式 class='ql-editor'

       

 

 

 

 

 

 

标签：vue,dist,editor,css,import,quill,const
来源： https://www.cnblogs.com/yuanyue/p/15466402.html