CKEditor功能扩展示例－－在工具栏上添加Readonly按钮

前面介绍了一个为CKEditor的image对话框添加自己的upload按钮的例子。地址在这儿：
http://topic.csdn.net/u/20100127/11/d2254308-db90-4b1f-adca-b36bd8956264.html?11282这次我们来点复杂的，在工具栏上加一个Readonly按钮。工具栏上加按钮本身不复杂。难是难在点击这个按钮后要让CKEditor的状态变成只读，这就意味着其他的按钮都不能用了。这就牵涉的东西比较多了。
先来看代码：
//代码【1】
// Temporary workaround for providing editor 'read-only' toggling functionality.  
( function(){
var cancelEvent = function( evt ){
evt.cancel();
};

CKEDITOR.editor.prototype.readOnly = function( isReadOnly ){
// Turn off contentEditable
/*
if ( this.document ){
this.document.$.body.disabled = isReadOnly;
if ( CKEDITOR.env.ie ){ 
this.document.$.body.contentEditable = !isReadOnly;
}else{
this.document.$.designMode = (isReadOnly ? "off" : "on");
}
}
*/

// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;

for ( var name in commands ){
if (name != "ReadonlyCmd"){
command = commands[ name ];
if ( isReadOnly ) {
command.disable();
}else{
command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
}
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}

var i,j,k;
var toolbars = this.toolbox.toolbars;
for ( i = 0; i < toolbars.length; i++ ){
var toolbarItems = toolbars[i].items;
for ( j = 0; j < toolbarItems.length; j++ ){
var combo = toolbarItems[j].combo;
if ( combo ){
combo.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
var button = toolbarItems[j].button;
if ( button && button.createPanel ){
button.setState( isReadOnly ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF );
}
}
}
}
} )();
//代码【2】
function addReadonlyButton(editor, theMode){
editor.on('pluginsLoaded', function( ev ){
var savedState = CKEDITOR.TRISTATE_OFF;
var i,j,k;
editor.addCommand( 'ReadonlyCmd', {
exec : function (e){
switch (this.state){
case CKEDITOR.TRISTATE_OFF :
editor.readOnly(true);
    break;
case CKEDITOR.TRISTATE_ON :
editor.readOnly(false);
break;
}
this.toggleState();
savedState = this.state;
},
canUndo : false
});

editor.ui.addButton( 'Readonly', {
label : 'Readonly',
command : 'ReadonlyCmd'
});

editor.on( 'mode', function() {
editor.getCommand( 'ReadonlyCmd' ).setState( savedState );
}, null, null, 100 );
});
setReadonlyButtonStyle();
}function setReadonlyButtonStyle(){
var cssText = ''
+ '.cke_button_ReadonlyCmd .cke_icon{'
+ ' display: none !important;'
+ '}'
+ '.cke_button_ReadonlyCmd .cke_label{'
+ ' display: inline !important;'
+ '}';
importStyle(cssText);
}
function importStyle(theCssText){
var styleElement = document.createElement('style');
styleElement.setAttribute("type", "text/css"); if (styleElement.styleSheet) { //for IE
styleElement.styleSheet.cssText = theCssText;
}else{ //for FF
var textNode = document.createTextNode(theCssText);
styleElement.appendChild(textNode);
}

var headElement = document.getElementsByTagName('head')[0];
headElement.appendChild(styleElement);
}
//代码【3】
var editor = CKEDITOR.replace('editor1', {
startupFocus : true,
toolbar : [ //add Readonly button
['Source','-','Readonly','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
]
});
addReadonlyButton(editor);
说明：
代码【1】是给CKEditor扩展Readonly属性，实现当按下/按起Readonly按钮后其他按钮不可用/可用的状态。
代码【2】是给CKEditor添加一个Readonly的button和Command，并设置按钮的样式。Command是CKEditor内部的一种对象，通常一个按钮就是和一个Command关联。这儿的Command的动作就是根据按钮的状态设置刚刚定义的Readonly的属性。
代码【3】是将按钮定位到工具栏上。