首页 > 其他分享 >ckeditor粘贴word文档图片的组件

ckeditor粘贴word文档图片的组件

时间:2023-03-21 12:13:31浏览次数:44  
标签:function word ckeditor res result var query 粘贴

由于工作需要必须将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\n');

    });

    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中的所有图片,并且有进度条显示

 

 

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

 

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

详细思路及源码

示例下载:

wordpaster-php-ckeditor4xwordpaster-jsp-ckeditor4xwordpaster-asp.net-ckeditor4xwordpaster-asp-ckeditor4xwordpaster-vue-ckeditor5

标签:function,word,ckeditor,res,result,var,query,粘贴
From: https://www.cnblogs.com/songsu/p/17239521.html

相关文章

  • ckeditor粘贴word文档图片的插件
    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富......
  • Word去除页眉横线
    1、双击页眉部分,进入页眉页脚编辑状态。然后选中页眉文字部分。2、单击“开始”选项卡,找到“样式”命令,单击“样式”处的下拉箭头,在弹出的选项中单击“清除格式”。3、......
  • wordpress外贸站,采用astra ,woocommerce,weglot等
              翻译搜索复制......
  • 使用自定义关键字实现上传文件功能(keyword)
    1.创建cn.groovy(右键New-package;右键new-keyword)-创建完成packagetestclassimportstaticcom.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpointimportsta......
  • java 根据word xml模板生成word(个人v2版本)
    这里用的是poi相关jar包以及freemarker插值技术实现,poi相关jar包这里不再述说1,编辑word并保存为xml其中需要动态输出的内容使用${xxx}代替,xxx是你的java类属性值,如:年龄:${age......
  • 批量多次复制依次粘贴工具【编程语言:易语言】
    工具用途该工具用于复制多个文本后再批量多次粘贴,例如依次ctrl+c复制a,b,c文本后,再使用ctrl+v粘贴即可依次粘贴出c,b,a。如图所示现在也支持正序和导入功能了,更多功能看下......
  • word插入分节符
    选择要开始新分区的地方。转到"页面布局">分页符"。要添加的分节符:“下一页”分节符会在下一页上开始新节 “连续”分节符会在同一页上开始新节。提示:可以使用连续......
  • Reset [email protected] and root password VCSA
    Resetadministrator@vsphere.localandrootpasswordVCSA7OCTOBER2019KABIRIfyoufindyourselfinasituationwherenobodyknowswhattheadministratorpa......
  • 微信小程序的复制粘贴
    小程序的复制OnCopy(){wx.setClipboardData({data:传入要复制的文本,})},将要复制的内容传入data中,系统会有相关提示的,然后还有success,fail,和c......
  • word设置多级列表样式
     原文地址:https://baijiahao.baidu.com/s?id=1718326258766765419&wfr=spider&for=pc 首先我们点击多级列表  可能这会儿你有点懵,不是说好了多级编号吗,为......