[WordPress] エディタ（TinyMCE）の自動整形をカスタマイズする

自動整形のどこに問題点があるか

例えば、DWなどで作成したHTMLソースをHTMLエディタにそのまま貼り付けて記事を作成することがある（僕はないけど）。その場合、一度ビジュアルエディタに切り替えてまたすぐHTMLエディタに戻すとと が消去されている。つってもthe_content()で返っくるソースにはちゃんとも も挿入されてんだし、むしろHTMLエディタで編集中の場合にもっともよく使うと を入力しなくても済むんだから楽だなくらいに思ってました。
ところがちゃんと検証してみたら大きな欠陥があったんです。

まず、HTMLエディタに以下のソースを入れたとします。

<p>それには及びません。<br />
私は罪な男です。</p>

そしてビジュアルエディタに切り替えると、

それには及びません。

私は罪な男です。

「ん？？」
これはおかしい。HTMLエディタに戻してみると、

<p>それには及びません。</p>
<p>私は罪な男です。</p>

なぜか2行ともで括られてしまっている。
これは直さねばっつーわけで、その方法を記録しておく。
それと今回はと の除去も止めさせます。やっぱり始めてWordPressを使う人を混乱させるだけなんで。

editor.jsをハックする

wp-admin/js/editor.jsがエディタ切り替え時の自動整形を行なっているんで、これを改良するわけですが、コアファイルを直接弄るわけにはいかないので、このeditor.jsを停止させ、改良したコピーを読み込んでもらいます。コピーしたeditor.jsはテーマディレクトリに置きました。

wp_deregister_script( 'editor' );
wp_enqueue_script( 'editor', get_bloginfo( 'template_directory' ) . '/editor.js' );

これをfunctions.phpに書きます。
※たぶん他のハンドルも同じ要領でいけます。
http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress

以下、改良後のソースです。（わかりやすく改行しています）

var switchEditors = {
	switchto:function(b) {
		var c = b.id, a = c.length, e = c.substr(0, a - 5), d = c.substr(a - 4);
		this.go(e, d);
	},
	go:function(g, f) {
		g = g || "content";
		f = f || "toggle";
		var c = this, b = tinyMCE.get(g), a, d, e = tinymce.DOM;
		a = "wp-" + g + "-wrap";
		d = e.get(g);
		if ("toggle" == f) {
			if (b&&!b.isHidden()) {
				f = "html";
			} else {
				f = "tmce";
			}
		}
		if ("tmce" == f || "tinymce" == f) {
			if (b&&!b.isHidden()) {
				return false;
			}
			if (typeof(QTags) != "undefined") {
				QTags.closeAllTags(g);
			}
			if (tinyMCEPreInit.mceInit[g] && tinyMCEPreInit.mceInit[g].wpautop) {
				d.value = c.wpautop(d.value);
			}
			if (b) {
				b.show();
			} else {
				b = new tinymce.Editor(g, tinyMCEPreInit.mceInit[g]);
				b.render();
			}
			e.removeClass(a, "html-active");
			e.addClass(a, "tmce-active");
			setUserSetting("editor", "tinymce");
		} else {
			if ("html" == f) {
				if (b&&b.isHidden()) {
					return false;
				}
				if (b) {
					d.style.height = b.getContentAreaContainer().offsetHeight + 20 + "px";
					b.hide();
				}
				e.removeClass(a, "tmce-active");
				e.addClass(a, "html-active");
				setUserSetting("editor", "html");
			}
		}
		return false;
	},
	_wp_Nop:function(b) {
		var c, a;

		if (b.indexOf("<pre") != -1 || b.indexOf("<script") != -1) {
			b = b.replace(/<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function(d) {
				d = d.replace(/<br ?\/?>(\r\n|\n)?/g, "<wp_temp>");
				return d.replace(/<\/?p( [^>]*)?>(\r\n|\n)?/g, "<wp_temp>");
			});
		}

		c = "blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|div|h[1-6]|p|fieldset";

		b = b.replace(new RegExp("\\s*</("+c+")>\\s*", "g"), "</$1>\n");
		b = b.replace(new RegExp("\\s*<((?:"+c+")(?: [^>]*)?)>", "g"), "\n<$1>");
		b = b.replace(/(<p [^>]+>.*?)<\/p>/g, "$1</p#>");

		/*<p>は消したくないのでコメントアウト*/
		//b = b.replace(/<div( [^>]*)?>\s*<p>/gi, "<div$1>\n\n");
		//b = b.replace(/\s*<p>/gi, "");
		//b = b.replace(/\s*<\/p>\s*/gi, "\n\n");

		b = b.replace(/\n[\s\u00a0]+\n/g, "\n\n");

		/*<br />も消したくないのでコメントアウト*/
		//b = b.replace(/\s*<br ?\/?>\s*/gi, "\n");

			/*<br />の後に改行を入れる*/
			b = b.replace(/\s*<br ?\/?>\s*/gi, "<br />\n");

			/*<iframe>を括る<p>と<br />は除去*/
			b = b.replace(/<p>\s*<iframe( [^>]*)?>/gi, "<iframe$1>");
			b = b.replace(/<\/iframe>\s*(<\/p>|<br \/>)/gi, "</iframe>");

		b = b.replace(/\s*<div/g, "\n<div");
		b = b.replace(/<\/div>\s*/g, "</div>\n");
		/* この行は省略します。 */
		/* この行は省略します。 */
		a = "blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|h[1-6]|pre|fieldset";
		b = b.replace(new RegExp("\\s*<((?:"+a+")(?: [^>]*)?)\\s*>", "g"), "\n<$1>");
		b = b.replace(new RegExp("\\s*</("+a+")>\\s*", "g"), "</$1>\n");
		b = b.replace(/<li([^>]*)>/g, "\t<li$1>");

		if (b.indexOf("<hr") != -1) {
			b = b.replace(/\s*<hr( [^>]*)?>\s*/g, "\n\n<hr$1>\n\n");
		}

		if (b.indexOf("<object") != -1) {
			b = b.replace(/<object[\s\S]+?<\/object>/g, function(d) {
				return d.replace(/[\r\n]+/g, "");
			});
		}

		b = b.replace(/<\/p#>/g, "</p>\n");
		b = b.replace(/\s*(<p [^>]+>[\s\S]*?<\/p>)/g, "\n$1");
		b = b.replace(/^\s+/, "");
		b = b.replace(/[\s\u00a0]+$/, "");
		b = b.replace(/<wp_temp>/g, "\n");

		return b;
	},
	_wp_Autop:function(a) {
		var b = "table|thead|tfoot|tbody|tr|td|th|caption|col|colgroup|div|dl|dd|dt|ul|ol|li|pre|select|form|blockquote|address|math|p|h[1-6]|fieldset|legend|hr|noscript|menu|samp|header|footer|article|section|hgroup|nav|aside|details|summary";

		if (a.indexOf("<object") != -1) {
			a = a.replace(/<object[\s\S]+?<\/object>/g, function(c){return c.replace(/[\r\n]+/g, "")});
		}

		a = a.replace(/<[^<>]+>/g, function(c){return c.replace(/[\r\n]+/g, " ")});

		if (a.indexOf("<pre") != -1||a.indexOf("<script") != -1) {
			a = a.replace(/<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function(c) {
				return c.replace(/(\r\n|\n)/g, "<wp_temp_br>");
			});
		}

		a = a + "\n\n";
		a = a.replace(/<br \/>\s*<br \/>/gi, "\n\n");
		a = a.replace(new RegExp("(<(?:"+b+")(?: [^>]*)?>)", "gi"), "\n$1");
		a = a.replace(new RegExp("(</(?:"+b+")>)", "gi"), "$1\n\n");
		a = a.replace(/<hr( [^>]*)?>/gi, "<hr$1>\n\n");
		a = a.replace(/\r\n|\r/g, "\n");
		a = a.replace(/\n\s*\n+/g, "\n\n");
		a = a.replace(/([\s\S]+?)\n\n/g, "<p>$1</p>\n");
		a = a.replace(/<p>\s*?<\/p>/gi, "");
		a = a.replace(new RegExp("<p>\\s*(</?(?:"+b+")(?: [^>]*)?>)\\s*</p>", "gi"), "$1");
		a = a.replace(/<p>(<li.+?)<\/p>/gi, "$1");
		a = a.replace(/<p>\s*<blockquote([^>]*)>/gi, "<blockquote$1><p>");
		a = a.replace(/<\/blockquote>\s*<\/p>/gi, "</p></blockquote>");
		a = a.replace(new RegExp("<p>\\s*(</?(?:"+b+")(?: [^>]*)?>)", "gi"), "$1");
		a = a.replace(new RegExp("(</?(?:"+b+")(?: [^>]*)?>)\\s*</p>", "gi"), "$1");
		a = a.replace(/\s*\n/gi, "<br />\n");

			/*↑で余計についた<br />を削除*/
			a = a.replace(/<br ?\/?><br ?\/?>\n/gi, "<br />\n");

		a = a.replace(new RegExp("(</?(?:"+b+")[^>]*>)\\s*<br />", "gi"), "$1");
		a = a.replace(/<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, "$1");
		/* この行は省略します。 */
		a = a.replace(/(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function(e, d,f){if (f.match(/<p( [^>]*)?>/)){return e}return d+"<p>"+f+"</p>"});
		a = a.replace(/<wp_temp_br>/g, "\n");

		return a;
	},
	pre_wpautop:function(b) {
		var a = this, d = {o:a, data:b, unfiltered:b}, c = typeof(jQuery) != "undefined";
		if (c) {
			jQuery("body").trigger("beforePreWpautop", [d]);
		}
		d.data = a._wp_Nop(d.data);
		if (c) {
			jQuery("body").trigger("afterPreWpautop", [d]);
		}
		return d.data
	},
	wpautop:function(b) {
		var a = this, d = {o:a, data:b, unfiltered:b}, c = typeof(jQuery) != "undefined";
		if (c) {
			jQuery("body").trigger("beforeWpautop", [d]);
		}
		d.data = a._wp_Autop(d.data);
		if (c) {
			jQuery("body").trigger("afterWpautop", [d]);
		}
		return d.data;
	}
};

_wp_Autopの方はHTML→ビジュアル切り替え時に。
_wp_Nopの方はビジュアル→HTML及び、保存時のスクリプトです。

まず、HTMLに切り替えた時に消されてしまうと を保護します。以下４文をコメントアウトします。（71～73、78行目）

//b = b.replace(/<div( [^>]*)?>\s*<p>/gi, "<div$1>\n\n");
//b = b.replace(/\s*<p>/gi, "");
//b = b.replace(/\s*<\/p>\s*/gi, "\n\n");
//b = b.replace(/\s*<br ?\/?>\s*/gi, "\n");

コードを見やすくするために の後に改行が欲しいので以下を追記します。（81行目）

b = b.replace(/\s*<br ?\/?>\s*/gi, "<br />\n");

先のコードでと を救ってしまったがために、<iframe></iframe>を括ったや が残ってしまうので、これを除去します。

b = b.replace(/<p>\s*<iframe( [^>]*)?>/gi, "<iframe$1>");
b = b.replace(/<\/iframe>\s*(<\/p>|<br \/>)/gi, "</iframe>");

次に、ビジュアルエディタに切り替えた時にすべての改行コードが に置き換えられてしまうところをカバーしてあげます。（147行目）

a = a.replace(/<br ?\/?><br ?\/?>\n/gi, "<br />\n");

以上です。

「この行は省略します」が3箇所ありますが、これらにはcaptionタグに関するコードが書かれています。エディタが見事に置き換えてしまうので省略しています。
故に、コードをそのままコピペしても動作しません。
そしてこれはあくまで僕の場合なので参考程度にしてください。
※バージョン3.4.1で確認しています。

2012/08/05　加筆。