CKEditor4.12使用详解

最新推荐文章于 2026-05-07 18:53:31 发布

原创最新推荐文章于 2026-05-07 18:53:31 发布 · 置顶 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

java后端同时被 2 个专栏收录

3 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

公司有个文本编辑器用的是summernote。一开始没有上传图片及附件功能，以为是编辑器的问题，所以找到了CKEditor进行替换，后面才知道这是前人留下的坑（前人没有整合bootstrap+summernote,所以上传功能没有实现）

讲几个重要的点：

1、因为编辑器是嵌入在一个弹框中，所以需频繁初始化和销毁CKEditor(bootstrap弹框关闭开启、新增修改不同弹框情况)

// bootstrap 弹框关闭事件，销毁CKEditor实例
$('#formCategoryView').on('hide.bs.modal', function () {
    CKEDITOR.instances.content.destroy();
});

formCategoryView 是弹框ID

var ckeditor = CKEDITOR.replace('content',{ toolbar: 'Basic' });

新增和修改文章都是弹框而出，所以都需初始化。content是文本域的ID。

2、因编辑文章的弹框有选择时间的子弹框，使用起来会冒泡到父弹框，从而造成编辑器的混乱。

// 防止子元素展示关闭事件冒泡到父元素
$('.form-control').on('show', function(event) {
    event.stopPropagation();
});
$('.form-control').on('hide', function(event) {
    event.stopPropagation();
});

完美解决，form-control是时间控件的className。

3、图片上传的实现。需要在CKEditor的config.js添加以下代码

config.image_previewText=' ';

config.filebrowserImageUploadUrl = 'requestMappingPath';

requestMappingPath就是你后台上传文件的接口。如果在path后加个?。那么编辑器可支持复制图片上传功能。

后台接口需返回定制格式

resultMap.put("uploaded", 1);
resultMap.put("fileName", fileName);
resultMap.put("url",imageContextPath);

url就是你把图片上传到服务器后的网络地址。

4、其实以上功能基本可以满足产品了，但产品人员提了一个可一键复制word文档的精彩绝伦(shangxinbingkuang)的需求。

踩过很多坑，想了几个方案：

4.1--监听复制事件，将文本传入后台，后台对img标签进行处理，后返回

4.2--制作CKEditor插件，增加导入word文档功能，传后台处理。

4.3--关闭图像上传功能，这样word复制到编辑器的图片会自动处理成base64数据

4.2需要学习制作CKEditor插件,官方全是英文文档。。。而且之前下过一个插件，没有配成功，所以放弃了。

4.3base64数据太长，直接存入数据库性能不好，而且用户端打开文章时间较长

排除了两个那就选第一个。可是中间又碰到一个大问题，引文word文档中的图片大部分是以file:///格式打头的，chrome因安全机制，不能直接加载本地文件(IE浏览器这回争了一口气)。这就形成了一个冲突，要么关闭图片上传功能，以base64数据传入后台，要么放弃新需求。产品人员暂时选择可以一键复制word。关键代码如下

// ckeditor监听复制后事件，获取文本内容，提交至后台，根据后台返回的处理过的内容，重新插入编辑器
ckeditor.on('instanceReady', function(e) {
    this.on('afterPaste', function(event) {
        var content = ckeditor.getData();
        var param ={
            content: content,
        };

        $.ajax({
            url: '',
            type: "POST",
            dataType: "json",
            cache: false,
            headers: {
                "Content-type": "application/json; charset=utf-8",
            },
            data: JSON.stringify(param),
            success: function (result) {
                if (result.state == "success") {
                    var newContent = result.data;
                    var flag = ckeditor.setData(newContent);
                }
            }
        });
    });
});

下面是后台代码

/**
 * Ckeditor编辑器直接复制word功能
 *
 * @param params
 * @return
 */
@PostMapping(path = "")
public Message convertContentForCkeditor(@RequestBody JSONObject params){
    String content = params.getString("content");
    String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";
    Pattern p_image;
    Matcher m_image;
    List<String> pics = new ArrayList<String>();
    p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE);
    m_image = p_image.matcher(content);
    String img = "";
    while (m_image.find()) {
        img = img + "," + m_image.group();
        // Matcher m =
        // Pattern.compile("src=\"?(.*?)(\"|>|\\s+)").matcher(img); //匹配src
        Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);

        while (m.find()) {
            String reuslt = m.group(1);
            if (pics.contains(reuslt)){
                continue;
            }else{
                pics.add(reuslt);
            }
        }
    }

    if (pics.size() > 0){
        for (String oldUrl : pics)
        {
            if (StringUtils.isEmpty(oldUrl))
                continue;

            String baseCode = "";
            MultipartFile multipartFile = null;
            if (oldUrl.startsWith("data:image"))
            {
                baseCode = oldUrl;
                multipartFile = this.base64ToMultipart(baseCode);
            }
            else if (oldUrl.startsWith("file:///"))
            {
                oldUrl = oldUrl.replace("file:///", "");
                //java.io.File file = new java.io.File(oldUrl);
                try {
                    baseCode = this.getImageStr(oldUrl);
                    baseCode = "data:img/jpg;base64," + baseCode;
                    multipartFile = this.base64ToMultipart(baseCode);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            else{
                try {
                    URL imgUrl = new URL(oldUrl);
                    HttpURLConnection httpUrl = (HttpURLConnection) imgUrl.openConnection();
                    httpUrl.connect();
                    BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream());
                    multipartFile = new MockMultipartFile("httpimg","","", bis);
                }catch(Exception e){
                    e.printStackTrace();
                }
            }
            // 上传至服务器，获取url
            content = content.replace(oldUrl, newUrl);
        }
    }

    return Message.result(content);
}

暂时就这样了，后面如还有优化，我会继续更新。