【WP】CKEditorの表のプロパティのカスタマイズ方法

CKEditorの表(table)は、簡単に表を作成できてとても便利なのですが、デフォルトでは、ほぼ不要な「セル内余白、セル内間隔、枠線の幅」が「1」になており、消す作業が面倒です。
また、幅も通常スタイルシートで100%にしているので、デフォルトで500が入っているのも不要です。
そして高さもほぼ使用しないので不要だったりします。

これらの要素を削除して、スッキリシンプルにするカスタマイズ方法をメモしておきます。

したいこと

WordPressのCKEditorの表のプロパティを以下のようにしたい。

  • 「セル内余白、セル内間隔、枠線の幅、行揃え、キャプション、高さ」を削除したい
  • 「幅」を空欄にしたい(500を削除したい)

カスタマイズ前の表のプロパティ

ckeditorの表プロパティ(カスタマイズ前)

挿入ソース

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">

カスタマイズ後の表のプロパティ

ckeditorの表プロパティ(カスタマイズ後)

挿入ソース

<table>

カスタマイズ方法

  1. WP管理画面のサイドメニュー「CKEditor」より「File Editor」をクリック。
  2. 「ckeditor.config.js」を表示し、「CKEDITOR.editorConfig = function(config) {}」内に以下のコードをコピーペースとして「Update File」をクリック。

「ckeditor.config.js」の「CKEDITOR.editorConfig = function(config) {}」内に追記

CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

if ( dialogName == 'table' ) {
	var infoTab = dialogDefinition.getContents( 'info' );
	
	// 幅の値を空白にする設定
	txtWidth = infoTab.get( 'txtWidth' );
	txtWidth['default'] = '';
	
	infoTab.remove('txtHeight');		//「高さ」を削除
	infoTab.remove('txtCellSpace');		//「セル内余白」を削除
	infoTab.remove('txtCellPad');		//「セル内間隔」を削除
	infoTab.remove('txtBorder');		//「枠線の幅」を削除
	infoTab.remove( 'cmbAlign');		//「行揃え」を削除
	infoTab.remove( 'txtCaption');		//「キャプション」を削除
	}
}) ;

コメント

タイトルとURLをコピーしました