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

songsu songsu     2022-11-30     712

关键词:

由于工作需要必须将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文档复制图片到富文本编辑器

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

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

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

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

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

如何从word文档复制公式到fckeditor编辑器

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

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

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

ueditor编辑支持word内容和截图的复制黏贴

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

html编辑支持word内容和截图的复制黏贴

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

wangeditor直接粘贴图片实现

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

word图片粘贴上传控件,直接粘贴图片到编辑器-dede

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

百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,或者谁知道该如何操作

...l输出,再用UEditor提供的setContent()方法将html的内容添加到编辑器中。方案缺点,一是poi对word文本的格式获取必须按setContent()可接受的方式进行;二是我暂时没发现poi可以提供获取段落格式(对齐方式、缩进量)的方法。代码如... 查看详情

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

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

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

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

前端用jquery怎么获取到富文本ueditorweb编辑器里面的文字和图片内容?

...收集了一些常用的方法和基本设置,以供参考。1、创建编辑器UE.getEditor('editor',initialFrameWidth:"100%"//初始化选项)精简版UE.getEditor('editor')2、删除编辑器UE.getEditor('editor').destroy();3、设置焦点UE.getEditor('edi... 查看详情

如何将word文本和图片一起上传

可以将图片和文本打包上传啊,比如用winrar将图片和文本压缩成为一个文件,然后就可以一切上传了,不过建议压缩成zip格式.参考技术A1.插入--文本框--(选择横排或竖排)输入文字.2.移到背景图片上....用ps吧...加上个文... 查看详情

如何将word图片粘贴到cms里面

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

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

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

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

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

python代码保存到word?

如题,不想用复制粘贴我们可以借助某些编辑器将代码高亮的性质,然后将代码复制到其中,并将其截图保存到word里面,就比如说我们使用工具sublimetext,我们把代码复制到里面如下所示。然后再将该代码截图保存,就可以插入到w... 查看详情