3

私の目標は、ダイアログの本文を開いた幅で使用するカスタム コントロールを作成することeditor.windowManager.openです。

github で標準コントロールのソース クラスを見つけましたが、プラグインを介して新しいコントロールを追加する方法が見つかりません。 https://github.com/tinymce/tinymce/tree/master/js/tinymce/classes/ui

何時間も検索した後、ドキュメント、チュートリアル、またはスタックオーバーフローの応答が見つかりませんでした。次に、プラグインにコントロール宣言を含めようとしましたが、ReferenceError: define is not defined.

tinymce.PluginManager.add('my_plugin',function(editor,url){

  // My custom control declaration following standard control found in source file
  define("tinymce/ui/MyControl", [ "tinymce/ui/Widget" ],
    function(Widget) {
        "use strict";

      return Widget.extend({
        /**
         * Renders the control as a HTML string.
         */
        renderHtml: function() {
          return '<div class="my-control">'+ this.state.get('text') +'</div>';
        }
    });
  });  

  // Toolbar button to open the dialog
  editor.addButton('my_plugin',{
        title: 'My Plugin button',
        text: 'My Plugin button',
        onclick: function(){

            // Dialog declaration
            editor.windowManager.open({
                title: 'My dialog',
                body: [
                    { type: 'textbox', name: 'textbox', label: 'My textbox' },
                    { type: 'mycontrol', name: 'mycontrol', label: 'My Control' },
                ],
                onsubmit: function( e ){
                    editor.insertContent( e.data.textbox );
                }
            });
        },
    });
});

// Init tinyMCE
tinymce.init({
    selector: '#mytextarea',
    plugins: 'my_plugin',
    toolbar: 'my_plugin'
});

カスタム コントロールを追加することは可能ですが、それを達成する方法は?

2 つの jsfiddle を見つけます。1 つ目は標準コントロールで、2 つ目は私の試行とブラウザ コンソールのエラーです

ご協力いただきありがとうございます

4

1 に答える 1