从word中复制图片到umeditor编辑器中

songsu songsu     2022-12-03     134

关键词:

由于工作需要必须将word文档内容粘贴到编辑器中使用

但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题

考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题

发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了

找了很久,试用了很多编辑器,发现只有ckeditor的功能还算符合我的需求(支持自定义HTML属性)

然后我写了一个监听粘贴事件的操作,用来获取粘贴之后的file:///xxxx.jpg这种路径

<script>

    var service =

http        : require(‘http‘),

url         : require(‘url‘),

querystring : require(‘querystring‘),

fs          : require(‘fs‘),

config      :

    timeout : 60000,

    charset : ‘utf8‘,

    port    : 10101,

    host    : ‘127.0.0.1‘

,

router :

    index : function(res, query)

        res.end(‘Server is running!‘);

    ,

    check : function(res, query)

        var result = status: 1, info: ‘success‘;

        result = JSON.stringify(result);

        if(typeof query.callback == ‘string‘)

            result = query.callback + ‘(‘ + result + ‘)‘;

        

        res.end(result);

    ,

    word : function(res, query)

        var _this = service;

        var result = status: 0, info: ‘error‘;

        if(typeof query.file == ‘string‘)

            var img = query.file.match(/file://+(localhost)?(S+.(png|jpg|jpeg|gif|bmp))/i);

            console.log(img);

            if(img)

                var base64 = _this.base64_encode(img[2]);

                result.status = 1;

                result.info = ‘data:image/‘ + img[3] + ‘;base64,‘ + base64;

            

        

        result = JSON.stringify(result);

        if(typeof query.callback == ‘string‘)

            result = query.callback + ‘(‘ + result + ‘)‘;

        

        res.end(result);

    

,

start : function()

    var _this  = this;

    var Server = _this.http.createServer(function (req, res)

        var URL = _this.url.parse(req.url);

        var receive = [];

        var router = null;

        switch(URL.pathname)

            case ‘/word‘:

                router = _this.router.word;

                break;

            case ‘/check‘:

                router = _this.router.check;

                break;

            default:

                router = _this.router.index;

        

        req.setEncoding(_this.config.charset);

        req.addListener(‘data‘, function(data)

            receive.push(data);

        );

        res.writeHead(200, ‘Content-Type‘: ‘text/plain‘);

        res.on("close",function()

            console.log("res closed");

        );

        req.on("close",function()

            console.log("req closed");

        );

        req.addListener(‘end‘, function()

            router(res, _this.querystring.parse(URL.query));

        );

    );

    Server.listen(_this.config.port, _this.config.host, 1024);

    Server.setTimeout(_this.config.timeout, function(cli)

        cli.end(‘timeout ‘);

    );

    console.log(‘Server running at http://‘ + _this.config.host + ‘:‘ + _this.config.port);

,

//base64

base64_encode : function(file)

    var bitmap = this.fs.readFileSync(file);

    return new Buffer(bitmap).toString(‘base64‘);

;

service.start();

</script>

将以上代码保存为一个word.js文件

然后执行 node word.js就会自动创建一个http服务了

这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了

处理word图片批量上传的代码

技术图片

其它的业务逻辑参数代码

技术图片

当然也可以将以上代码打包成一个本地执行文件去给不懂电脑的人使用就行了(具体方法我这里就不说了)

前台引用的代码

技术图片

下面是实现后的效果,能够自动上传Word中的所有图片,并且有进度条显示

技术图片

所有图片都能够保存在服务器中,而且支持分布式图片存储

技术图片

编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问

技术图片

详细内容可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/07/30/ckeditor%e7%b2%98%e8%b4%b4word/

 

讨论群:223813913

从word中复制内容包含图片到百度编辑器中

​由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作... 查看详情

从word中复制图片到xheditor编辑器中

...息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本编辑器里面方法一:工具/原料百度doc任意富文本编辑器,以UEDdito... 查看详情

如何从word文档复制图片到富文本编辑器

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins[‘autoupload‘],然后找到autoUploadHandler方法,... 查看详情

从word中复制图片到kindeditor编辑器中

这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@&n 查看详情

从word中复制内容包含图片到kindeditor编辑器中

如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http: 查看详情

如何从word中复制内容到网站后台编辑器中

...or为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转存方案。<b>复制word图文混排内容到UEditor,图片... 查看详情

富文本编辑器能够直接从word中复制粘贴公式

tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/以v... 查看详情

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

本地图文直接复制到百度编辑器中

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins[‘autoupload‘],然后找到autoUploadHandler方法,... 查看详情

关于umeditor粘贴图片自动上传

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

如果你从word里复制内容到编辑器

如果你习惯在word中写文章,再复制到编辑器后发布的话会由于word中的内容带有冗余代码,而导致部分样式错乱,那么!!!下面这个技巧,可以让你的文章不乱:注意:此方法适用于文章没有其他排版的场景,如果你的文章本... 查看详情

word里头的图片如何直接复制到tinymce编辑器

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

如何将word图片复制到富文本编辑器里面

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

复制word图文到富文本编辑器

参考技术A大部分富文本编辑器能做到还原word的文本格式,例如字体字号表格以及布局相关的要素还原。但普遍对图片的支持比较差,都需要手动点击图片上传按钮,然后在光标的当前位置,插入指定的图片。这样用户的体验就... 查看详情

kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

在网页编辑器中粘贴时如何保留word中的表格?

参考技术A解决:在SiteFactory中提供了FCKeditor编辑器,利用编辑器中“从MSWord粘贴”功能按钮,即可既去除Word多余的代码,同时保留Word中的一些样式,如表格等。操作方法:1、进入SiteFactory系统后台,在添加信息的管理界面中,... 查看详情

在网页编辑器中粘贴时如何保留word中的表格?

参考技术A解决:在SiteFactory中提供了FCKeditor编辑器,利用编辑器中“从MSWord粘贴”功能按钮,即可既去除Word多余的代码,同时保留Word中的一些样式,如表格等。操作方法:1、进入SiteFactory系统后台,在添加信息的管理界面中,可... 查看详情

怎么将复杂的数学公式复制到word中?

...学公式复制到WORD中。1、双击PPT里的数学公式,打开公式编辑器;2、选中数学公式,点编辑菜单——复制;3、转到WORD文档中,将光标定位在要粘贴的位置,鼠标右键选择粘贴。参考技术A自定义-----插入----公式编辑器 参考技术B... 查看详情