ビジュアルエディタで文頭のスペースが消える現象を回避

6222 ワード
WordPress WordPress テキストリンク

WordPress旧エディタのテキストエディタとビジュアルエディタを行き来していると、文頭の全角スペースが自動整形処理により除去される。

これを回避する方法を調べると、プラグインTinyMCE Advancedを使う（≒wpautopを無効化する）方法がよく出てくるが、この場合、自動整形全体が無効化されるため、例えば、テキストエディタに本来は表示されないpタグやbrタグが表示されることになる。

文頭にインデントを付けるだけであればCSSで対処すべきだが、どうしても自動整形処理で対応したい場合の方法を紹介する。

解決法

以下、WordPressのバージョン4.9.16でのみ動作確認している。

functions.php
<?php
function editor_keep_space() {
    wp_enqueue_script('editor_keep_space_script', get_template_directory_uri() . '/js/editor_keep_space.js');
}
add_action('admin_head-post-new.php', 'editor_keep_space');
add_action('admin_head-post.php', 'editor_keep_space');

functions.phpでは、記事編集時にeditor_keep_space.jsが読み込まれるよう設定する。

editor_keep_space.js
(function($){
    if($) {
        $('body').on('beforePreWpautop', function(_, obj) {
            if(!obj || !obj.data) {
                return;
            }
            var html = obj.data;

            // 属性等無しのpタグ直後の空白を保持
            html = html.replace( /<p>(\s+)/gi, '<p><pre#>$1</pre#>' );

            obj.data = html;
        })

        $('body').on('afterPreWpautop', function(_, obj) {
            if(!obj || !obj.data) {
                return;
            }
            var html = obj.data;

            // beforePreWpautopで保持した空白保護用のタグを除去
            html = html.replace( /<pre#>(\s+)<\/pre#>/gi, '$1' );

            obj.data = html;
        })
    }
})(window.jQuery);

editor_keep_space.jsは、wp-admin/js/editor.jsで定義される関数wp.editor.removepにおいてタグ除去の前後にトリガーされるイベントを使い、文頭のスペースが除去対象とならないよう退避させるものである。

あとがき

文頭のスペースに限らず、テキストエディタとビジュアルエディタを行き来する際の整形を部分的に無効化したい場合は、同様の手段が有効と思われる。

一般化テーブルに基づいてツリーを構築する
***