说明

本笔记基于ckeditor 4.4.7

安装

引入ckeditor/ckeditor.js，给目标textarea添加 name 和 class="ckeditor" ，即可将一个textarea修饰为ckeditor。

扩展允许的内容

示例(扩展允许abcd标签，同时允许abcd附加任何属性内容，任何style内容，任何类内容)：

CKEDITOR.config.extraAllowedContent = 'abcd[*]{*}(*)';

参考官方API：http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

支持HTML5标签

CKEDITOR.config.allowedContent = {
  '$1': {
    elements: CKEDITOR.dtd,
    attributes: true,
    styles: true,
    classes: true
  }
};

参考官方API：http://docs.ckeditor.com/#!/guide/dev_disallowed_content-section-how-to-allow-everything-except…

自定义行高插件

本插件源码来自互联网，由于源代码基于ckeditor3.6.6.1，故对源码进行过简单修改，以求适应ckeditor 4.4.7

插件目录如下：

lineheight
 └─┬ plugin.js
   │
   └─ lang
     ├ en.js
     └ zh-cn.js

引入方式1(通过api对ckeditor进行扩展，推荐)

将lineheight文件夹放在项目里，如：project/static/lineheight

在业务层js(如project/static/my.src.js)里添加以下两行：

CKEDITOR.plugins.addExternal('lineheight', 'static/lineheight/'); // 添加行高插件
CKEDITOR.config.extraPlugins = (CKEDITOR.config.extraPlugins && CKEDITOR.config.extraPlugins.length) ? (CKEDITOR.config.extraPlugins + ',lineheight') : 'lineheight';

引入方式2(直接修改ckeditor源码，不推荐)

将lineheight文件夹放在ckeditor/plugins/目录下，
然后修改ckeditor/config.js文件：

config.extraPlugins = (config.extraPlugins && config.extraPlugins.length ? config.extraPlugins + ',lineheight' : 'lineheight');

ckeditor引入自定义插件方式，参考资料：Can I control where CKEditor finds plugins to load?

下载地址：ckeditor 行高插件

为“图片属性”对话框添加上传图片按钮

示例代码如下

      CKEDITOR.on('dialogDefinition', function (e) {
        var dialogName = e.data.name;
        var dialog = e.data.definition.dialog;
        var dialogDefinition = e.data.definition;
         // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).
        if (dialogName == 'image') {//判断打开的对话框是否为“图片属性对话框”
          dialog.on('show', function (e) {
             // Get a reference to the "Link Info" tab.
             var $upload = $(e.sender.getElement().$).find('.cke_dialog_ui_hbox_last:first');
             $uploadCKEditor = $upload;
             if ($upload.find('iframe').length == 0){
              $upload.empty().append('<iframe style="height:39px;width:110px; margin-top:11px;" src="/upload.htm?callback=uploadfinishedFromCKEditor&width=110&height=39&margin=5" frameborder="0" scrolling="no"></iframe>');
             }
            $(e.sender.getElement().$).find(':input.cke_dialog_ui_input_text:eq(2)').val('100%');
          });
          dialog.on('hide', function (e) {
            //alert('dialog ' + dialogName + ' closed.');
          });
        }
      });

     //定义回调函数，可以根据自己的业务修改
      window.uploadfinishedFromCKEditor = function(url){
          var $input =  $uploadCKEditor.siblings('.cke_dialog_ui_hbox_first:first').find(':input');
          $input.val(url);
      }

效果如下：
图片加载中

将光标定位（移到）最后位置

首先，要有光标…

var editor = CKEDITOR.instances.editor1;
var range = editor.createRange();
range.moveToElementEditablePosition(editor.editable(), true);
editor.getSelection().selectRanges([range]);

参考官方API：http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-createRange
http://docs.ckeditor.com/#!/api/CKEDITOR.dom.range-method-moveToElementEditablePosition
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelection
http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-selectRanges

完整`toolbar`配置

if (window.CKEDITOR) {
  config.toolbar = [
    { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'about', items: [ 'About' ] }
  ];
}

以编程方式选中指定的选项卡

当相应的事件触发后，比如用户点击了某个按钮，以编程的方式，选中对话框中，指定的选项卡，可以使用 dialog 对象的 selectPage(tabId) 方法。
例如当前选中的选项卡 ID 为 tab_3，现在需要切换到 ID 为 tab_0 的选项卡，代码如下：

var dialog = CKEDITOR.dialog.getCurrent(); // 获取当前打开的对话框对象
dialog.selectPage('tab_0'); // 切换到 ID 为`tab_0` 的选项卡

说明

安装