tinymce富文本支持word内容同时粘贴文字图片上传 vue2

效果图

先放文件


文件自取tinymce: tinymce富文本简单配置及word内容粘贴图片上传
封装tinymce

文件自取:tinymce: tinymce富文本简单配置及word内容粘贴图片上传
页面引用组件

javascript 复制代码
          <TinymceSimplify ref='TinymceSimplify'   v-model="knowledgeBlockItem.content" :disabled="disable" :height="530" class="filter-item" />


  import TinymceSimplify from '@/components/TinymceSimplify'

    components: {

      TinymceSimplify,
    },



  searchData(res) {
         this.knowledgeBlockItem.content=res.data
 this.$refs.TinymceSimplify.changeVaulue(res.data)
        },

简单解释一下封装文件的内容

总体思路就是,找到粘贴的内容将img的src转换成Blob URI,这样页面可以正常展示图片了
src/components/TinymceSimplify/index

复制代码
data() {
    return {
      //初始化配置
      myValue: this.value,
      init: {
       
        init_instance_callback: editor => {
          editor.on("paste", evt => {
            // 监听粘贴事件
            this.onPaste(evt);
          });
        },
 
    };
  },

提取图片信息,转换成Blob URI,再在监听事件中获取页面元素,将img src转换

javascript 复制代码
  editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$nextTick(() => {
              console.log("输入?zhelieditor.getContent()");
              console.log("this.pasteChange", this.pasteChange);

              if (this.pasteChange) {
                // HTML字符串
                let htmlString = editor.getContent();
                // Blob URL数组
                let urls = this.blobUrlArr;

                // 使用DOMParser解析HTML字符串
                let parser = new DOMParser();
                let doc = parser.parseFromString(htmlString, "text/html");

                // 获取所有的<img>标签
                let imgs = doc.querySelectorAll("img");

                // 遍历imgs和urls数组,设置每个img的src属性
                imgs.forEach((img, index) => {
                  if (index < urls.length) {
                    // 确保不会越界
                    img.src = urls[index];
                  }
                });

                // 现在doc包含了修改后的DOM,但如果你需要将其转换回字符串,可以这样做:
                let modifiedHtmlString = doc.body.innerHTML;

                console.log("htmlContent8999", modifiedHtmlString);
                this.pasteChange = false;

                this.$nextTick(() => {
                  editor.setContent(modifiedHtmlString);
                });
              }

              this.$emit("input", editor.getContent());
            });
          });
          editor.on("paste", (evt) => {
            // 监听粘贴事件
            this.onPaste(evt, editor);
          });

        },
相关推荐
留不住丨晚霞22 分钟前
说说SpringBoot常用的注解?
java·开发语言
hardStudy_h31 分钟前
C++——内联函数与Lambda表达式
开发语言·jvm·c++
艾莉丝努力练剑1 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
witton2 小时前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合
枯萎穿心攻击3 小时前
ECS由浅入深第三节:进阶?System 的行为与复杂交互模式
开发语言·unity·c#·游戏引擎
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(一) helloworld
开发语言·前端·golang
nananaij3 小时前
【Python基础入门 re模块实现正则表达式操作】
开发语言·python·正则表达式
Micro麦可乐3 小时前
Java常用加密算法详解与实战代码 - 附可直接运行的测试示例
java·开发语言·加密算法·aes加解密·rsa加解密·hash算法
天下一般3 小时前
go入门 - day1 - 环境搭建
开发语言·后端·golang
雷羿 LexChien4 小时前
C++内存泄漏排查
开发语言·c++