ckeditor 換行語法調整

Posted at 2016-03-23 ckeditor

第一步

你要先在 html 的地方，import plugin 檔案，此處不需要 import config 檔。

特別注意 ckeditor.js 的目錄，會是 config.js 的根目錄，因為我第一次在試的時候，是直接設 ckeditor 的 CDN，然後有另一個獨立的 config 檔案，但這樣是不行的，如果 ckeditor.js 檔是 http url，那 customConfig 的地方，也會變成去抓 url，不是本機的位置。

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

第二步

在 html 檔案內，須有對應的 html 元素跟 JS

html

1
2
3

<textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
</textarea>

js

1	CKEDITOR.replace( 'editor1');

或

不使用預設的 config，另外獨立一個設定擋。

1
2
3

CKEDITOR.replace( 'editor1', {
  customConfig: './custom/ckeditor_config.js'
});

第三步

改 config 設定內容，預設值是P 元素。

1	config.enterMode = CKEDITOR.ENTER_P;

但還有其他選項，例如 DIV 元素 或 BR 元素：

1
2
3

config.enterMode = CKEDITOR.ENTER_DIV;
// or
config.enterMode = CKEDITOR.ENTER_BR;

完整範例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="./ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>

                CKEDITOR.replace( 'editor1');


                // CKEDITOR.replace( 'editor1', {
                //     customConfig: './custom/ckeditor_config.js'
                // });
            </script>
        </form>
    </body>
</html>

// config.js 或 ./custom/ckeditor_config.js
CKEDITOR.editorConfig = function( config ) {
  config.enterMode = CKEDITOR.ENTER_DIV;
  // config.enterMode = CKEDITOR.ENTER_BR;
  // config.enterMode = CKEDITOR.ENTER_P;
};

Previous post: JQuery Module Pattern Next post: JWT Authentication with AngularJS Forward 4 Web Summit (2)

Typography

活版印字

第一步

第二步

html

js

第三步

完整範例