wysisygにクイックタグを追加したい

解決済 d.w.c
(@dwc-1)

9年前
ACFプラグインを使用して、ログイン者はフロント側から記事の編集をできるようにしています。
入力項目にwysiwygのテキストエディタを使用しているのですが、ここにクイックタグを追加したいです。

ACFのサイトでwysiwyg_quicktags_settings
（https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/）
というのを見つけたのですが、下記のようにfunctions.phpに書くので合っていますか？

—
```
function my_acf_input_admin_footer() {

?>
<script type="text/javascript">
(function($) {

acf.add_filter('wysiwyg_quicktags_settings', function( qtInit, id ){

// do something to qtInit

// return
return qtInit;

});

})(jQuery);
</script>
<?php

}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');
```
—

ここまでは何とかたどり着けたのですが、
// do something to qtInit
の部分にどう書いたらクイックタグが追加できるのかわかりません。
最終的には英語で本家サイトに質問するしかないかもしれませんが、書くのも読むのもかなりハードルが高いので日本語で教えていただける方がいるととても助かります。

よろしくお願いします。

12件の返信を表示中 - 1 - 12件目 (全12件中)

トピック投稿者 d.w.c
(@dwc-1)

9年前

解決は難しいですかね・・・？

x743
(@x743)

9年前

知恵袋にも同様の質問があるようですが…

とりあえず『AddQuicktag』というプラグインを試してみてはいかがでしょうか。

どのようなタグを追加するのかは分かりませんが、このプラグインで概ね対応できるかと思います。

oisit
(@oisit)

9年前

マルチはやっめ説いた方がいいと思いますよ。

まあクイックタグとか新しい知識が増えたので。
クイックタグAPI
引数どうするかわかりませんけどね。

ところでAddQuicktagはACFのエディタにも適用可能なんでしょうか。

トピック投稿者 d.w.c
(@dwc-1)

9年前

プラグインのAddQuicktagは試したんですが、これはウィジウィグは適用外でした。
追加したいのはオリジナルで作成したショートコードを自動挿入してくれるクイックタグです。

OKwaveにしばらく掲載していて何も回答がなかったので、こちらにも投稿しました。
こちらで回答が得られた場合はOKwaveの方の投稿は削除予定です。
逆に向こうで回答が得られた場合はこちらにその解答及びリンクを張る予定です。

なにしろ提案すら全くないので・・・
とりあえず同じサイト内でのマルチ投稿じゃなければいいかと思ったんですが、駄目でしょうか？

クイックタグＡＰＩというのを見てちょっといじってみます。

トピック投稿者 d.w.c
(@dwc-1)

9年前

調べて気づいたことがあるので追記します。

QTags.addButton　を使ってクイックタグを追加すること自体はできました。
ただ、これはダッシュボードに入って記事作成する場合のみに適用されて、フロント側の編集時にはこの時追加したクイックタグは反映されていませんでした。

munyagu
(@munyagu)

9年前

こんにちは

それらはバージョン5からの機能ですね。
https://www.advancedcustomfields.com/resources/whats-new-version-5/

現在リリースされているフリーの最新版は4.4.11です。
PRO版はバージョン5が出ているので、PRO版を購入してインストールすれば動くかと思いますが・・・
x743
(@x743)

9年前
すみません、一つ確認なのですが『wysiwygのテキストエディタ』とは『ビジュアル』『テキスト』のタブで切り替えるようなエディタのことでしょうか。

ACF | Wysiwyg Editor

ACFのWysiwygエディタはタブなしのエディタなので、通常は同じ作者が公開している、

ACF { WordPress WYSIWYG Field

を利用するとWordpressと同じ切り替えタブ付きのエディタを使うことができます。

『ビジュアル』と『テキスト』ではボタンの追加の仕方が違うので、クイックタグは『ビジュアル』モードでは使えません。

一応、上記アドオンを追加してWordpressのエディタにすれば、『QTags.addButton』も機能すると思うのですが…

『フロント側』というのがどういったものなのか分かりませんが、Wysiwygエディタが使えているのなら、エディタの初期化後に『QTags.addButton』が実行されているか調べると良いかもしれません。

———-

マルチポストについては判断が難しいですね…
特にクイックタグは以前調べたときは日本語の情報が少なかったので、結局Wordpressやプラグインのソースをあたった記憶があります。
- この返信は9年前にx743が編集しました。
トピック投稿者 d.w.c
(@dwc-1)

9年前
ACFはPRO版を使用しています。
これのウィジウィグにはテキスト/ビジュアルのタブが選択可能ですが、使用環境ではテキストオンリーに設定して実装する予定です。

ダッシュボードからアクセスした場合にはクイックタグは使用できるので、フロント側での編集時にも表示できるようにしたいだけなんですけど・・・なぜかうまくいきません。

フロント側での編集というのは、
「Advanced Custom Fieldでフロントエンドの投稿フォームを作る方法」
（http://qiita.com/webpicker/items/0d0769e744af62e927eb）
こういうやつです。

ちなみにプラグインの中身のwysiwyg.phpファイルの中に
```
	/*
	*  get_toolbars
	*
	*  This function will return an array of toolbars for the WYSIWYG field
	*
	*  @type	function
	*  @date	18/04/2014
	*  @since	5.0.0
	*
	*  @param	n/a
	*  @return	(array)
	*/
	
   	function get_toolbars() {
   		
   		// global
   		global $wp_version;
   		
   		
   		// vars
   		$toolbars = array();
   		$editor_id = 'acf_content';
   		
   		
   		if( version_compare($wp_version, '3.9', '>=' ) ) {
   		
   			// Full
	   		$toolbars['Full'] = array(
	   			
	   			1 => apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id),
	   			
	   			2 => apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'alignjustify', 'forecolor', 'pastetext', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ), $editor_id),
	   			
	   			3 => apply_filters('mce_buttons_3', array(), $editor_id),
	   			
	   			4 => apply_filters('mce_buttons_4', array(), $editor_id),
	   			
	   		);
	   		
	   		
	   		// Basic
	   		$toolbars['Basic'] = array(
	   			
	   			1 => apply_filters('teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id),
	   			
	   		);
	   		  		
   		} else {
	   		
	   		// Full
	   		$toolbars['Full'] = array(
	   			
	   			1 => apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id),
	   			
	   			2 => apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'justifyfull', 'forecolor', 'pastetext', 'pasteword', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ), $editor_id),
	   			
	   			3 => apply_filters('mce_buttons_3', array(), $editor_id),
	   			
	   			4 => apply_filters('mce_buttons_4', array(), $editor_id),
	   			
	   		);

	   		
	   		// Basic
	   		$toolbars['Basic'] = array(
	   			
	   			1 => apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id ),
	   			
	   		);
	   		
   		}
   		
   		
   		// Filter for 3rd party
   		$toolbars = apply_filters( 'acf/fields/wysiwyg/toolbars', $toolbars );
   		
   		
   		// return
	   	return $toolbars;
	   	
   	}
```
というのを見つけ、$toolbars[‘Full’] と$toolbars[‘Basic’] の中の’bold’を試しに全部削除してみましたが、ビジュアルモードの太字クイックタグは消せましたが、テキストモードのクイックタグはなぜか消えませんでした。
- この返信は9年前にd.w.cが編集しました。
munyagu
(@munyagu)

9年前

すいません、こちらではPRO版を購入してテストすることはできないため、回答することができません・・・
トピック投稿者 d.w.c
(@dwc-1)

9年前
>munyaguさん
調べようとしてくださり、ありがとうございます。
x743さんのおっしゃるように、フリー版にウィジウィグのアドオンを追加して使用するっていうのも無理でしょうか・・・？

「カスタムフィールドでビジュアルエディタとテキストエディタを使う」
（http://notes25.net/wordpress/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%A7%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%A8%E3%83%86%E3%82%AD/）

もし有料版でしか動作確認できないようであれば、回答を日本語で得るのは絶望的になりますね・・・orz
- この返信は9年前にd.w.cが編集しました。
- この返信は9年前にd.w.cが編集しました。
トピック投稿者 d.w.c
(@dwc-1)

8年、 8ヶ月前
ずいぶん経ちましたが、Google翻訳で頑張ってみたところ、ACFのメールサポートにより解決しました。
```
function appthemes_add_quicktags_both() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_hr', '水平線', '<hr>', '', false, 'hr', '1' );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags_both' ); //管理画面で使用
add_action( 'wp_print_footer_scripts', 'appthemes_add_quicktags_both' );    //フロントエンドで使用
```
フロントエンド側にフックできていなかったのが原因でした。
トピック投稿者 d.w.c
(@dwc-1)

8年、 8ヶ月前

ついでに「Visual Editor Custom Buttons」というプラグインを使用したらフロントエンドのビジュアルモードでもクイックタグ的なことができたので、記録のために残します。

「Visual Editor Custom Buttons」を有効化しただけではフロントエンドでは表示されないので、
functions.phpに
add_action('init', 'vecb_add_buttons');
を追記することで、ビジュアルモードのフロントエンドでの表示が有効化されました。
このプラグインは自作のアイコンを作ってボタンとして配置できるので、ビジュアルモードでの表示はaddQuicktagより好きです。（表示順をいじれないのが玉に瑕ですが）

このプラグインでテキストモードのクイックタグも同時に作れますが、表示順をいじれないので自分は使ってません。
もし表示順にこだわらず、このプラグインを利用してテキストモードにもクイックタグを表示するのであれば
add_action('wp_print_footer_scripts', '_add_my_quicktags');
の追記も必要です。

テキストモードに勝手に追加される「Link Tag」のボタンが目障りで消したければ、Visual Editor Custom Buttons.php 1087行目あたりのQTags.addButtonをコメントアウトすれば消せますが、まあこれはプラグインの更新が入ればすぐにまた表示されちゃいそうですね。