CKeditor粘贴图片在IE下自动上传的研究

最新推荐文章于 2023-03-13 11:09:12 发布

杰锋

最新推荐文章于 2023-03-13 11:09:12 发布

阅读量4k

点赞数

分类专栏：插件应用网页技巧案例文章标签： ie 文本编辑 string fckeditor javascript 正则表达式

案例同时被 3 个专栏收录

120 篇文章 0 订阅

订阅专栏

插件应用

72 篇文章 0 订阅

订阅专栏

网页技巧

53 篇文章 0 订阅

订阅专栏

FCKeditor升级到3.0版本，并改名为CKeditor(Content And Knowledge)，是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。相信各位都有用过。

在开发教育系统时候，很多需求需要用到富文本编辑器，我们首选也是CKeditor（国产的KindEditor也是一个不错的选择）。在探索教育系统时，教师是最需要考虑的用户之一，而教师往往会有大量word文档，往往会直接复制word内容粘贴到富文本编辑器提交内容。用过CKeditor会知道，如果word带有图片，粘贴到富文本编辑器里面是看不到图片的。

本文就是研究CKeditor粘贴图片在IE下自动上传的功能实现。

一、粘贴图片内容为什么不到图片？

打开CKeditor的官网演示页面（http://ckeditor.com/demo）。打开一个word文档，复制文档中有图片和文字部分。看下图：

粘贴到CKeditor编辑器里面，却是显示不出图片，看下图：

查看CKeditor里面的源码可以看到，图片的<img>里面的资源链接都是本地机器上的图片，没有权限读取本地的图片，提交后，此图片链接也是向本地的，不是互联网上的图片，这就是永远也看不到图片了：

二、解决方案

1.借助IE的ActiveX插件把本地图片转换长BASE64码

2.编写CKeditor插件，取用ajax技术自动提交BASE64码到后台，后台获取BASE64码后转换成图片存储在服务器上，并返回数据到插件并把网络图片的URL替换原来的指向本地图片的地址。

三、实现的技术细节

ActiveX作用

ActiveX的作用，就是提供一个方法，将图片转换成Base64编码，前端JavaScript会调用此方法；ActiveX中核心方法是：

public string ImageToBase64(string ImagePath);

编写CKeditor插件

此插件会检测到粘贴动作，并判断粘贴的内容是否存放本地图片，如果存在就进行处理。JavaScript调用ActiveX插件的转换方法，把本地图片转换成BASE64码，并通过ajax提交到后台；后台返回真实的网络图片地址，插件会替换掉编辑器里面原本地图片的连接。看代码片断：

/*
 * CKEDITOR plugin pasteuploadpic 1.0 released
 * SITE: http://jacken.com.cn
 * AUTHOR: Jacken(陈文光)
 * MAIL: chenjacken@gmail.com
 */
// 处理粘贴内容
var pasteService = function(evt) {
    // 所见即所得模式,其他模式就退出
    if (this.mode != 'wysiwyg')
        return;
    var data = evt.data['html'];
    // 处理html内容
    if (!data)
        return;
    // 检测本地文件地址的正则表达式
    var localImgReg = //ig;
 
    var imgArray = data.match(localImgReg);
    // 是否有本地图片URL
    if (imgArray) {
        // 上传并处理编辑器内容
        replaceEditor(uoloadPic(imgArray));
 
    }
 
  };
    if (pasteuploadpic_url) {
        // 监听事件
        editor.on('paste', pasteService, null, null,1000);
    }
/**
 * 配置处理图片上传的后台地址,如果不配置,此插件不会启用.
 *
 * @name CKEDITOR.config.pasteuploadpic_url
 * @type String
 * @default null
 * @since 1.0
 * @example config.pasteuploadpic_url='/ckeditorAction_upload.action';
 */
/**
 * 配置ActiveXObject名称
 *
 * @name CKEDITOR.config.pasteuploadpic_axo
 * @type String
 * @default 'Jacken.Word'
 * @since 1.0
 * @example config.pasteuploadpic_axo='/Jacken.Word';
 */

后台如何处理BASE64

需要编写后台程序来获取BASE64码并转换成图片，保存到服务器，获得图片的网络绝对地址，并替换原编辑器内容的图片src。

Java用sun.misc.BASE64Decoder().decodeBuffer(String str)来奖Base64图片编码转换成字节。

PHP用base64_ decoder()。

四、已完成的功能和不足之处

在IE下借助ActiveX的功能，本人已经完成了粘贴图片到CKeditor,图片会自动上传功能。

完成ActiveX的程序；

完成CKeditor插件的编写（插件式，不影响升级CKeditor）；

完成JAVA的J2EE后台处理BASE64码的转换，因为老师会多次复制和粘贴同一样内容，所以图片文件的存储会一定的压力，已经完成对文件进行MD5唯一性验证，同一样图片服务器上只存在一个实体图片文件。

此实现思路可以在其他的富文本编辑器下实现，只是编写不同的编辑器插件。

不足之处

必须要在IE下起作用，且必须安装ActiveX插件并允许执行。