Aut Nihilo

CKEditor插件开发

• hliang
• 0
• Posted on 2012年4月25日

最近手头项目用到了富文本编辑器，而且要自己开发一些编辑器的插件，于是便直接使用了CKEditor。

CKEditor是目前能见到的比较灵活的WYSIWYG编辑器之一，在CKEditor上做扩展非常容易，而且界面的一致性也能得到很好的保证。

这里简单的把插件开发过程记录下来，留个存档，供以后需要之时翻来查用。

在插件目录plugin下建立自己的插件目录“myplugin”。

建立plugin.js，文件内容如下：

CKEDITOR.plugins.add('myplugin', {
	 requires: ['dialog'],
	 init: function(editor) {
		// 插件标识
		var pluginName = 'myplugin';
		// 启用对话框
		var dialog = editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
		CKEDITOR.dialog.add(pluginName, CKEDITOR.plugins.getPath(pluginName) + myplugin + '.js');
		editor.ui.addButton('uploadpic', {
			// 插件名称
			label: '我的插件',
			command: pluginName,
			// 设置工具栏按钮图片
			icon: CKEDITOR.plugins.getPath(pluginName) + myplugin + '.png',
		});
	}
});

建立myplugin.js，文件内容如下：

CKEDITOR.dialog.add('myplugin', function(editor){
	var escape = function(value){
		return value;
	};
	return {
		// 弹窗标题
		title: '我的插件',
		// 是否可以调整大小
		resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
		// 弹窗宽
		minWidth: 500,
		// 弹窗高
		minHeight: 300,
		// 弹窗内容
		contents: [
			{
				// 定义标签一
				id: 'localpic',
				'label': '标签页一',
				elements: [
					{
						type: 'file',
						label: '选择文件',
						id: 'localfile',
						required: true,
					},
					{
						type: 'button',
						label: '按钮',
						id: 'upload',
						required: true,
					},
				],
			},
			{
				// 定义标签二
				id: 'photopic',
				'label': '标签页二',
				elements: [
					{
						type: 'html',
						html: '
HTML页面代码，显示富文本及自定义内容
',
					},
				],
			}
		],
		onOk: function(){
			code = this.getValueOf('cb', 'code');
			lang = this.getValueOf('cb', 'lang');
			html = '' + escape(code) + '';
			// 将内容回写到编辑器
			editor.insertHtml("
" + html + "
");
		},
		onLoad: function(){
		}
	};
});

放置图标文件，图标文件名为myplugin.png，和两个JS文件放在同级目录。图片大小为16X16像素。

修改显示页面CKEDITOR对应配置

var content = CKEDITOR.replace( 'content',
	{
		// 启用插件
		extraPlugins : 'myplugin',
		toolbar :
		[
			['Bold', 'Italic','Underline'],
			['TextColor', 'BGColor'],
			['Font', 'FontSize'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			'/',
			['NumberedList','BulletedList'],
			['Smiley'],
			['Link', 'Unlink'],
			['Table'],
			['RemoveFormat'],
			// 在工具栏上显示插件按钮
			['myplugin'],
		],
} );