富文本组件使用以及图片缩放和上传到接口并回显

1. html（代码复制在下面）

 
                v-model="form.instructions" 
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)" >
           
             

 2.需要安装对应的插件

使用富文本时候安装插件：

npm i vue-quill-editor -S

进行图形的缩放

npm i quill-image-drop-module -Snpm i quill-image-resize-module -S

图片上传

npm i quill-image-extend-module -S

但是一般会报错，安装之后，下面会用另一种方法；（文章末尾）

在js中引用

 import {quillEditor} from 'vue-quill-editor'
    import Quill from 'quill'
    import {ImageDrop} from 'quill-image-drop-module'
    import ImageResize from 'quill-image-resize-module'
    import { container,ImageExtend, QuillWatch} from 'quill-image-extend-module'
    import { upload } from "@/api/system/user";
    Quill.register('modules/ImageExtend', ImageExtend);
    Quill.register('modules/imageDrop', ImageDrop);
    Quill.register('modules/imageResize', ImageResize);

 对应的富文本：

      //富文本编辑器
      editorOption: {
        modules: {
            imageDrop: true, //图片拖拽
            imageResize: { //放大缩小
            displaySize: true        
            },
          toolbar: {
           container: [
                    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                    ["blockquote", "code-block"], // 引用  代码块
                    [{ header: 1 }, { header: 2 }], // 1、2 级标题
                    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                    [{ script: "sub" }, { script: "super" }], // 上标/下标
                    [{ indent: "-1" }, { indent: "+1" }], // 缩进
                    // [{'direction': 'rtl'}],                         // 文本方向
                    [{ size: ["small", false, "large", "huge"] }], // 字体大小
                    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                    [{ font: [] }], // 字体种类
                    [{ align: [] }], // 对齐方式
                    ["clean"], // 清除文本格式
                    ["link", "image", "video"] // 链接、图片、视频
              ],
             handlers: {
                  image: function(value) {
                     // debugger;
                                 if (value) {
                                   document.getElementById('upload').click()                                  
                                 } else {
                                   this.quill.format('image', false)
                                 }
                               },
             }
          },
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        },
      },

在上面的HTML中定义绑定了change事件，同时绑定id就是上传图片的接口(本文中是upload)

下面就是相应的change事件

 change(e) {
                 debugger;
                  let file = e.target.files[0]
                  const formData = new FormData()
                  formData.append('file', file)
                 upload(formData).then(res => {
                      let quill = this.$refs.myQuillEditor.quill
                      if (res.code === 200) {                      
                        let length = quill.getSelection().index
                        quill.insertEmbed(length, 'image', res.data)
                        quill.setSelection(length + 1)
                      }
                    })
                    .catch(err => {
                      console.error(err)
                    })
                },

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！