vue富文本使用editor

富文本【图片上传、缩放、拖动和不能复制只能根据点击图片上传到服务器】

html 复制代码

<div id="editorId">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="addForm.content"
              :options="editorOption"
              :disabled="isDisable"
              @change="onEditorChange($event)"
            ></quill-editor>
            <input
              type="file"
              accept=".png,.jpg,.jpeg"
              @change="changeUpload"
              id="upload"
              style="display: none;"
            >
            <span class="wordNumber">{{ wordNumber}}/2000</span>
          </div>
          //给这个富文本加样式
          #editorId {
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
}

先下载插件并且引入

javascript 复制代码

import { quillEditor} from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module"
import ImageResize from 'quill-image-resize-module'
import { ImageDrop } from 'quill-image-drop-module';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill"  //注意一定要引入这个才能使用图片缩放
Quill.register("modules/ImageExtend", ImageExtend)
Quill.register("modules/ImageResize", ImageResize)
Quill.register('modules/imageDrop', ImageDrop);
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        placeholder: "编辑文章内容",
        theme: 'snow',

        modules: {
          clipboard: {
            // 粘贴板，处理粘贴图片  *** 主要是这里
            matchers: [[Node.ELEMENT_NODE, this.desMatcher]],
          },
          imageDrop: true,
          imageResize: {   //添加
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          ImageExtend: {
            loading: true,
            name: "pictureFile",
          },
          toolbar: {
            // container: container,
            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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image'] // 链接、图片，需要视频的可以加上video
            ],
            // 拦截
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('#upload').click()
                }
              }
            }
          }
        }
      },
      isDisable: false,
      wordNumber: ''
    };
  },
  methods: {
    changeUpload(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      this.$axios({
        method: "post",
        url: "/sys/fileOps/uploadFile",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then((res) => {
          let quill = this.$refs.myQuillEditor.quill
          if (res.data.code === 200) {
            //光标位置
            let length = quill.getSelection().index
            // 插入图
            quill.insertEmbed(length, "image", res.data.data)
            //  调整光标
            quill.setSelection(length + 1)
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err, '===');
          this.$message.error('系统错误');
        });
    },
    //内容改变事件
    onEditorChange(e) {
       e.quill.deleteText(800, 4);
      if (e.html == '') {
        this.wordNumber = 0
      } else {
        this.wordNumber = e.quill.getLength() - 1
      }
    },
    // 复制图片判断
    desMatcher(node, Delta) {
      console.log(Delta, '===')
      let ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，所以可以这样处理
          ops.push({
            insert: op.insert,
          })
        } else {
          if (op.insert.image.includes('file://') || op.insert.image.includes('data:image')) {  //本地图片会使文件file开头
            this.$message.warning('不允许粘贴图片,请手动上传')
          } else {
            ops.push({
              insert: op.insert,
            })
          }
        }
      })
      Delta.ops = ops
      return Delta
    }
  },
  created() { },
  mounted() { },
};

注意图片缩放和拖动要在build 文件夹中webpack.base.conf.js文件里面添加

javascript 复制代码

module.exports = {
 plugins: [
    new webpack.ProvidePlugin({
      // 在这儿添加下面两行
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ]
};

或者没有webpack就在vue.config.js中加入configureWebpack中配置

javascript 复制代码

var webpack = require('webpack');
module.exports = {
  // 要引入webpack
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',//注意路径，可能与你们路径不一致
        'Quill': 'quill/dist/quill.js' //注意路径，可能与你们路径不一致
      }),
    ]
  }
}