使用vue-quill-editor将图片单独保存在服务器

使用vue-quill-editor将图片单独保存在服务器

功能要求：

1. 点击插件工具栏中的上传图片按钮上传图片；
2. 图片插入在光标所在位置；
3. 上传图片至服务器。

安装vue-quill-editor插件

npm install vue-quill-editor --save

关键代码块：

<template>
  <input type="file" id="img" class="image" @change="uploadImg()" >/*覆盖插件的上传文件的input*/
 <quill-editor ref="myQuillEditor" v-model="body" :options="editorOption" />
</template>

<script>
import Vue from 'vue'
import "/static/js/libs/jquery-1.9.1.min.js";
/* vue-quii-editor需要引入的文件*/
import {quillEditor，Quill} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
 data(){
     return {
      body:"",//需要保存的富文本内容
      editorOption: { //配置vue-quill-editor工具栏
      modules: {
        toolbar: {
          container: [//以下内容可根据自己需要进行自定义
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{
              'header': 1
            }, {
              'header': 2
            }], // 几级标题
            [{
              'list': 'ordered'
            }, {
              'list': 'bullet'
            }], // 有序列表，无序列表
            [{
              'script': 'sub'
            }, {
              'script': 'super'
            }], // 下角标，上角标
            [{
              'indent': '-1'
            }, {
              'indent': '+1'
            }], // 缩进
            [{
              'direction': 'rtl'
            }], // 文字输入方向
            [{
              'size': ['45px', '60px', '90px']
            }], // 字体大小
            [{
              'header': [1, 2, 3, 4, 5, 6, false]
            }], // 标题
            [{
              'color': []
            }, {
              'background': []
            }], // 颜色选择
            [{
              'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
            }], // 字体
            [{
              'align': []
            }], // 居中
            ['clean'], // 清除样式
            ['image'],
            ['link']
          ],
          handlers: {//覆盖原来的图片点击事件，关键代码！！！！
            'image': function (value) {
              if (value) {
                document.querySelector('.image').click();
              } else {
                this.Quill.format('image', false);
              }
            }
          }
        },

      },
      // 背景颜色 - background
      // 加粗- bold
      // 颜色 - color
      // 字体 - font
      // 内联代码 - code
      // 斜体 - italic
      // 链接 - link
      // 大小 - size
      // 删除线 - strike
      // 上标/下标 - script
      // 下划线 - underline
      // 引用- blockquote
      // 标题 - header
      // 缩进 - indent
      // 列表 - list
      // 文本对齐 - align
      // 文本方向 - direction
      // 代码块 - code-block
      // 公式 - formula
      // 图片 - image
      // 视频 - video
      // 清除字体样式- clean
    },
   },
  },
   methods:{
     uploadImg() {
      let self = this;
      var upUrl="服务器地址";
      var file = document.getElementById('img').files[0];
      var from = new FormData();
       from.append("base64Data", file);
      $.ajax({
        url:upUrl,
        type: 'POST',
        data: from,
        cache: false,
        processData: false,// 不处理数据
        contentType: false, // 不设置内容类型
        success: function (data) {
            var quill = self.$refs.myQuillEditor.quill;
            let length = quill.getSelection().index;//获取插件光标index
            quill.insertEmbed(length, 'image', data.data);//将img插入光标所在位置
            quill.setSelection(length + 1);//光标位置下移
             var img_append = document.querySelector('.ql-snow .ql-editor img');//选择图片区域
            img_append.setAttribute('style',"max-width:300px;max-height:400px;");//设置最大宽高
        }
      })
    },
   }
}
</script>
<style>

.image{
   display: none;
}
</style>

卸载vue-quill-editor插件

npm uninstall vue-quill-editor //谨慎操作-_-

注：如有疑问欢迎评论下方留言~