2 CKEdtior的加载
1、下载CKEditor完整版，粘贴到javascri中
2、在要加载CKEditor的页面中，定义一个容器控件（最好是DIV）
<div id="txteditor" name="txteditor">
<%= 初始化的值%>
</div>
//加载CKEditor
window.onload = function () {
CKEDITOR.replace('txteditor',
{
toolbar: 'MyToolbar'//和配置文件中的工具栏名称保持一致
});
};
3 工具栏配置
3.1 配置文件 config.js
在配置文件中设置工具栏要显示的按钮，按钮是在/Scripts/ckeditor/plugins中自己编写的JS文件。
下面的橙色字体为编写的JS文件中控件的命令。
CKEDITOR.editorConfig = function (config) {
//注册自定义控件
//cudataview
config.extraPlugins += (config.extraPlugins ? ',cu_cudataviewdiv' : 'cu_cudataviewdiv');
//cutext
config.extraPlugins += (config.extraPlugins ? ',cu_cutextdiv' : 'cu_cutextdiv');
//linkbutton
config.extraPlugins += (config.extraPlugins ? ',cu_linkbuttona' : 'cu_linkbuttona');
//cubutton
config.extraPlugins += (config.extraPlugins ? ',cu_buttona' : 'cu_buttona');
//curadiolist
config.extraPlugins += (config.extraPlugins ? ',cu_curadiolistdiv' : 'cu_curadiolistdiv');
//cucheckboxlist
config.extraPlugins += (config.extraPlugins ? ',cu_cucheckboxlistdiv' : 'cu_cucheckboxlistdiv');
//cudate
config.extraPlugins += (config.extraPlugins ? ',cu_dateinput' : 'cu_dateinput');
//span
config.extraPlugins += (config.extraPlugins ? ',cu_spanlabel' : 'cu_spanlabel');
//label
config.extraPlugins += (config.extraPlugins ? ',cu_labellabel' : 'cu_labellabel');
//img
config.extraPlugins += (config.extraPlugins ? ',cu_imgimg' : 'cu_imgimg');
//cuselect
config.extraPlugins += (config.extraPlugins ? ',cu_cuselectdiv' : 'cu_cuselectdiv');
//cutextarea
config.extraPlugins += (config.extraPlugins ? ',cu_cutextareainput' : 'cu_cutextareainput');
//curadio
config.extraPlugins += (config.extraPlugins ? ',cu_curadioinput' : 'cu_curadioinput');
//cucheckbox
config.extraPlugins += (config.extraPlugins ? ',cu_cucheckboxinput' : 'cu_cucheckboxinput');
//cufile
config.extraPlugins += (config.extraPlugins ? ',cu_fileinput' : 'cu_fileinput');
//cuhidden
config.extraPlugins += (config.extraPlugins ? ',cu_hiddeninput' : 'cu_hiddeninput');
//cupassword
config.extraPlugins += (config.extraPlugins ? ',cu_passwordinput' : 'cu_passwordinput');
//text
config.extraPlugins += (config.extraPlugins ? ',cu_textinput' : 'cu_textinput');
//自定义工具栏
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar = [['Source', '-', 'Table'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['TextColor', 'BGColor'], ['Font', 'FontSize'], ['Maximize'],
'/',
['cu_dateinput', '-', 'cu_cutextareainput', '-', 'cu_curadioinput', '-', 'cu_cucheckboxinput', '-', 'cu_fileinput', '-', 'cu_hiddeninput', '-', 'cu_passwordinput', '-', 'cu_textinput'],
['cu_cutextdiv', '-', 'cu_cudataviewdiv', '-', 'cu_curadiolistdiv', '-', 'cu_cucheckboxlistdiv', '-', 'cu_cuselectdiv'],
['cu_buttona', '-', 'cu_linkbuttona'], ['cu_spanlabel', '-', 'cu_labellabel'],
['cu_imgimg']
];
}；
4 自定义控件
4.1 创建文件
在如图目录下添加自定义控件的文件，
cubutton.js：编辑页面
plugin.js：按钮、事件命令JS
cubutton.png：图标
4.2 plugin.js—按钮、事件方法
cu_buttona：事件、按钮命令，和自定义标签HTML保持一致
cubuttonDialog：编辑页面的名称，对应cubutton.js中的页面名称
cu_buttonaGroup：右键编辑菜单组
cu_buttonaItem：右键编辑菜单组项
//cubutton控件
(function () {
CKEDITOR.plugins.add('cu_buttona',
{
//初始化按钮
init: function (editor) {
//按钮事件
var pluginName = 'cu_buttona';
editor.addCommand(pluginName, new CKEDITOR.dialogCommand('cubuttonDialog')); //定 义打开我们的对话窗口的编辑命令。
//注册控件，在工具条上显示控件
editor.ui.addButton('cu_buttona',
{
//控件的Title
label: 'cubutton控件',
//按钮事件名称
command: pluginName,
icon: this.path + 'images/cubutton.png' //按钮图片
});
//双击打开编辑窗口
editor.on('doubleclick', function (evt) {
var element = evt.data.element;
if (element.is('cu_buttona'))
evt.data.dialog = 'cubuttonDialog';
});
if (editor.contextMenu) {
// 添加上下文菜单组与编辑缩写项目。
editor.addMenuGroup('cu_buttonaGroup');
editor.addMenuItem('cu_buttonaItem', {
label: 'CUButton编辑',
icon: this.path + 'images/cubutton.png', //按钮图片
command: 'cu_buttona',
group: 'cu_buttonaGroup'
});
// cu_buttona：自定义标签，和cubutton.js中的控件标签保持一致
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('cu_buttona', true)) {
return { cu_buttonaItem: CKEDITOR.TRISTATE_OFF };
}
});
}
CKEDITOR.dialog.add('cubuttonDialog', this.path + "dialogs/cubutton.js"); //注册我们的对 话框的文件 - this.path是插件文件夹路径
}
}
);
})();
4.3 cubutton.js—编辑页面
cubuttonDialog：编辑页面名称
contents：tab页，可设置多个tab页
elements：tab页中的参数
children：tab中的控件
onShow：页面加载，其中的cu_buttona就是自定义标签的HTML
onOk：提交事件
CKEDITOR.dialog.add('cubuttonDialog',
function (editor) {
return {
// 对话窗口的基本特性：标题，最小尺寸.
title: 'cubutton编辑页',
minWidth: 300,
minHeight: 300,
// 对话窗口内容定义.
contents: [
//第1个TAB(横向排列)
{
id: 'customattribute',
label: '属性',
elements: [{
type: "hbox",
children: [{
type: "text",
label: 'ID',
id: "ID",
'120px',
"default": "cubutton",
validate: CKEDITOR.dialog.validate.notEmpty("ID不能为空"),
// 验证检查字段是否不为空。
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("ID"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('ID', id);
else if (!this.insertMode) element.removeAttribute('ID');
element.setText(this.getValue()); //显示内容
}
},
{
type: "text",
id: "Name",
label: 'Name',
'120px',
"default": "cubutton",
validate: CKEDITOR.dialog.validate.notEmpty("Name不能为空"),
// 验证检查字段是否不为空。
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("Name"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('Name', id);
else if (!this.insertMode) element.removeAttribute('Name');
}
}]
},
//1(横向排)
{
type: "hbox",
widths: ["50%", "50%"],
children: [{
type: "text",
label: 'HTML标签类型',
id: "htmltype",
'120px',
"default": "linkbutton",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("htmltype"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('htmltype', id);
else if (!this.insertMode) element.removeAttribute('htmltype');
}
},{
type: "text",
label: '控件类型(cutype)',
id: "cutype",
'120px',
"default": "linkbutton",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("cutype"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('cutype', id);
else if (!this.insertMode) element.removeAttribute('cutype');
}
}]
},
{type: "hbox",
children: [
{
type: "text",
label: '按钮样式(plain)',
id: "plain",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("plain"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('plain', id);
else if (!this.insertMode) element.removeAttribute('plain');
}
}]
},
//2(横向排)
{
type: "hbox",
children: [
{
type: "text",
label: 'class',
id: "class",
"default": "",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("class"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('class', id);
else if (!this.insertMode) element.removeAttribute('class');
}
}]
},
//5(横向排)
{
type: "hbox",
children: [
{
type: "text",
label: '显示图标',
id: "iconcls",
'100px',
"default": "icon-ok",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("iconcls"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('iconcls', id);
else if (!this.insertMode) element.removeAttribute('iconcls');
}
},{
type: "text",
label: '值',
id: "value",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("value"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('value', id);
else if (!this.insertMode) element.removeAttribute('value');
}
}]
},
{
type: "textarea",
label: 'custyle',
id: "custyle",
// 验证检查字段是否不为空。
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("custyle"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('custyle', id);
else if (!this.insertMode) element.removeAttribute('custyle');
}
}
]
},
//第二个TAB(横纵向排列)
{
id: 'cufunction',
label: '方法',
elements: [{
type: "hbox",
widths: ["50%", "50%"],
children: [{
type: "text",
label: '双击事件',
id: "cuondblclick",
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("cuondblclick"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('cuondblclick', id);
else if (!this.insertMode) element.removeAttribute('cuondblclick');
}
},
{
type: "button",
id: "selcuondblclick",
label: '选择双击事件',
onClick: function () {
openselclick();
var dialog = this.getDialog(); //当前打开的窗口
if (sFunction != "" && sFunction != undefined) {
dialog.getContentElement("cufunction", "cuondblclick").setValue(sFunction); //设置cuondblclick控件的值
}
}
}]
},
{
type: "hbox",
widths: ["50%", "50%"],
children: [{
type: "text",
id: "cuonclick",
label: '单机事件',
setup: function (element) { // 通过在对话框初始化主setupContent方法调用调用。
this.setValue(element.getAttribute("cuonclick"));
},
commit: function (element) { // 提交时的事件
var id = this.getValue();
if (id) element.setAttribute('cuonclick', id);
else if (!this.insertMode) element.removeAttribute('cuonclick');
}
},
{
type: "button",
id: "selcuonclick",
label: '选择单机事件',
onClick: function () {
openselclick();
var dialog = this.getDialog(); //当前打开的窗口
if (sFunction != "" && sFunction != undefined) {
dialog.getContentElement("cufunction", "cuonclick").setValue(sFunction); //设置cuondblclick控件的值
}
}
}]
}]
}],
// 加载对话框时调用。
onShow: function () {
// 获得从编辑器的选择。
var selection = editor.getSelection();
// 获取元素的选择开始。
var element = selection.getStartElement();
// 获得<cubutton>元素最靠近选择，如果有的话。
if (element) element = element.getAscendant('cu_buttona', true); //自定义的控件标签
// 创建一个新的<cubutton>元素，如果它不存在。
if (!element || element.getName() != 'cu_buttona') {
element = editor.document.createElement('cu_buttona');
// 标志以供日后使用的插入模式。
this.insertMode = true;
} else this.insertMode = false;
// 存储所述参考<cubutton>元件中的内部属性，以备后用。
this.element = element;
// 调用所有对话框窗口元素的设置方法，这样他们就可以加载元素属性。
if (!this.insertMode) this.setupContent(this.element);
},
// 调用此方法一旦用户点击OK按钮，确认对话框。
onOk: function () {
// 此功能的上下文是对话框对象本身。
var dialog = this;
// 创建一个新的<cubutton>元素。
var cubutton = this.element;
// 调用commit所有对话窗口元素的方法，因此<cubutton>元素被修改。
this.commitContent(cubutton);
// 最后，如果在插入模式下，插入的元素融入到编辑器的插入位置。
if (this.insertMode) editor.insertElement(cubutton);
}
};
});
4.4 双击事件
在plugin.js中的初始化事件中添加双击事件
//双击打开编辑窗口
editor.on('doubleclick', function (evt) {
var element = evt.data.element;
if (element.is('cu_cucheckboxinput'))
evt.data.dialog = 'cucheckboxDialog';
});
4.5 右键菜单
在plugin.js中的初始化事件中添加双击事件
if (editor.contextMenu) {
// 添加上下文菜单组与编辑缩写项目。
editor.addMenuGroup('cu_cucheckboxinputGroup');
editor.addMenuItem('cu_cucheckboxinputItem', {
label: 'CUCheckbox编辑',
icon: this.path + 'images/cucheckbox.png', //按钮图片
command: 'cu_cucheckboxinput',
group: 'cu_cucheckboxinputGroup'
});
//和cucheckbox.js中的控件标签保持一致
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('cu_cucheckboxinput', true)) {
return { cu_cucheckboxinputItem: CKEDITOR.TRISTATE_OFF };
}
});
}
4.6 ckeditor.js
自定义的控件，要在ckeditor.js中注册，
注册方法：
查找abbr标签，按照abbr的注册方式注册自定义的控件。
ckeditor.js的注册是为了使用双击打开编辑页、右键菜单打开编辑页。
4.7 CKEditor外部事件调用编辑框
var editor = CKEDITOR.instances.txteditor; // txteditor：被CKEditor替换的标签ID
editor.execCommand("cu_cutextdiv");// cu_cutextdiv：要执行的打开页面的命令，在plugin.js中定义的命令