CKEditor 4 CKEDITOR API 部份範例

Posted on Edited on In Views: Disqus:

 

我認為在利用CKeditor開發時，對於不會使用的方法只要去查CKEDITOR API Documentation就好了，

但事實上卻會發現完全看不懂、不知道如何用，而且程式碼範例少的可憐。

我現在也是舉幾個API方法來示範如何使用而已，

相信之後有需要時再來看Documentation時，就比較會看了。

 

一、createFromHtml( html ) : CKEDITOR.dom.element [STATIC]

<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="http://cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>
</head>
<body>
    <textarea id="editor1"></textarea>
    <script>
        var temp = CKEDITOR.dom.element.createFromHtml('<p>to use createFromHtml method</p>')

        temp.appendTo(CKEDITOR.document.getBody());
    </script>
</body>
</html>

其createFromHtml用法為產生html標記的元素，並回傳成CKEDITOR.dom.element型態的object(先簡稱ckeditor object)。

而appendTo( element ) : CKEDITOR.dom.element的用法為

將一個ckeditor object的內容附加到另一個ckeditor object，如上例，

將CKEDITOR.dom.element object的內容經由CKEDITOR.document.getBody( ) : CKEDITOR.dom.element方法

附加到body元素裡。

 

二、jQuery Adapter

CKeditor有提供與jQuery整合的配接器，配接器可以讓你用jQuery語法來驅動CKeditor，

使用配接器當然要先了解如何匯入配接器的script file，

1、先取得配接器的script file

在http://ckeditor.com/download頁面下載檔案，任選一版本都可以。

然後在下載下來的ckeditor\adapters資料夾裡可以找到該配接器script file

以下為jQuery Adapter範例，我直接利用cdnjs取得Adapter script file以利展示。

<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="http://cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.2/adapters/jquery.js"></script>
</head>
<body>
    <textarea id="editor1"></textarea>
    <script>
        var editor = $('#editor1').ckeditor().editor;
        editor.setUiColor('#ff00ff');
    </script>
</body>
</html>

相關操作請參考

The jQuery Adapter

CKEDITOR_Adapters.jQuery

 

參考資料：

Ckeditor GOGOGO~~~ 歐雷~歐雷~歐雷~ part 3