CKEditor-自定義界面及按鈕事件捕獲

1.自定義界面

ckeditor默認使用moono皮膚

若是想更改ckeditor的皮膚，去ckeditor的網站下載相應的皮膚。

皮膚更換

去ckeditor的關網選一個你喜歡的皮膚，而後下載下來。
http://ckeditor.com/addons/skins/all
以bootstrap爲例，點擊Download進行下載

根據提示信息，將下載的文件進行解壓，並放在項目中ckeditor目錄的skins目錄下

而後配置config.js，使其引用bootstrap的皮膚

/**
 * @license Copyright (c) 2003-2017, 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就能夠自定義界面了

 

進入界面選擇和排序頁面

 

獲得自定義界面的js

將其拷貝到config.js中，注意保存本身以前的配置（皮膚，高度等）

 

隱藏按鈕

ckeditor與ckfinder整合以後再進行圖文混排的時候選擇圖片時能夠瀏覽服務器上的圖片資源

 

用戶能夠刪除，重命名，這也會影響到其餘頁面對該圖片的引用，不安全。

能夠將瀏覽服務器按鈕隱藏了。

在選擇圖片的時候有兩處有瀏覽服務器的按鈕:

 

因此須要修改兩處

打開ckeditor/plugins/image/dialogs/下的image.js

查找browseServer，找到第一次出現的位置

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

修改其爲:

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

第一個瀏覽服務器按鈕就被隱藏了

 

再搜索image.js，搜索filebrowser

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

將其改成

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

這樣兩個瀏覽服務器的按鈕就被隱藏了，用戶只能每次上傳圖片來進行圖文混排。

 

界面元素操做

ckeditor爲界面提供了許多按鈕，有源代碼，保存，新建，打印等等。

有時候咱們須要本身操做這些按鈕的事件。ckeditor也爲咱們提供了相應的api

api網址: 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);
}

 

打印按鈕的事件

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

 

操做事件

除了能夠獲取按鈕的事件外，還能獲取整個editor的點擊，失去焦點等事件。

eg:

用戶進入編輯頁面，ckeditor顯示提示信息，當用戶點擊進行輸入的時候提示信息消失，若是用戶什麼也沒有輸入，失去焦點時提示信息從新出現，若是用戶輸入了，不出現提示信息。

// 失去焦點
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);
    }
}

 

 

 

【參考文獻】

【1】http://blog.csdn.net/frankcheng5143/article/details/50946142

【2】http://blog.csdn.net/woshirongshaolin/article/details/8240542