|
最近忙于開(kāi)發(fā)工作流,，想起之前開(kāi)發(fā)的OA
，缺少一個(gè)重要的功能：表單設(shè)計(jì)器,。因?yàn)槲覀兊腛A是基于Sharepoint開(kāi)發(fā)的,，如果沒(méi)有表單設(shè)計(jì)器，定義一個(gè)列表的界面需要開(kāi)發(fā)一個(gè)
feature,，或則需要VS開(kāi)發(fā)一個(gè)aspx頁(yè)面,。這事一個(gè)很麻煩的事情。所以考慮實(shí)現(xiàn)一個(gè)表單設(shè)計(jì)器,。
CKEditor的源碼存放在_source目錄下面,，根目錄下面的ckeditor.js是經(jīng)過(guò)壓縮的代碼,。Dom元素操作,，事件處理,，初始化腳本和其他一些環(huán)境設(shè)置都在ckeditor\_souce\core目錄下面。其他功能,，如格式化,，復(fù)制粘貼,，圖片和鏈接都是以插件的形式實(shí)現(xiàn)的，存放在ckeditor\_source\plugins文件夾下面,，每一個(gè)文件夾為一個(gè)插件,。每個(gè)文件夾下面都有一個(gè)plugin.js的腳本文件。 我們以Hello World插件為例子,。呵呵,。在plugins目錄下面新建一個(gè)HelloWorld文件夾，并在下面建立一個(gè)plugin.js文件,。 插件配置要CKEditor能夠調(diào)用我們開(kāi)發(fā)的插件,，我們需要在CKEditor注冊(cè)我們開(kāi)發(fā)的插件。打開(kāi)根目錄下面的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會(huì)從Plugin文件夾找HelloWorld文件夾下面的plugin.js,，并加載插件。
工具欄按鈕我們需要在CKEditor的工具欄上加入HelloWorld的按鈕,。單擊按鈕出發(fā)一個(gè)命令,。命令可以觸發(fā)一個(gè)事件，或調(diào)用方法,。我們通過(guò)CKEDITOR.plugins.add方法來(lái)添加插件,。
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 }); } }); 上面代碼中，我們添加了一個(gè)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表示一個(gè)編輯器的實(shí)例,。通過(guò)調(diào)用其addCommand(commandName, commandDefinition) 方法,，來(lái)添加命令。我們實(shí)例化了一個(gè)CKEDITOR.dialogCommand,，此命令繼承至CKEDITOR.commandDefinition,，該命令執(zhí)行時(shí)打開(kāi)一個(gè)特定的對(duì)話框。我們現(xiàn)在把這個(gè)按鈕加入到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)識(shí)分隔符 。
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' ] }
]; 那么我們可以模仿來(lái)定義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'); }; 
這個(gè)按鈕已經(jīng)出來(lái)了,。可惜沒(méi)有圖片,。在HelloWorld的插件目錄下面新增一文件夾images,，添加一個(gè)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是開(kāi)發(fā)插件的關(guān)鍵,，在前面我們使用CKEDITOR.dialog.add方法添加了一個(gè)對(duì)話框。 有兩個(gè)參數(shù),。一個(gè)是對(duì)話框名,，一個(gè)對(duì)話框定義。
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
我們的對(duì)話框定義放在ckeditor\_source\plugins\HelloWorld\dialogs\HelloWorld.js。
(function () {
function HelloWorldDialog(editor) {
return {
title: '對(duì)誰(shuí)說(shuō)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:顯示在窗體的按鈕。默認(rèn)CKEDITOR.dialog.okButton,CKEDITOR.dialog.cancelButton,。也就是確定,，和取消按鈕。也可以自己定義一個(gè)Button,。 {
type: 'button',
id: 'someButtonID',
label: 'Button',
onClick: function () {
alert('Custom Button');
} } contents:對(duì)話框里面的內(nèi)容。是一個(gè)CKEDITOR.dialog.definition.content數(shù)組。每一個(gè)CKEDITOR.dialog.definition.content顯示為一個(gè)tab(選項(xiàng)卡),。這里有一個(gè)重要的屬性是elements，是一個(gè)CKEDITOR.dialog.definition.uiElement數(shù)組,，是每一個(gè)選項(xiàng)卡里面的內(nèi)容,。uiElement中有commit方法，這個(gè)方法由對(duì)話框CKEDITOR.dialog.definition.commitContent方法調(diào)用執(zhí)行,。 commit: function () {
var text = ‘Hello ’+this.getValue(); alert(text); } 這里我們調(diào)用CKEDITOR.ui.dialog.uiElement的getValue方法來(lái)獲取到名字文本框的值,。這里只是alert，稍后在改進(jìn)怎么把值加入到設(shè)計(jì)器里面,。
那現(xiàn)在在來(lái)運(yùn)行看看效果：
當(dāng)然我們不想這樣Alert,。我們希望能夠把Hello 某某某寫(xiě)到編輯器里面。
(function () {
function HelloWorldDialog(editor) {
return {
title: '對(duì)誰(shuí)說(shuō)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);
}); })(); 首先我們實(shí)例化了一個(gè)CKEDITOR.dom.elemtn。設(shè)置了它的Text,，并通過(guò)insertElement方法把元素加入到編輯器,。就這樣。我們?cè)诳纯葱Ч? 
源碼： 
就到這里,。最近考慮實(shí)現(xiàn)編輯器,。希望大家能夠給點(diǎn)路子。不然我會(huì)誤入歧途的,。,。。,。謝謝了,。 參考資料：
|
|
|
來(lái)自： 看見(jiàn)就非常 > 《server》
