javascript - TinyMCE 为 windowManager 添加自定义控件

Question

我的目标是创建一个自定义控件，用于对话框的正文打开宽度 editor.windowManager.open。

我在github上找到了标准控件源码类，但是找不到通过插件添加新控件的方法。https://github.com/tinymce/tinymce/tree/master/js/tinymce/classes/ui

经过几个小时的搜索，我找不到任何文档、教程或 stackoverflow 响应。然后我尝试在插件中包含控件声明，但我得到了一个 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'
});

可以添加自定义控件，如果是的话如何实现？

找到两个jsfiddle，第一个是standard controls第二个是my attempt以及浏览器控制台的错误

谢谢你的帮助

Answer 1

我也为此苦苦挣扎了很长时间......

在用

定义我的控件之后

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

我必须将构造函数添加到“tinymce.ui.Factory”:

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

一个工作示例:

// 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.

我已经更新了你的 Fiddle相应地。