|
最近忙于開發(fā)工作流，想起之前開發(fā)的OA
，缺少一個重要的功能：表單設(shè)計器。因為我們的OA是基于Sharepoint開發(fā)的，如果沒有表單設(shè)計器，定義一個列表的界面需要開發(fā)一個
feature，或則需要VS開發(fā)一個aspx頁面。這事一個很麻煩的事情。所以考慮實現(xiàn)一個表單設(shè)計器。
CKEditor的源碼存放在_source目錄下面，根目錄下面的ckeditor.js是經(jīng)過壓縮的代碼。Dom元素操作，事件處理，初始化腳本和其他一些環(huán)境設(shè)置都在ckeditor\_souce\core目錄下面。其他功能，如格式化，復(fù)制粘貼，圖片和鏈接都是以插件的形式實現(xiàn)的，存放在ckeditor\_source\plugins文件夾下面，每一個文件夾為一個插件。每個文件夾下面都有一個plugin.js的腳本文件。 我們以Hello World插件為例子。呵呵。在plugins目錄下面新建一個HelloWorld文件夾，并在下面建立一個plugin.js文件。 插件配置要CKEditor能夠調(diào)用我們開發(fā)的插件，我們需要在CKEditor注冊我們開發(fā)的插件。打開根目錄下面的config.js。設(shè)置CKEDITOR.editorConfig屬性 config.extraPlugins = 'HelloWorld';
完整的代碼如下：
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins = 'HelloWorld';
}; 這樣CKEditor會從Plugin文件夾找HelloWorld文件夾下面的plugin.js，并加載插件。
工具欄按鈕我們需要在CKEditor的工具欄上加入HelloWorld的按鈕。單擊按鈕出發(fā)一個命令。命令可以觸發(fā)一個事件，或調(diào)用方法。我們通過CKEDITOR.plugins.add方法來添加插件。
CKEDITOR.plugins.add('HelloWorld', {
init: function (editor) {
var pluginName = 'HelloWorld'; CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton(pluginName, {
label: 'Hello',
command: pluginName }); } }); 上面代碼中，我們添加了一個HelloWorld的按鈕，和HelloWorld的命令。
CKEDITOR.ui.button = function( definition )
{
// Copy all definition properties to this object.
CKEDITOR.tools.extend( this, definition,
// Set defaults.
{
title : definition.label, className : definition.className || ( definition.command && 'cke_button_' + definition.command ) || '', click : definition.click || function( editor )
{
editor.execCommand( definition.command ); } }); this._ = {};
}; editor表示一個編輯器的實例。通過調(diào)用其addCommand(commandName, commandDefinition) 方法，來添加命令。我們實例化了一個CKEDITOR.dialogCommand，此命令繼承至CKEDITOR.commandDefinition，該命令執(zhí)行時打開一個特定的對話框。我們現(xiàn)在把這個按鈕加入到ToolBar里，修改Config.js。
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = [ { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', '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'] },
{ 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', '-', 'About'] },
'/',
{ name: 'extent', items: ['HelloWorld'] }
]; config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld'); }; 注釋：’/’表示換行,’-‘標(biāo)識分隔符 。
CKEDITOR.config.toolbar_Full = [ { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', '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' ] },
{ 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','-','About' ] }
]; 那么我們可以模仿來定義Mine的ToolBar。再次編輯config.js。
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Mine = [ { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', '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'] },
{ 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', '-', 'About'] },
'/',
{ name: 'extent', items: ['HelloWorld'] }
]; config.toolbar = 'Mine';
config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld'); }; 
這個按鈕已經(jīng)出來了?？上]有圖片。在HelloWorld的插件目錄下面新增一文件夾images，添加一個16*16的圖標(biāo)。 修改ckeditor\_source\plugins\HelloWorld\plugin.js。 CKEDITOR.plugins.add('HelloWorld', {
init: function (editor) {
var pluginName = 'HelloWorld'; CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton(pluginName, {
label: 'Hello',
command: pluginName, icon: this.path + 'images/hello.png' }); } }); Dialogs:Dialog是開發(fā)插件的關(guān)鍵，在前面我們使用CKEDITOR.dialog.add方法添加了一個對話框。 有兩個參數(shù)。一個是對話框名，一個對話框定義。
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
我們的對話框定義放在ckeditor\_source\plugins\HelloWorld\dialogs\HelloWorld.js。
(function () {
function HelloWorldDialog(editor) {
return {
title: '對誰說Hello',
minWidth: 300, minHeight: 80, buttons: [{
type: 'button',
id: 'someButtonID',
label: 'Button',
onClick: function () {
alert('Custom Button');
} }, CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton], contents: [ {
id: 'info',
label: '名字',
title: '名字',
elements: [ {
id: 'text',
type: 'text',
style: 'width: 50%;',
label: '名字',
'default': '', required: true,
validate: CKEDITOR.dialog.validate.notEmpty('名字不能為空'),
commit: function () {
var text = ‘Hello ’+this.getValue(); alert(text); } } ] } ], onLoad: function () {
alert('onLoad');
}, onShow: function () {
alert('onShow');
}, onHide: function () {
alert('onHide');
}, onOk: function () {
this.commitContent();
}, onCancel: function () {
alert('onCancel');
}, resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT }; } CKEDITOR.dialog.add('HelloWorld', function (editor) { return HelloWorldDialog(editor);
}); })(); title:窗體的標(biāo)題 minWidth:窗體最小的寬度 minHeight:窗體的最小高度 buttons:顯示在窗體的按鈕。默認CKEDITOR.dialog.okButton,CKEDITOR.dialog.cancelButton。也就是確定，和取消按鈕。也可以自己定義一個Button。 {
type: 'button',
id: 'someButtonID',
label: 'Button',
onClick: function () {
alert('Custom Button');
} } contents:對話框里面的內(nèi)容。是一個CKEDITOR.dialog.definition.content數(shù)組。每一個CKEDITOR.dialog.definition.content顯示為一個tab(選項卡)。這里有一個重要的屬性是elements，是一個CKEDITOR.dialog.definition.uiElement數(shù)組，是每一個選項卡里面的內(nèi)容。uiElement中有commit方法，這個方法由對話框CKEDITOR.dialog.definition.commitContent方法調(diào)用執(zhí)行。 commit: function () {
var text = ‘Hello ’+this.getValue(); alert(text); } 這里我們調(diào)用CKEDITOR.ui.dialog.uiElement的getValue方法來獲取到名字文本框的值。這里只是alert，稍后在改進怎么把值加入到設(shè)計器里面。
那現(xiàn)在在來運行看看效果：
當(dāng)然我們不想這樣Alert。我們希望能夠把Hello 某某某寫到編輯器里面。
(function () {
function HelloWorldDialog(editor) {
return {
title: '對誰說Hello',
minWidth: 300, minHeight: 80, buttons: [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton], contents: [ {
id: 'info',
label: '名字',
title: '名字',
elements: [ {
id: 'text',
type: 'text',
style: 'width: 50%;',
label: '名字',
'default': '', required: true,
validate: CKEDITOR.dialog.validate.notEmpty('名字不能為空'),
commit: function (editor) {
var text = 'Hello '+this.getValue(); var element = new CKEDITOR.dom.element('span', editor.document); element.setText(text); editor.insertElement(element); } } ] } ], onOk: function () {
this.commitContent(editor);
}, resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT }; } CKEDITOR.dialog.add('HelloWorld', function (editor) { return HelloWorldDialog(editor);
}); })(); 首先我們實例化了一個CKEDITOR.dom.elemtn。設(shè)置了它的Text，并通過insertElement方法把元素加入到編輯器。就這樣。我們在看看效果。 
源碼： 
就到這里。最近考慮實現(xiàn)編輯器。希望大家能夠給點路子。不然我會誤入歧途的。。。。謝謝了。 參考資料：
|
|
|
