ckeditor使用

CKEditor中有用的方法和事件

調用或初始化CKeditor

代碼:

<textarea name="htmlcontent" id="myckeditor" > hi.! I am Ckeditor </textarea>  
CKEDITOR.replace('myckeditor');

檢查CKEditor是否可用

代碼:

var isCkeditor = typeof CKEDITOR.instances[myckeditor] != 'undefined';

銷燬或刪除CKeditor實例

代碼:

if(typeof CKEDITOR.instances[myckeditor] != 'undefined') {
    setTimeout(function () {
        CKEDITOR.instances[myckeditor].updateElement();
        CKEDITOR.instances[myckeditor].destroy();
    }, );
}

粘貼事件

代碼:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('paste', function(evt) {
        if (evt.data.type == 'html') {
            // when paste as plain text or direct paste in ckeditor body.  
        }
        if (evt.data.type == 'text') {
            // when paste as text or paste from word.  
        }
    });
});

得到焦點或失去焦點事件

代碼:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('focus', function(evt) {
        console.log(「Editor focused」)
    });
    ev.editor.on('blur', function(evt) {
        console.log(「Editor blur」)
    });
});

最大化或最小化事件

代碼:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('maximize', function(evt) {
        console.log('maximized');
    });
    ev.editor.on('minimize', function(evt) {
        console.log('minimized');
    });
});

定義對話框事件

代碼:

CKEDITOR.on('dialogDefinition', function (ev) {
});

圖片對話框

代碼:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'image') {}
});

表格對話框

代碼:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'table') {}
});

獲取當前對話框，對話框標籤頁以及標籤頁組件

代碼:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == 'image') {
        var infoTab = ev.data.definition.getContents('info'); //get contents of infotab in image dialog  
        var browseBtn = infoTab.get('browse'); //get specific element in info tab  
        //here do some action (onclick, focus) of element  
    }
});

設置對話框中輸入的值

代碼:

var CurrentDialog = CKEDITOR.dialog.getCurrent();
CurrentDialog.selectPage('info');
var urlInput = CurrentDialog.getContentElement('info', 'txtUrl');
urlInput.setValue('pic/flowers.jpg');

獲取對話框中輸入的值

代碼:

urlInput.getValue();

強制應用js腳本或css樣式表文件

代碼:

var head = CKEDITOR.instances.Content.document.getHead();
var myscript = CKEDITOR.document.createElement('link', {
    attributes: {
        type: 'text/css',
        rel: 'stylesheet',
        'href': 'mytemp.css'
    }
});
head.append(myscript);

工具欄按鈕按下事件

代碼:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('afterCommandExec', function(event){
        if (event.data.name == 'unlink')
            alert("unlink button pressed!");
    });
};

雙擊事件（例子中包含屏蔽雙擊超連接彈出對話框的代碼）

代碼:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('doubleclick', function(evt){
        var element = evt.data.element;

        if (element.is('a')){
            evt.stop(); // don't do the other listeners
            // optionally put your code        }    });};