javascript - チェックボックス付きのTinyMCEカスタムドロップダウンセット値

原文 javascript tinymce

TinyMCEテキストエディターを使用しています。カスタムドロップダウンメニューボタンをツールボックスに追加しました。このカスタムメニューボタンで、チェックボックス付きの動的な値をロードします。

チェックボックスで値を返す配列を作成します。コードは

  $scope.customerList = ['Customer 1','Customer 2'];

  var menuItems = [];
  $scope.customerList.forEach(function(customer, index){

    var thisCheckbox  = "<input type='checkbox' value='"+customer+"' />";
      item = {
          'text': thisCheckbox
      };
      menuItems.push(item);
  });

このように、チェックボックスで値を返すmenuItemsの配列、



次に、このメニュー項目をTinymceツールボックスに追加しました-

$scope.tinymceOptions = {
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | customDrpdwn',
    setup: function(editor){
        editor.addButton( 'customDrpdwn', {
            text : 'Customers List',
            type: 'menubutton',
            icon : false,
            menu: menuItems
        });
    }
};

このように、ドロップダウンに表示されます

値を持つチェックボックスを取得しませんでした。この問題を解決するにはどうすればよいですか。
ありがとう!!

答え

TinyMCEは、チェックボックスを使用する方法でのメニューまたはツールバーボタンへのアイテムの追加をサポートしていませんが、メニューとツールバーボタンの両方で選択可能なオプションをサポートしています。


選択可能な項目をメニューに追加する方法の例については、visualblocksプラグインをご覧ください。
選択可能な項目をツールバーボタンに追加する方法の例については、advlistプラグインをご覧ください。
メインのtinymce.jsファイルで、fontsizeselectツールバーオプション(選択可能なツールバーボタン)の実装方法を確認します。


これらの例は、選択可能なオプションを実装するために必要なものを提供するはずです。

関連記事