多功能插件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']
     		]