最新版CKEditor的配置方法及插件(Plugin)編寫示例

2024-07-21 02:54:15

字體：大中小

供稿：網(wǎng)友

FCKEditor重寫了js框架，并改名為CKEditor。第一次在CKEditor網(wǎng)站上看到demo界面，就被CKEditor友好的界面和強大的功能所震撼。毫無疑問，CKEditor是當前互聯(lián)網(wǎng)上最優(yōu)秀的開源多媒體HTML編輯器。

本文記錄配置CKEditor過程，并以文章分頁插件為例，簡要CKEditor Plugin編寫過程。從官網(wǎng)http://ckeditor.com/download下載最新版CKEditor，解壓。

1. 調(diào)用CKEditor方法

在頁面里加載核心js文件：<script type="text/javascript" src="ckeditor/ckeditor.js"></script>，按常規(guī)方式放置textarea，如：< textarea id="editor1″ name="editor1″ rows="10" cols="80">初始化html內(nèi)容</textarea>
然后在textarea后面寫js：<script type="text/javascript">CKEDITOR.replace('editor1');</script>

其他調(diào)用方式可參考 _samples 目錄下的示例。

2. 配置個性化工具欄

ckeditor默認的工具欄中很多不常用，或者相對中文來說不適用。可通過配置默認工具欄方式實現(xiàn)，最簡潔的方法是直接修改配置文件 config.js 我的config.js內(nèi)容如下：

CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; config.uiColor = '#ddd'; config.toolbar = 'Cms'; config.toolbar_Cms = [ ['Source','-'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-'], ['Undo','Redo','-','Find','Replace','RemoveFormat'],['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule', '-'],['Maximize'], '/', ['Bold','Italic','Underline','Strike','-'], ['FontSize'],['TextColor','BGColor'], ['NumberedList','BulletedList','-','Outdent','Indent','pre'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['PageBreak', 'Page'] ]; config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;'; config.extraPlugins = 'apage'; };

3. 將編輯器內(nèi)文字修改為14px （默認12px，對中文顯示不太好看）

1）可視化編輯里默認字體大小：修改根目錄下 contents.css，將body中font-size: 12px改為 font-size: 14px

2）源代碼視圖字體大小：修改skins/kama/editor.css，在最后加一句：.cke_skin_kama textarea.cke_source { font-size:14px; }

4. 插件編寫流程和實例代碼

1) 在plugins目錄新建文件夾apage，在apage下新建文件：plugin.js 內(nèi)容如下：

CKEDITOR.plugins.add( 'apage', { init : function( editor ) { // Add the link and unlink buttons. editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) ); editor.ui.addButton( 'Page', { //label : editor.lang.link.toolbar, label : “Page", //icon: 'images/anchor.gif', command : 'apage' } ); //CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' ); CKEDITOR.dialog.add( 'apage', function( editor ) { return { title : '文章分頁', minWidth : 350, minHeight : 100, contents : [ { id : 'tab1', label : 'First Tab', title : 'First Tab', elements : [ { id : 'pagetitle', type : 'text', label : '請輸入下一頁文章標題<br />(不輸入默認使用當前標題+數(shù)字形式)' } ] } ], onOk : function() { editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]“); } }; } ); }, requires : [ 'fakeobjects' ] } );

2）在toolbar中加一項Page，并在配置中聲明添加擴展插件 config.extraPlugins = 'apage'; 有兩種方法實現(xiàn)，方法一是直接在config.js中添加，示例本文上面的config.js示例代碼；方法二：在引用CKEditor的地方加配置參數(shù),如：

CKEDITOR.replace( 'editor1', { extraPlugins : 'examenLink', toolbar : [ ['Undo','Redo','-','Cut','Copy','Paste'], ['ExamenLink','Bold','Italic','Underline',], ['Link','Unlink','Anchor','-','Source'],['Page'] ] });

此時你應(yīng)該看到編輯器里多了一個空白的按鈕了。

CKEditor,配置方法,插件

解決空白按鈕的方法有二：

方法1：修改插件代碼，plugin，將icon定義為一個存在的圖標。

方法2：讓編輯顯示Label的文字。需要加在放編輯器的頁面里加css（注意：cke_button_apage的名稱與實際保持一致。）

<style type="text/css"> .cke_button_apage .cke_icon { display : none !important; } .cke_button_apage .cke_label { display : inline !important; } </style>

如果你的分頁只需要插入一個分頁符，不需要像本文需要填寫標題，那更簡單，只需要修改插件代碼即可。請在紅麥軟件團隊wiki上查看本文提到的所有代碼： http://www.teamwiki.cn/js/ckeditor_config_plugin

CKEditor 配置及插件編寫示例

CKEditor 配置

config.js

CKEDITOR.editorConfig = function( config ){	// Define changes to default configuration here. For example:	// config.language = 'fr';	config.uiColor = '#ddd'; 	config.toolbar = 'Cms'; config.toolbar_Cms = [ ['Source','-'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-'], ['Undo','Redo','-','Find','Replace','RemoveFormat'],['Link','Unlink','Anchor'],	['Image','Flash','Table','HorizontalRule', '-'],['Maximize'], '/', ['Bold','Italic','Underline','Strike','-'],	['FontSize'],['TextColor','BGColor'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['PageBreak','-','Page'] ]; 	config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';	config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;'; 	config.extraPlugins = 'apage';};

CKEditor 分頁插件1：到提示輸入下一頁文章標題

CKEDITOR.plugins.add( 'apage',{	init : function( editor )	{		// Add the link and unlink buttons.		editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );		editor.ui.addButton( 'Page',			{				//label : editor.lang.link.toolbar,				label : "Page",				//icon: 'images/anchor.gif',				command : 'apage'			} );		//CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );		CKEDITOR.dialog.add( 'apage', function( editor )		{					return {				title : '文章分頁',				minWidth : 350,				minHeight : 100,				contents : [					{						id : 'tab1',						label : 'First Tab',						title : 'First Tab',						elements :						[							{								id : 'pagetitle',								type : 'text',								label : '請輸入下一頁文章標題<br />(不輸入默認使用當前標題+數(shù)字形式)'							}						]					}				],				onOk : function()					{						editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");					}			};		} );	}, 	requires : [ 'fakeobjects' ]} );

CKEditor 分頁插件2：直接插入分頁符

因為編輯器的默認轉(zhuǎn)碼，使用過程中需要將『page』中的『』去掉。

CKEDITOR.plugins.add( 'apage',{	var cmd = {		exec:function(editor){			editor.insertHtml("[[『page』]]");		}	}	init : function( editor )	{		// Add the link and unlink buttons.		editor.addCommand( 'apage', cmd );		editor.ui.addButton( 'Page',			{				//label : editor.lang.link.toolbar,				label : "Page",				//icon: 'images/anchor.gif',				command : 'apage'			} );			}, 	requires : [ 'fakeobjects' ]} );

注：相關(guān)教程知識閱讀請移步到編輯器頻道。

上一篇：CKEditor5 v10.0.1 發(fā)布，修復(fù)Link包重要安全漏洞

下一篇：CKEDITOR二次開發(fā)之插件開發(fā)方法