Ckeditor

安裝

bower install ckeditor --save

初始化

載入 ckeditor.js

<script src="../ckeditor.js"></script>

初始化需要 ckeditor 元素(by element id),將要初始化的元素編號帶入 CKEDITOR.replace( ELEMENT_ID );

<textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
</textarea>
<script>
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1' );
</script>

延伸設定

在初始化時,將設定帶入後方參數即可

CKEDITOR.replace( 'editor1', {
    customConfig: ''
});

取得元素資料

初始化後,Ckeditor 會將資源存放在 CKEDITOR.instances,並依照傳入的 ELEMENT_ID 去存放,所以可以透過存取 CKEDITOR.instances 中的 ELEMENT_ID 物件去取得資料

var data = CKEDITOR.instances.editor1.getData();

工具列設定

CKEDITOR.replace( 'editor1', {
    toolbarGroups : [
        {
            name:"basicstyles",
            groups:["basicstyles"]
        },
        {
            name:"links",
            groups:["links"]
        },
        {
            name:"paragraph",
            groups:["list","blocks","indent"]
        },
        {
            name:"insert",
            groups:["insert"]
        },
        {
            name:"styles",
            groups:["styles"]
        },
        '/',
        {
            name: 'clipboard',
            groups: [ 'undo', 'clipboard' ]
        },
        // 切換原始碼
        {"name":"document","groups":["mode"]},
    ]
});

參考資料

results matching ""

    No results matching ""