欢迎访问我的个人主页: 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