javascript - 为 Tinymce 添加插入按钮

Question

我正在开发自己的插件以添加到tinyMCE v4插件列表中，到目前为止，我已经达到在菜单中添加一个按钮并在单击它时打开弹出窗口的目的，然后我就可以用数据填写表单了它添加到tinyMCE编辑器中，但是当我想编辑这些信息时遇到一些问题，我尝试添加一些脚本但仍然不起作用，

这是我的源代码:

注1:onclick用于添加新按钮

注2:onpostrender适用于编辑按钮

tinymce.PluginManager.add('buttonlink', function(editor, url) {
// Add a button that opens a window
editor.addButton('buttonlink', {
    text: 'Insert Button',
    tooltip: "Insert/edit Button link",
    icon: false,
    onclick: function() {
        // Open window
        editor.windowManager.open({
            title: 'Button',
            body: [
                {type: 'textbox', name: 'title', label: 'Title'},
                {type: 'textbox', name: 'link', label: 'Link'},
                {type: 'listbox', name: 'colorBtn', label: 'Button Color',values:
                        [
                            {value:"008000", text:"Green"},
                            {value:"0000FF", text:"Blue"},
                            {value:"000000", text:"Black"},
                            {value:"993300", text:"Burnt orange"},
                            {value:"333300", text:"Dark olive"},
                            {value:"003300", text:"Dark green"},
                            {value:"003366", text:"Dark azure"},
                            {value:"000080", text:"Navy Blue"},
                            {value:"333399", text:"Indigo"},
                            {value:"333333", text:"Very dark gray"},
                            {value:"800000", text:"Maroon"},
                            {value:"FF6600", text:"Orange"},
                            {value:"808000", text:"Olive"},
                            {value:"008080", text:"Teal"},
                            {value:"666699", text:"Grayish blue"},
                            {value:"808080", text:"Gray"},
                            {value:"FF0000", text:"Red"},
                            {value:"FF9900", text:"Amber"},
                            {value:"99CC00", text:"Yellow green"},
                            {value:"339966", text:"Sea green"},
                            {value:"33CCCC", text:"Turquoise"},
                            {value:"3366FF", text:"Royal blue"},
                            {value:"800080", text:"Purple"},
                            {value:"999999", text:"Medium gray"},
                            {value:"FF00FF", text:"Magenta"},
                            {value:"FFCC00", text:"Gold"},
                            {value:"FFFF00", text:"Yellow"},
                            {value:"00FF00", text:"Lime"},
                            {value:"00FFFF", text:"Aqua"},
                            {value:"00CCFF", text:"Sky blue"},
                            {value:"993366", text:"Red violet"},
                            {value:"FFFFFF", text:"White"},
                            {value:"FF99CC", text:"Pink"},
                            {value:"FFCC99", text:"Peach"},
                            {value:"FFFF99", text:"Light yellow"},
                            {value:"CCFFCC", text:"Pale green"},
                            {value:"CCFFFF", text:"Pale cyan"},
                            {value:"99CCFF", text:"Light sky blue"},
                            {value:"CC99FF", text:"Plum"}
                        ]
                },
                {type: 'listbox', name: 'colorText', label: 'Text Color',values:
                        [
                            {value:"FFFFFF", text:"White"},
                            {value:"000000", text:"Black"},
                            {value:"993300", text:"Burnt orange"},
                            {value:"333300", text:"Dark olive"},
                            {value:"003300", text:"Dark green"},
                            {value:"003366", text:"Dark azure"},
                            {value:"000080", text:"Navy Blue"},
                            {value:"333399", text:"Indigo"},
                            {value:"333333", text:"Very dark gray"},
                            {value:"800000", text:"Maroon"},
                            {value:"FF6600", text:"Orange"},
                            {value:"808000", text:"Olive"},
                            {value:"008000", text:"Green"},
                            {value:"008080", text:"Teal"},
                            {value:"0000FF", text:"Blue"},
                            {value:"666699", text:"Grayish blue"},
                            {value:"808080", text:"Gray"},
                            {value:"FF0000", text:"Red"},
                            {value:"FF9900", text:"Amber"},
                            {value:"99CC00", text:"Yellow green"},
                            {value:"339966", text:"Sea green"},
                            {value:"33CCCC", text:"Turquoise"},
                            {value:"3366FF", text:"Royal blue"},
                            {value:"800080", text:"Purple"},
                            {value:"999999", text:"Medium gray"},
                            {value:"FF00FF", text:"Magenta"},
                            {value:"FFCC00", text:"Gold"},
                            {value:"FFFF00", text:"Yellow"},
                            {value:"00FF00", text:"Lime"},
                            {value:"00FFFF", text:"Aqua"},
                            {value:"00CCFF", text:"Sky blue"},
                            {value:"993366", text:"Red violet"},
                            {value:"FF99CC", text:"Pink"},
                            {value:"FFCC99", text:"Peach"},
                            {value:"FFFF99", text:"Light yellow"},
                            {value:"CCFFCC", text:"Pale green"},
                            {value:"CCFFFF", text:"Pale cyan"},
                            {value:"99CCFF", text:"Light sky blue"},
                            {value:"CC99FF", text:"Plum"}
                        ]
                },
            ],
            onsubmit: function(e) {
                // Insert content when the window form is submitted
                if(e.data.title != null && e.data.title != "") {
                    editor.insertContent('<a href="' + e.data.link + '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + e.data.colorText + '; background: #' + e.data.colorBtn + '">' + e.data.title + '</a>');
                }
            }
        });
    },
    onpostrender: function (buttonApi) {
        var btn = this;
        var editorEventCallback = function (e) {
            var IDElement = e.element.getAttribute('id');
            if (btn._id == "mceu_22" && IDElement == "btn-link-plugin") {

                var link = e.element.getAttribute('data-mce-href');
                var style = e.element.getAttribute('style');
                var text = e.element.text;

                var res = style.split(";");
                var colorStyle = res[0].split(":");
                var backgroundStyle = res[1].split(":");
                colorStyle[1] = colorStyle[1].replace(/\s+/g, '');
                backgroundStyle[1] = backgroundStyle[1].replace(/\s+/g, '');

                var colorTxt = colorStyle[1].substr(1);
                var backgroundTxt = backgroundStyle[1].substr(1);

                editor.windowManager.open({
                    title: 'Button',
                    body: [
                        {type: 'textbox', name: 'title', label: 'Title', value: text},
                        {type: 'textbox', name: 'link', label: 'Link', value: link},
                        {
                            type: 'listbox', name: 'colorBtn', label: 'Button Color', values:
                                [
                                    {value: "008000", text: "Green"},
                                    {value: "0000FF", text: "Blue"},
                                    {value: "000000", text: "Black"},
                                ],
                            onPostRender: function() {
                                this.value(backgroundTxt);
                            }
                        },
                        {
                            type: 'listbox', name: 'colorText', label: 'Text Color', values:
                                [
                                    {value: "FFFFFF", text: "White"},
                                    {value: "000000", text: "Black"},
                                    {value: "993300", text: "Burnt orange"},
                                    {value: "333300", text: "Dark olive"},
                                ],
                            onPostRender: function() {
                                this.value(colorTxt);
                            }
                        },
                    ],
                    onsubmit: function (e) {
                        // Insert content when the window form is submitted
                        if (e.data.title != null && e.data.title != "") {

                            editor.insertContent('<a href="' + e.data.link + '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + e.data.colorText + '; background: #' + e.data.colorBtn + '">' + e.data.title + '</a>');
                            editor.off('NodeChange', editorEventCallback);
                        }
                    }
                });

            }
        };
        editor.on('NodeChange', editorEventCallback);
        return function (buttonApi) {
            console.log("off");
            editor.off('NodeChange', editorEventCallback);
        }
    }
});

 return {
    getMetadata: function () {
        return  {
            name: "Button Link plugin",
            url: "https://capoffshore.com"
        };
    }
  };
});

这是用于创建新按钮的弹出窗口:

Answer 1

我用这段代码解决了问题:

tinymce.PluginManager.add('buttonlink', function(editor, url) {
// Add a button that opens a window
var params = [];
editor.addButton('buttonlink', {
    text: 'Insert Button',
    tooltip: "Insert/edit Button link",
    icon: false,
    onclick: function(e) {
        // Open window
        var btn = this;

        var text = "";
        var link = "";
        var backgroundTxt = "0000FF";
        var colorTxt = "FFFFFF";

        if (typeof params['text'] !== 'undefined') {
            text = params['text'];
        }
        if (typeof params['link'] !== 'undefined') {
            link = params['link'];
        }
        if (typeof params['backgroundTxt'] !== 'undefined') {
            backgroundTxt = params['backgroundTxt'];
        }
        if (typeof params['colorTxt'] !== 'undefined') {
            colorTxt = params['colorTxt'];
        }

        editor.windowManager.open({
            title: 'Button',
            body: [
                {type: 'textbox', name: 'title', label: 'Title', value: text},
                {type: 'textbox', name: 'link', label: 'Link', value: link},
                {type: 'listbox', name: 'colorBtn', label: 'Button Color',values:
                        [
                            {value:"0000FF", text:"Blue"},
                            {value:"008000", text:"Green"}
                        ],
                    onPostRender: function() {
                        this.value(backgroundTxt);
                    }
                },
                {type: 'listbox', name: 'colorText', label: 'Text Color',values:
                        [
                            {value:"FFFFFF", text:"White"},
                            {value:"000000", text:"Black"}
                        ],
                    onPostRender: function() {
                        this.value(colorTxt);
                    }
                },
            ],
            onsubmit: function(e) {
                // Insert content when the window form is submitted
                if(e.data.title != null && e.data.title != "") {

                    var link = e.data.link;
                    var title = e.data.title;
                    var colorText = e.data.colorText;
                    var colorBtn = e.data.colorBtn;

                    if (e.data.link == null || e.data.link == "" || typeof e.data.link === 'undefined') {
                        link = "#";
                    }

                    tinymce.activeEditor.dom.remove(tinymce.activeEditor.dom.get("btn-link-plugin"));

                    editor.insertContent('<a href="' + link+ '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + colorText + '; background: #' + colorBtn + '">' + title + '</a>');
                }
            }
        });
    },
    onpostrender: function (buttonApi) {
        var btn = this;
        var editorEventCallback = function (e) {
            var IDElement = e.element.getAttribute('id');
            if (btn._id == "mceu_22" && IDElement == "btn-link-plugin") {
                btn.active(true);
                var link = e.element.getAttribute('data-mce-href');
                var style = e.element.getAttribute('style');
                var text = e.element.text;

                var res = style.split(";");
                var colorStyle = res[0].split(":");
                var backgroundStyle = res[1].split(":");
                colorStyle[1] = colorStyle[1].replace(/\s+/g, '');
                backgroundStyle[1] = backgroundStyle[1].replace(/\s+/g, '');

                var colorTxt = colorStyle[1].substr(1);
                var backgroundTxt = backgroundStyle[1].substr(1);

                params['link'] = link;
                params['text'] = text;
                params['colorTxt'] = colorTxt;
                params['backgroundTxt'] = backgroundTxt;
            }
        };
        editor.on('NodeChange', editorEventCallback);
    }
});

return {
    getMetadata: function () {
        return  {
            name: "Button Link plugin",
            url: "https://capoffshore.com"
        };
    }
};
});