[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<table.rows.length;i++){
						for(var j=0;j<table.rows[i].cells.length;j++){
							var cell=table.rows[i].cells[j];
							if(j<=colIdx&&i<=rowIdx){
								cell.style.background="#316AC5";
							}else{
								cell.style.background="";
							}
						}
					}
				}
			});
			var fn2= CKEDITOR.tools.addFunction(function(e){
				var e=e||window.event;
				var target=e.srcElement||e.target;
				var colIdx=target.cellIndex+1,rowIdx=target.parentNode.rowIndex+1;
				insertTable(rowIdx,colIdx);
				panel.hide();
			});
			//弹出层内容2010-9-7
			output.push('<table οnmοusemοve="CKEDITOR.tools.callFunction(', fn1, ',event);" border="1" id="select_table_panel" unselectable="on" onselectstart="return false" style="line-height:10px;cursor:pointer;width:100%;width:132px;margin-left:4px">');
			for(var i=0;i<PANELTABLEROW;i++){
				output.push("<tr>");
				for(var j=0;j<PANELTABLECOL;j++){
					output.push('<td style="width:10px" οnclick="CKEDITOR.tools.callFunction(', fn2, ',event);">&nbsp;</td>');
				}
				output.push("</tr>");
			}
			output.push('</table>');
			output.push("<span style='width:100%; display:block; clear:both;'>");
			output.push("<input type='button' value='"+lang.title+"' οnclick='CKEDITOR.instances."+editor.name+".execCommand( \"table\" );' style='width:100%; height:25px; overflow:hidden; border:1px solid #316ac5;background:#dff1ff;cursor:pointer;'/>");
			output.push("</span>");
			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