TinyMCEがwindowManagerのカスタムコントロールを追加しました

Question

私の目標は、開いたダイアログボックスのボディ幅で使用するカスタムコントロールを作成することです。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' 
}); 

カスタムコントロールを追加することは可能ですが、それを実現する方法はありますか？

あなたの助けを

おかげで、私は長い間、あまりにもこれで苦労してきた

Answer 1

ブラウザコンソールでstandard controls第1及びmy attemptと第二との誤差2 jsfiddleを、検索...

tinymce.ui.MyControl = tinymce.ui.Widget.extend({...}) 

と私のコントロールを定義した後、私はtinymce.ui」にコンストラクタ関数を追加する必要がありました。 Factory`：

tinymce.ui.Factory.add('mycontrol', tinymce.ui.MyControl); 

作業例：私はそれに応じてFiddleを更新した

// Stolen from tinymce.ui.TextBox: 
// https://github.com/tinymce/tinymce/blob/master/src/ui/src/main/js/TextBox.js 
tinymce.ui.MyControl = tinymce.ui.Widget.extend({ 
     /** 
     * Constructs a instance with the specified settings. 
     * 
     * @constructor 
     * @param {Object} settings Name/value object with settings. 
     * @setting {String} format 
     */ 
     init: function(settings) { 

      var self = this; 

      self._super(settings); 

      self.classes.add('mycontrol'); 
     }, 

     /** 
     * Repaints the control after a layout operation. 
     * 
     * @method repaint 
     */ 
     repaint: function() { 
      var self = this, style, rect, borderBox, borderW = 0, borderH = 0, lastRepaintRect; 

      style = self.getEl().style; 
      rect = self._layoutRect; 
      lastRepaintRect = self._lastRepaintRect || {}; 

      // Detect old IE 7+8 add lineHeight to align caret vertically in the middle 
      var doc = document; 
      if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) { 
       style.lineHeight = (rect.h - borderH) + 'px'; 
      } 

      borderBox = self.borderBox; 
      borderW = borderBox.left + borderBox.right + 8; 
      borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0); 

      if (rect.x !== lastRepaintRect.x) { 
       style.left = rect.x + 'px'; 
       lastRepaintRect.x = rect.x; 
      } 

      if (rect.y !== lastRepaintRect.y) { 
       style.top = rect.y + 'px'; 
       lastRepaintRect.y = rect.y; 
      } 

      if (rect.w !== lastRepaintRect.w) { 
       style.width = (rect.w - borderW) + 'px'; 
       lastRepaintRect.w = rect.w; 
      } 

      if (rect.h !== lastRepaintRect.h) { 
       style.height = (rect.h - borderH) + 'px'; 
       lastRepaintRect.h = rect.h; 
      } 

      self._lastRepaintRect = lastRepaintRect; 
      self.fire('repaint', {}, false); 

      return self; 
     }, 

     /** 
     * Renders the control as a HTML string. 
     * 
     * @method renderHtml 
     * @return {String} HTML representing the control. 
     */ 
     renderHtml: function() { 
      var self = this, id = self._id, settings = self.settings, value = self.encode(self.state.get('value'), false), extraAttrs = ''; 

      if (self.disabled()) { 
       extraAttrs += ' disabled="disabled"'; 
      } 

      return '<input type="range" id="' + id + '" class="' + self.classes + '" value="' + value + '" hidefocus="1"' + extraAttrs + ' />'; 
     }, 

     value: function(value) { 
      if (arguments.length) { 
       this.state.set('value', value); 
       return this; 
      } 

      // Make sure the real state is in sync 
      if (this.state.get('rendered')) { 
       this.state.set('value', this.getEl().value); 
      } 

      return this.state.get('value'); 
     }, 

     /** 
     * Called after the control has been rendered. 
     * 
     * @method postRender 
     */ 
     postRender: function() { 
      var self = this; 

      self._super(); 

      self.$el.on('change', function(e) { 
       self.state.set('value', e.target.value); 
       self.fire('change', e); 
      }); 
     }, 
     bindStates: function() { 
      var self = this; 

      self.state.on('change:value', function(e) { 
       if (self.getEl().value != e.value) { 
        self.getEl().value = e.value; 
       } 
      }); 

      self.state.on('change:disabled', function(e) { 
       self.getEl().disabled = e.value; 
      }); 

      return self._super(); 
     }, 

     remove: function() { 
      this.$el.off(); 
      this._super(); 
     } 
    }); 


tinymce.ui.Factory.add('mycontrol', tinymce.ui.MyControl); 

// `mycontrol` is now available. 

。