说明

本笔记基于ckeditor 4.4.7

安装

引入ckeditor/ckeditor.js,给目标textarea添加 nameclass="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.jszh-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` 的选项卡
About Me
WEB开发工程师
GitHub Repos