多功能插件CKEditor安装、使用技巧与配置

1. 官网下载：https://ckeditor.com/ckeditor-4/download/

2. 解压文件目录到与所调用文件同级

3. 引用js文件：

   <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
   

4. 编写html域：

   <div style="margin-left:60px;" ><textarea rows="60" cols="20" id="test"  name="Mytextarea"></textarea></div>
   

5. 替换html域

   <script type="text/javascript">
   		CKEDITOR.replace('Mytextarea',
   			{ 
   				//属性名称：属性值,
   			}
   		);
   		
   	</script>
   

6. 属性配置

   				uiColor: '#ffccdd',
   				toolbarCanCollapse :true,//能否收缩
   				toolbarStartupExpanded:true,//默认是否打开
   				toolbarLocation : 'top',//位置 bottom|top
   				resize_enabled : false,//拖拽改变大小
   				resize_maxHeight : 3000,//最大高度
   				autoUpdateElement : true,//提交表单时更新元素内容
   				height:160,
   				width:932,
   				fontSize_defaultLabel : '12px',//默认字体大小
   				fontSize_sizes :'6/6px;8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px',//可选字体大小
   				tabSpaces : 2,//按下tab键是缩进的字数，为0则跳出编辑区
   				theme : 'default',//主题
   				undoStackSize : 20,//撤销时记录的步数
   				//快捷键
   				keystrokes : [
   					[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点
   					[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点
   				   [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单
   				   [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销
   					[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
   					[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
   
   					[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接
   
   					[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体
   					[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体
   					[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线
   
   					[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
   				],
   				//防止快捷键与浏览器冲突
   				blockedKeystrokes : [
   					CKEDITOR.CTRL + 66 /*B*/,
   					CKEDITOR.CTRL + 73 /*I*/,
   					CKEDITOR.CTRL + 85 /*U*/
   				],
   				
   				//工具栏
   				toolbar:'Basic', //调用自定义工具栏config.js 默认Basic
   

7. 自定义工具栏

   • 通过配置文件config.js

     config.toolbar = 'SingleLine';     //width：932
         
     		config.toolbar_SingleLine =     
     		[     
     			{ name: 'document', items: [ 'Source' ] },
     			{ name: 'clipboard', items: [  'Undo', 'Redo' ] },
     			{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
     			{ name: 'paragraph', items: [  'Outdent', 'Indent', '-',  'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
     			{ name: 'insert', items: [  'HorizontalRule', 'Smiley', 'SpecialChar' ] },
     			{ name: 'styles', items: [ 'Styles','FontSize' ] },
     			{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
     		];   
     
     		config.toolbar = 'DoubleLine';     //width：932
         
     		config.toolbar_DoubleLine =     
     		[     
     			{ name: 'document', items: [ 'Source', '-',  'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
     			{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
     			{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
     			{ name: 'links', items: [ 'Link', 'Unlink'] },
     			{ name: 'insert', items: [ 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ] },
     			{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
     			{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
     			'/',
     			{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
     			{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
     			{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }
     		];  
     

     script中调用：toolbar:'SingleLine', //调用自定义工具栏config.js

   • 直接在script中配置

     toolbar :
     		[
     			['Styles', 'Format'],
     			['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
     		]