富文本插件tinymce使用Ctrl+V粘贴图片上传到远程服务器

tinymce使用

安装@tinymce/tinymce-vue、tinymce

引入插件

//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
// 编辑器插件
import "tinymce/plugins/image"; //插入编辑图片
//其余插件省略....，可根据实际自行引用
// 自定义上传图片到远程服务器的方法
import { UploadFile } from '@/util/uploadFiles';

初始化插件配置

data() {
    const DEPLOYURL = location.origin;
    return {
      init: {
        // 微服务下需要处理资源文件路径
        language_url: `${DEPLOYURL}/tinymce/langs/zh_CN.js`, //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: `${DEPLOYURL}/tinymce/skins/ui/oxide`, //皮肤：浅色

        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

        fontsize_formats:
          "8px 10px 12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式

        height: 400, //注：引入autoresize插件时，此属性失效
        placeholder: "请输入文章正文",
        branding: false, //tiny技术支持信息是否显示
        resize: "true", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
        elementpath: true, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        paste_data_images: true, //图片是否可粘贴
        init_instance_callback: function (editor) {
          editor.on('paste', (evt) => {
            // 监听粘贴事件
            // 实现图片粘贴上传
            const items = (evt.clipboardData || window.clipboardData).items
            if (items[0].type.indexOf('image') !== -1) {
              const file = items[0].getAsFile()
              // 自定义上传图片的方法
              const uploadInstance = new UploadFile();
              uploadInstance.startUpload(file).then((res) => {
              	// 使用指令，在当前鼠标标光的位置插入元素
              	// img元素的src就是远程图片的链接地址
                tinymce.execCommand(
                  "mceReplaceContent",
                  true,
                  `<img style="max-width:500px;" src="https://${res.Location}" >`
                );
              }).catch((err) => {
                console.log(err)
              });
              // 阻止默认事件，防止粘贴的图片进入富文本编辑器中
              evt.preventDefault();
            } else {
              console.log('粘贴的不是图片，不能上传')
            }
          })
        },
        images_upload_handler: (blobInfo, success, failure) => {
        	// 校验上传图片的大小
          // if (blobInfo.blob().size / 1024 / 1024 > 2) {
          //   failure("上传失败，图片大小请控制在 20M 以内");
          //   return;
          // }
          const uploadInstance = new UploadFile();
          uploadInstance.startUpload(blobInfo.blob()).then((res) => {
            success(`https://${res.Location}`);
          }).catch((err) => {
            console.log(err)
          });
        },
      },
    };
  },