首页 > 其他分享 >如何实现导入Word文档到wangEditor编辑器中?

如何实现导入Word文档到wangEditor编辑器中?

时间:2022-10-17 12:14:53浏览次数:87  
标签:Word wangEditor text base64 编辑器 blob items var 图片

 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示:

编辑


详细内容可参考这篇文章:ueditor word图片上传

标签:Word,wangEditor,text,base64,编辑器,blob,items,var,图片
From: https://www.cnblogs.com/zyzzz/p/16798738.html

相关文章

  • 关于在word中插入mathtype公式遇到的问题
    1前言论文高效排版总结中,笔者总结了word自带的公式编辑器的用法,以提高办公效率。但有时候,因各种原因需要强制使用mathtype公式编辑器,但是因word文档中字体和段落格式等原......
  • 文本编辑器VIM
    文本编辑器vimvim命令格式:vim选项参数常用选项:+#打开文件后,让光标处于第#行的行首,+默认行尾+/PATTERN让光标处于第一个被PATTERN匹配到的行行首-bfile二进制方......
  • python实现markdown文档编辑器应用
    常用的文档编辑器富文本编辑器,ckeditormarkdown编辑器,mdeditor项目中想要应用markdown编辑器:添加和编辑的页面中textarea输入框->转换为markdown编辑器1.tex......
  • autoit_passwordbook
    autoitpasswordbook#include<GUIConstantsEx.au3>#include"GUIScrollbars_Ex.au3"Global$buttonList[100]=[0];CreateGUIwithredbackground$hGUI=GUI......
  • iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
    第一种方式通过iframe在线预览pdf,word,excel,ppt,txt,图片,视频<template><el-button@click="openHandler">预览</el-button><el-dialog@close="closeHa......
  • 调用mglearn时的报错 TypeError: __init__() got an unexpected keyword argument 'ca
    importmglearn的时候发生的报错原因是调用了joblib包中的memory类,但是cachedir这个参数已经弃用了查到下面帖子之后改掉cachedir解决问题https://blog.csdn.net/m0_4......
  • Vue--整合mavon-editor编辑器(markdown编辑和预览)
    简介说明    本文介绍Vue如何使用markdown编辑器。        mavon-editor是目前比较主流的markdown编辑器,本文介绍它的使用方法。官网网址​​https://githu......
  • word中删除“空白页”
    想删除空白页,先了解空白页是怎么造成的。对症下药才能药到病除。原因大量空行导致的空白页(简单)分隔符导致的空白页(简单)表格导致的空白页(较难)以上三种原因都是产生空白页的原......
  • word 如何在框框中 打勾
    效果展示单击鼠标,在两种符号中切换称为复选框控件简述设置步骤1. 将隐藏的"开发工具"选项卡,显示出来2. 在所需位置,插入复选框​3. 在属性中,设置复选框的两种状态详述......
  • word 中 的 “域”
    认识域☆ 域是一串代码,具有特殊含义。生活中会频繁的使用域,但是往往没有注意到,了解域,有助于应对一些特殊的场景。比如以下内容,都是域目录,页码,总页数,超链接,汉字拼音,带圈......