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

songsu songsu     2022-12-02     764

关键词:

由于工作需要必须将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内容和截图的复制黏贴

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

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

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

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

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

让编辑器支持word的复制黏贴,支持截屏的黏贴

...上传等等;知乎参考地址:​​打开​​    让编辑器支持word的复制黏贴,其中图片会转化为base64编码,如果是通过远程打开这个静态页,黏贴word文档的时候,图片不会黏贴进来,因为远程地址无法访 查看详情

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

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

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

...语法并不一致,需要做大量的转码工作。经过调研,发现TinyMCE有一款付费插件PowerPaste,能够完美的支持该功能。其原理是先将剪切板里的图片转换为Base64编码格式的图片,然后再插入到指定位置。如果word里只有上面这一行简单... 查看详情

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

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

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

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

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

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

tinymce一款非常不错的富文本编辑器

参考技术ATinyMCE的优势:[1]如果直接用form表单提交,后台是可以正常获取到textarea内容的;如果用ajax提交,直接使用jquery$(\'#mytextarea\').val()是获取不到内容的,需要按如下方法获取内容:如果需要上传图片,需要在tinymce初始化... 查看详情

tinymce粘贴word文档,粘贴上去后word文档的样式全被取消了。请求帮助一下。嘉缘人才系统的程序

粘贴到tinyMCE在线编辑器上后要保持word文档的样式字体的颜色和大小那些。tinymce没有word的字处理那么多的功能,可以说是不支持格式,就像你把word中加粗的字粘贴到txt中一样,不会再有加粗效果了。如果非要支持的话,只能找... 查看详情

kindeditor完全复制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... 查看详情

tinymce编辑器复制粘贴图片上传

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... 查看详情

将粘贴内容复制到 TinyMCE 输入会导致 HTML 臃肿

】将粘贴内容复制到TinyMCE输入会导致HTML臃肿【英文标题】:Copy&PastecontentintoTinyMCEinputresultsinbloatedHTML【发布时间】:2011-07-2314:14:30【问题描述】:我将TinyMCE用于各种项目。我遇到的问题是ATM是很多用户复制并粘贴来自Word或Op... 查看详情

使用在线编辑器tinymce,将word中的图片粘贴进来时,图片却无法显示!

把word中的内容复制后,粘贴到tinyce编辑器中时,word中的图片却无法显示出来。一些特殊符号也会变成乱码,如:格式-项目符号和编号-项目符号。另外在将粘贴后的源码进行处理后(我的方法是将里面的imagedata替换成img,这一... 查看详情

[vim]编辑器---多行注释和取消注释及多行复制和黏贴

1.vim编辑器之模式简介  vim一般有4中模式:  正常模式(Normal-mode) 插入模式(Insert-mode)命令模式(Command-mode)可视模式(Visual-mode)  1.1正常模式   正常模式一般用于浏览文件,也包括一些复制、粘贴、删除等操作。这时... 查看详情

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

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

我的手机找不到黏贴板。

方法一,打开手机短信,进入编辑页面,在短信的编辑区域内(“输入信息”的方框内)空白处长按手机屏幕就会出现“粘贴”和“剪贴板”的菜单。(此时剪贴板不能为空白,否则不会出现)。方法二:打开手机的浏览器。在... 查看详情