CKEditor与CKFinder学习--自定义界面及按钮事件捕获

矫情吗；* 2022-07-29 10:49 143阅读 0赞

上一篇博客写了如何搭建CKEditor与CKFinder环境，并将其与SpringMVC进行整合，现在学习如何进行界面的定义，以及界面元素的操作。

# 效果图 #

## 界面操作图 ##

原始界面  
![这里写图片描述][20160321134014089]

调整后的界面（删除了flush，表单元素等）  
![这里写图片描述][20160321134441378]  
该界面的皮肤是bootstrap的皮肤

## 事件操作图 ##

获取界面上保存按钮点击事件效果

![这里写图片描述][20160321154100674]

用js操作ckeditor控制的textarea

![这里写图片描述][20160321153900220]

# 自定义界面 #

ckeditor默认使用moono皮肤  
如果想更改ckeditor的皮肤，去ckeditor的网站下载相应的皮肤。

## 皮肤更换 ##

去ckeditor的关网选一个你喜欢的皮肤，然后下载下来。  
[http://ckeditor.com/addons/skins/all][http_ckeditor.com_addons_skins_all]  
以bootstrap为例，点击Download进行下载  
![这里写图片描述][20160321143010342]  
![这里写图片描述][20160321143045874]  
根据提示信息，将下载的文件进行解压，并放在项目中ckeditor目录的skins目录下  
![这里写图片描述][20160321143324117]  
然后配置config.js，使其引用bootstrap的皮肤

config.js

/** * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */
    
    CKEDITOR.editorConfig = function( config ) { 
        // Define changes to default configuration here. For example:
        // config.language = 'fr';
        // config.uiColor = '#AADC6E';
        config.skin = 'bootstrapck';
    };

如果想使用其他的皮肤，跟上面的操作一样，只需把

config.skin = 'bootstrapck';

换成下载的那个即可

## 界面选择 ##

ckeditor的samples目录下提供了一个示例，点击TOOLBAR CONFIGURATOR就可以自定义界面了

![这里写图片描述][20160321154446363]

进入界面选择和排序页面

![这里写图片描述][20160321155221241]

定制好自己的界面后，点击右侧的Get toolbar config  
![这里写图片描述][20160321155401515]  
得到自定义界面的js  
![这里写图片描述][20160321155424297]  
将其拷贝到config.js中，注意保存自己之前的配置（皮肤，高度等）  
![这里写图片描述][20160321155653675]

## 隐藏按钮 ##

ckeditor与ckfinder整合之后再进行图文混排的时候选择图片时可以浏览服务器上的图片资源  
![这里写图片描述][20160321161355093]  
用户可以删除，重命名，这也会影响到其他页面对该图片的引用，不安全。  
可以将浏览服务器按钮隐藏了。  
在选择图片的时候有两处有浏览服务器的按钮  
![这里写图片描述][20160321163759681]  
![这里写图片描述][20160321163812011]  
所以需要修改两处  
打开ckeditor/plugins/image/dialogs/下的image.js  
![这里写图片描述][20160321163856027]  
查找browseServer，找到第一次出现的位置

label:d.lang.common.browseServer,hidden:!0,

修改其为

label:d.lang.common.browseServer,style:"display:none",hidden:!0,

![这里写图片描述][20160321164605411]  
第一个浏览服务器按钮就被隐藏了

再搜索image.js，搜索filebrowser

url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right",hidden:!0,

将其改为

url:d.config.filebrowserImageBrowseLinkUrl},style:"float:right;display:none",hidden:!0,

![这里写图片描述][20160321165030964]

这样两个浏览服务器的按钮就被隐藏了，用户只能每次上传图片来进行图文混排。

参考文献

> [http://blog.163.com/zjc\_8886/blog/static/2408175201011222590967/][http_blog.163.com_zjc_8886_blog_static_2408175201011222590967]

# 界面元素操作 #

ckeditor为界面提供了许多按钮，有源代码，保存，新建，打印等等。  
有时候我们需要自己操作这些按钮的事件。ckeditor也为我们提供了相应的api  
api网址  
[http://docs.cksource.com/ckeditor\_api/index.html][http_docs.cksource.com_ckeditor_api_index.html]

## 获取元素 ##

以保存按钮为例

/** * index.jsp的js */
    
    // When the CKEDITOR instance is created, fully initialized and ready for interaction. 
    // 当id为content的那个ckeditor被创建，并初始化完成之后
    CKEDITOR.instances["content"].on("instanceReady", function() { 
            // 保存按钮
            this.addCommand("save", {
                modes : {
                    wysiwyg : 1,
                    source : 1
                },
                exec : function(editor) { 
                    save();
                }
            });
        });
    });
    
    // 保存方法
    function save() { 
        // 获取到editor中的内容
        var content = editor.document.getBody().getHtml();
        alert(content);
    }

![这里写图片描述][20160321173527548]

打印按钮的事件

this.addCommand("print", {
            modes : {
                wysiwyg : 1,
                source : 1
            },
            exec : function(editor) { 
                alert("print button");
            }
        });

## 操作事件 ##

除了可以获取按钮的事件外，还能获取整个editor的点击，失去焦点等事件。

### 案例 ###

用户进入编辑页面，ckeditor显示提示信息，当用户点击进行输入的时候提示信息消失，如果用户什么也没有输入，失去焦点时提示信息重新出现，如果用户输入了，不出现提示信息。

### 效果 ###

![这里写图片描述][20160321175230055]

### 代码 ###

// 失去焦点
    this.on('blur', addTips);
    // 获得焦点
    this.on('focus', deleteTips);
    /*
    * 点击时清除提示信息
    */
    function deleteTips() {
        console.log("focus");
        var tips = editor.document.getBody().getText().trim();
        //console.log("tips: " + tips);
        var mytip = "如果想让图片居中，请先选择居中，然后再插入图片!".trim();
        //console.log("mytip: " + mytip);
        //console.log(tips == mytip);
        if (tips == mytip) {
            CKEDITOR.instances['content'].setData('');
        }
    }
    
    /*
    * 如果没有输入，失去焦点时给出提示信息
    */
    function addTips() {
        console.log("blur");
        var tips = editor.document.getBody().getText().trim();
        //console.log("tips: " + tips);
        var mytip = "如果想让图片居中，请先选择居中，然后再插入图片!".trim();
        //console.log("mytip: " + mytip);
        //console.log(tips == mytip);
        if (tips.length==0) {
        CKEDITOR.instances['content'].setData(mytip);
        }
    }

参考文献

[http://blog.csdn.net/woshirongshaolin/article/details/8240542][http_blog.csdn.net_woshirongshaolin_article_details_8240542]

# 参考文献 #

> [一篇博客][http_blog.csdn.net_woshirongshaolin_article_details_8240542]
> 
> [一篇博客][Link 1]
> 
> [一篇博客][http_blog.163.com_zjc_8886_blog_static_2408175201011222590967]
> 
> [CKEditor\_API][http_docs.cksource.com_ckeditor_api_index.html]

[20160321134014089]: /images/20220728/b1a953230abf4243b423e26ff0ab654a.png
[20160321134441378]: /images/20220728/891a90b478b54fdfb83abef98818b010.png
[20160321154100674]: /images/20220728/3e9acfc276504705b40b5bb1a360e459.png
[20160321153900220]: /images/20220728/13f0fef55cad488fbb35942aa752e98c.png
[http_ckeditor.com_addons_skins_all]: http://ckeditor.com/addons/skins/all
[20160321143010342]: /images/20220728/5577afb553e24b5c82fe6154f72c2913.png
[20160321143045874]: /images/20220728/71f3b40bb4e049e692c507296515b05d.png
[20160321143324117]: /images/20220728/00671df14a1e4fc28d13957aada17c16.png
[20160321154446363]: /images/20220728/a1cce8bf8b364413af6d5ba31b4f93a0.png
[20160321155221241]: /images/20220728/2f66209d9a2348238cc19feb760fcb01.png
[20160321155401515]: /images/20220728/efa40ab0bce9482682d0142057b8d32e.png
[20160321155424297]: /images/20220728/9a592b9040c7401b99f06f7331ae68cd.png
[20160321155653675]: /images/20220728/e7189334027846e8a2983c5b0a2a5cef.png
[20160321161355093]: /images/20220728/0458c7d6df804aecb07e9603440b2256.png
[20160321163759681]: /images/20220728/380f542cfef946429f8d50ae62f34ac8.png
[20160321163812011]: /images/20220728/8f6e369edac64eb7a21a743c28cea839.png
[20160321163856027]: /images/20220728/eb3ef4d221b04ecbb2b18ec0311661e4.png
[20160321164605411]: /images/20220728/c97ec4c92a964cc98b6e2fefeeff58e4.png
[20160321165030964]: /images/20220728/616b95b1316849d497bbeba3a3290e26.png
[http_blog.163.com_zjc_8886_blog_static_2408175201011222590967]: http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/
[http_docs.cksource.com_ckeditor_api_index.html]: http://docs.cksource.com/ckeditor_api/index.html
[20160321173527548]: /images/20220728/799d964108014d019968f6bce90cf94d.png
[20160321175230055]: /images/20220728/ac672d5fc4b44d17b042ae5503c06254.png
[http_blog.csdn.net_woshirongshaolin_article_details_8240542]: http://blog.csdn.net/woshirongshaolin/article/details/8240542
[Link 1]: http://blog.csdn.net/yangshaokai/article/details/8701886