管理画面から追加したメタデータをビジュアルエディタのショートコード埋め込みボタンに反映したい

Question

前提・実現したいこと

ビジュアルエディタでショートコードを埋め込める機能を実装しています。

ユーザー機能をカスタマイズし、管理画面からメタデータの項目を追加できるようにしました。
ここで追加されたユーザーのメタデータを、ショートコードに反映したいと考えています。

例えば、「開発環境」という項目や、「会社名」という項目が追加された場合、
ショートコードの埋め込みボタンには、custom0,custom1が埋め込めるようにしたい。

発生している問題・エラーメッセージ

もともとWordPressにある項目については、決め打ちで指定するだけでよかったのですが、
自由項目を追加した場合の対応で詰まってしまいました。

該当のソースコード

　
tinymce.js　

tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
  editor.addButton( 'my_mce_button', {
    text: 'ショートコード埋め込み',
    icon: false,
    type: 'menubutton',
    menu: [
      {
        text: 'ユーザー名',
        onclick: function() {
          var selected_text = editor.selection.getContent();
          var return_text = '';
          return_text = '[nickname]';
          editor.insertContent(return_text);
        }
      },
      {
        text: '姓',
        onclick: function() {
          var selected_text = editor.selection.getContent();
          var return_text = '';
          return_text = '[last_name]';
          editor.insertContent(return_text);
        }
      },
    ]
  });
});

functions.php

function custom_mce_external_plugins( $plugin_array ) {
  $plugin_array['custom_button_script'] = get_template_directory_uri() . "/ex/assets/tinymce.js";
  return $plugin_array;
}
add_filter( 'mce_external_plugins', 'custom_mce_external_plugins' );

function my_add_mce_button() {
  if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
    return;
  }
  if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
    add_filter( 'mce_buttons', 'my_register_mce_button' );
  }
}
add_action('admin_head', 'my_add_mce_button');

function my_add_tinymce_plugin( $plugin_array ) {
  $plugin_array['my_mce_button'] = get_template_directory_uri() .'/ex/assets/tinymce.js';
  return $plugin_array;
}

function my_register_mce_button( $buttons ) {
  array_push( $buttons, 'my_mce_button' );
  return $buttons;
}

　

　

試したこと

PHPからショートコードのリストをjson形式で渡してみて、forinやwhileを試してみてもうまくいきませんでした。

 
$short_code_list = json_encode($short_code_list);
?>
<script>
let text_list = <?php echo $short_code_list; ?>;
</script>

// phpから受け取ったデータ
custom0: "開発環境"
custom1: "携帯電話"
custom2: "会社"
last_name: "姓"
nickname: "ユーザーネーム"

	var key = Object.keys(text_list);
	var value = Object.values(text_list);
	var cnt = key.length;
	var menu = []

	for(let i=0; i < cnt; i++) {
		add_menu = [
			{
				text: value[i],
				onclick: function() {
					var selected_text = editor.selection.getContent();
					var return_text = '';
					return_text = key[i];
					editor.insertContent(return_text);
				}
			}
		];
		menu = menu.concat(add_menu);
	}

ループをつかって、menu部分を埋め込んでみたのですが、onclick: function() {の部分でリファレンスエラーになってしまいます。
jsの理解ができておらずで、ご教授いただければ幸いです。

よろしくお願いいたします。

Answer 1

自己解決しました。

単純に、tinymce.PluginManager.add配下にループを記述すれば大丈夫でした。

jQuery(document).ready(function ($) {

	var key = Object.keys(text_list);
	var value = Object.values(text_list);
	var cnt = key.length;
	var menu = []
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		for(let i=0; i < cnt; i++) {
			add_menu = [
				{
					text: value[i],
					onclick: function() {
						var selected_text = editor.selection.getContent();
						var return_text = '';
						return_text = '[' + key[i] + ']';
						editor.insertContent(return_text);
					}
				}
			];
			menu = menu.concat(add_menu);
		}

		editor.addButton( 'my_mce_button', {
			text: 'ショートコード埋め込み',
			icon: false,
			type: 'menubutton',
			menu:menu
		});
	});
});