[CKEditor]table插件扩展

功能描述:

     原添加表格按钮,改为弹出面板选择式,同word里的插入表格,可通过移动鼠标选择要插入的表行列,原来的功能通过点击表格属性调用.

 

效果截图:

 

 

代码:

CKEDITOR.plugins.add( 'table',
{
	init : function( editor )
	{
		var table = CKEDITOR.plugins.table,
			lang = editor.lang.table;
		var PANELTABLEROW=5;
		var PANELTABLECOL=8;
		var regSate=0;
		editor.addCommand( 'table', new CKEDITOR.dialogCommand( 'table' ) );
		editor.addCommand( 'tableProperties', new CKEDITOR.dialogCommand( 'tableProperties' ) );
		//原table插件使用按钮
		/*editor.ui.addButton( 'Table',
			{
				label : lang.toolbar,
				command : 'table'
			});*/

		//弹出层试按钮
		editor.ui.add( 'Table', CKEDITOR.UI_PANELBUTTON,{
					label : lang.toolbar,
					className : 'cke_button_table',
					modes : { wysiwyg : 1 },

					panel :
					{
						css : editor.skin.editor.css,
						attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }
					},

					onBlock : function( panel, block )
					{
						block.autoSize = true;
						block.element.setHtml(renderTablePanel(panel));
						block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );
					},

				});

		CKEDITOR.dialog.add( 'table', this.path + 'dialogs/table.js' );
		CKEDITOR.dialog.add( 'tableProperties', this.path + 'dialogs/table.js' );
		
		function renderTablePanel(panel){
			var output = [];
			//弹出层事件
			var fn1 = CKEDITOR.tools.addFunction(function(e){
				var e=e||window.event;
				var target=e.srcElement||e.target;
				var colIdx=target.cellIndex,rowIdx=target.parentNode.rowIndex,table=target.parentNode.parentNode;
				if(table.rows){
					for(var i=0;i');
			for(var i=0;i");
				for(var j=0;j ');
				}
				output.push("");
			}
			output.push('');
			output.push("");
			output.push("");
			output.push("");
			return output.join("");
		}

		var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };
		//插入基本参数表格
		function insertTable(rows,cols){
			var selection = editor.getSelection();
			var table = makeElement( 'table' );
			var tbody = table.append( makeElement( 'tbody' ) ),
			rows = parseInt( rows, 10 ) || 0,
			cols = parseInt( cols, 10 ) || 0;
			for ( var i = 0 ; i < rows ; i++ ){
				var row = tbody.append( makeElement( 'tr' ) );
				for ( var j = 0 ; j < cols ; j++ ){
					var cell = row.append( makeElement( 'td' ) );
					if ( !CKEDITOR.env.ie )
						cell.append( makeElement( 'br' ) );
				}
			}
			table.setAttribute( 'cellSpacing', 1 );
			table.setAttribute( 'cellpadding', 1 );
			table.setAttribute( 'border', 1 );
			table.setAttribute( 'style', "width: 200px;" );
			editor.insertElement( table );
		}
		// If the "menu" plugin is loaded, register the menu items.
		if ( editor.addMenuItems )
		{
			editor.addMenuItems(
				{
					table :
					{
						label : lang.menu,
						command : 'tableProperties',
						group : 'table',
						order : 5
					},

					tabledelete :
					{
						label : lang.deleteTable,
						command : 'tableDelete',
						group : 'table',
						order : 1
					}
				} );
		}

		editor.on( 'doubleclick', function( evt )
			{
				var element = evt.data.element;

				if ( element.is( 'table' ) )
					evt.data.dialog = 'tableProperties';
			});

		// If the "contextmenu" plugin is loaded, register the listeners.
		if ( editor.contextMenu )
		{
			editor.contextMenu.addListener( function( element, selection )
				{
					if ( !element )
						return null;

					var isTable	= element.is( 'table' ) || element.hasAscendant( 'table' );

					if ( isTable )
					{
						return {
							tabledelete : CKEDITOR.TRISTATE_OFF,
							table : CKEDITOR.TRISTATE_OFF
						};
					}

					return null;
				} );
		}
	}
} );

 

使用:

     覆盖plugins\table\plugin.js