C'est La Vie

    人生无彩排,每一天都是现场直播!

    CKEditor插件开发

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

    最近手头项目用到了富文本编辑器,而且要自己开发一些编辑器的插件,于是便直接使用了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'],
    		],
    } );

    发表回复

    您的电子邮箱地址不会被公开。