基于Ckeditor的表单设计器的开发（三）

最新推荐文章于 2024-08-13 08:13:25 发布

shan9liang

最新推荐文章于 2024-08-13 08:13:25 发布

阅读量4.4k

点赞数

分类专栏： Web前端 Web开发 Javascript Jquery

本文链接：https://blog.csdn.net/shan9liang/article/details/43237257

版权

本文介绍了如何基于CKeditor开发自定义插件，以创建表单设计器中的文本框组件为例。通过在plugins目录下新建相应文件并编写核心代码，实现了点击确定按钮插入文本框的功能。相关代码后续将开源，对于英文较好的读者，建议查阅CKeditor官方SDK样例文章以获取更多信息。

摘要由CSDN通过智能技术生成

前面基本环境都做得差不多了，这篇我们来介绍自定义插件的开发。

我们以"文本框“为例，

先来看效果：

点击确定，即可插入一个文本框

实现方式：

1、在ckeditor目录下 plugins文件夹下，新建如下结构：

plugin.js

CKEDITOR.plugins.add( 'ths_textfield', {
	icons: 'ths_textfield',
	init: function( editor ) {   //初始化
		var pluginName = 'ths_textfield'; //控件名称
		editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName ) ); //给编辑器注册一个打开弹出窗命令
               
		editor.ui.addButton(pluginName, {  //在工具栏上增加一个按钮，绑定按钮事件
			label: '单行文本框',
			command: pluginName
		});
	
		if ( editor.contextMenu ) {  //为文本框加右键属性菜单
			editor.addMenuGroup( 'textFieldGroup' );
		     editor.addMenuItem( 'textFieldItem', {
			        label: '文本框属性',
			        command:pluginName,
			        group: 'textFieldGroup'
			    });
		      //右键菜单的监听器，判断是否显示菜单	    
		      editor.contextMenu.addListener( function( element ) {
			    	if ( element && !element.isReadOnly() ) {
						var name = element.getName();
						if ( name == 'input' ) {
							var type = element.getAttribute( 'type' ) || 'text';
							if ( type=='text' ){
								   return { textFieldItem: CKEDITOR.TRISTATE_OFF };
							}
						}
					}
			    });
		}
                //增加弹出窗
		CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/'+pluginName+'.js' );
		//为文本框双击事件绑定一个事件，即显示弹出窗
		editor.on( 'doubleclick', function( evt ) {
			var element = evt.data.element;
			
			 if ( element.is( 'input' ) ) {
					var type = element.getAttribute( 'type' ) || 'text';
					if ( type=='text' ){
						evt.data.dialog =pluginName;
					}
			}
		})
		
	}
});

代码不过多解释，请看注释
不喜欢讲代码，大家结合文档看注释

ths_textfield.js