ckeditor 学习笔记

欢迎访问我的个人主页: http://xueliang.org

说明

本笔记基于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 = (config.extraPlugins && config.extraPlugins.length ? ",lineheight" : "lineheight");

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

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

config.extraPlugins += (config.extraPlugins && config.extraPlugins.length ? ",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

欢迎访问我的个人主页: http://xueliang.org