エディタに改行ボタンを追加する

HTMLJava-scriptワードプレス関数ファイルビジュアルエディタプラグイン改行管理画面

以前書いた記事「改行させたり、させなかったりする」の続き。

span制御は説明しにくい

<!-- html -->
<span class="block-pc">コンテンツ文章</span><span class="block-pc">コンテンツ文章</span>

/* CSS */
@media (min-width: 769px)	{
	.block-pc {
	  display: block;
	}
}

特定のクラス名を付けたspanで制御するのが誤動作もなく無難なのですが、

編集方法を説明するのがとてつもなく難しいです。

  1. PCで改行したい箇所で改行しておく。
  2. 1行ずつspanで囲む
  3. 改行を削除する
  4. PCのみの改行、それ以外での改行の違いを説明

これを図示するのが面倒。いっそのこと動画にしようかと思うくらい。

また、メディアクエリを3種類以上にすると、何が何だか分からなくなること間違いなし。

やっぱりbrにも対応しておこう

brで制御する場合、説明は簡単。

「PCで改行したいところでこのボタンを押す」

「小画面で改行したいところでこのボタンを押す」

 

ということで、独自ボタン追加。

ビジュアルエディタ

js

//editor-button.js
(function() {
tinymce.create( 'tinymce.plugins.original_tinymce_button', {
	init: function( ed, url ) {
		ed.addButton( 'br_pc', {
		title: 'PCのみ改行',
		image: url + '/br-pc.png',
		cmd: 'br_pc_cmd'
		});
		ed.addCommand( 'br_pc_cmd', function() {
			var selected_text = ed.selection.getContent(),
			return_text = '<br class="br-pc">';
			ed.execCommand( 'mceInsertContent', 0, return_text );
		});
		ed.addButton( 'br_m', {
		title: '小画面のみ改行',
		image: url + '/br-m.png',
		cmd: 'br_m_cmd'
		});
		ed.addCommand( 'br_m_cmd', function() {
			var selected_text = ed.selection.getContent(),
			return_text = '<br class="br-m">';
			ed.execCommand( 'mceInsertContent', 0, return_text );
		});
	},
	createControl : function( n, cm ) {
		return null;
	},
});
tinymce.PluginManager.add( 'original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button );
})();

動作自体はjsなので、ボタンの動作を作っておきます。

この例ではbrボタン2種。

ファイル配置は、「テーマ/js/」としています。

ボタン画像も同じディレクトリ。

functions.php

/* ---------- 呼び出し - ビジュアルエディタに独自ボタンを追加 ---------- */
add_filter( 'mce_external_plugins', 'add_original_tinymce_button_plugin' );
function add_original_tinymce_button_plugin( $plugin_array ) {
	$plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/js/editor-button.js';
	return $plugin_array;
}
add_filter( 'mce_buttons', 'add_original_tinymce_button' );
function add_original_tinymce_button( $buttons ) {
	$buttons[] = 'br_pc';
	$buttons[] = 'br_m';
	return $buttons;
}

参考 –

テキストモードにクイックタグを追加

functions.php

/* ---------- クイックタグを追加 ---------- */
function add_quicktags () {
	if( wp_script_is( 'quicktags' ) ) { ?>
		<script>
		QTags.addButton('br-pc', 'br-pc', '<br class="br-pc">', '', '', 'PCのみ改行', 1);
		QTags.addButton('br-m', 'br-m', '<br class="br-m">', '', '', '小画面のみ改行', 2);
		</script>";
<?php	}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );

こっちはとってもシンプル。いろいろ応用できそう。

参考 –

プラグインで追加

Visual Editor Custom Buttons

ビジュアルモード、テキストモード、両方にボタンを追加できます。

更新は2年前で止まっているけれど、特に問題なし。

AddQuicktag

こちらもビジュアルモード、テキストモード、両対応ですが、セレクト形式。

標準投稿と固定ページにしか対応していませんが、下記を参考にカスタム投稿に対応可。

誤動作するケース

探すと山のように出てくる「ビジュアルエディタでbrを勝手に消させない~」のような記事。functions.phpに書いたり、「TinyMCE Advanced」を入れたり。

table中の改行が消える現象に遭遇したことがあり、私も対策したことがありますが、今は解消されている模様。

これをやっていると、改行が複数挿入され、意図通りの見栄えになりません。

これはプラグインで実装しても同じこと。

また、関連項目のバージョンによって色々な動作をすることがあるようです。

 

この場合はやっぱりspanで対応するのが確実と思います。

折衷

spanはいろいろ手間、brは不安定、ということで、試用中の策。

あいうえお<span class="span-block-pc"></span>かきくけこ

こんな感じ。

/* ---------- クイックタグを追加 ---------- */
function add_quicktags () {
	if( wp_script_is( 'quicktags' ) ) { ?>
		<script>
		QTags.addButton('span-block-pc', 'span-block-pc', '<span class="span-block-pc"></span>', '', '', 'PCのみ改行', 3);
		QTags.addButton('span-block-m', 'span-block-m', '<span class="span-block-m"></span>', '', '', '小画面のみ改行', 3);
		</script>
<?php
	}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );

/* ---------- 空タグ消去を抑止 ---------- */
if ( ! function_exists('tinymce_init') ) {
	function tinymce_init( $init ) {
		$init['verify_html'] = false;
		$initArray['valid_children'] = '+body[style], +div[div|span|a], +span[span]';
		return $init;
	}
	add_filter( 'tiny_mce_before_init', 'tinymce_init', 100 );
}

※様子見なのでクイックタグしか書いてないです。

運用中のサイトに悪影響はないと思いますが、エクスポート、インポートをすると、消えちゃうかも。

また、空タグなので見た目悪いし、クラスが書いてあるだけで怒り出す人もいるし。

いまいちか。

 

参考 –