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",
width: '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',
width: '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",
width: '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",
width: '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",
width: '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中定義的命令