Question

在解释我写作的内容时遇到一些麻烦，所以我听起来很愚蠢，对不起。

我正在尝试创建一个将TinyMCE实现到Web Experience Toolkit中的工作者，这将使我能够完全控制将来随意更换编辑器，而不必担心会破坏我的视图代码。但是我在for循环中的编辑器上有多个按钮时遇到了一些麻烦。那么让我解释一下我的代码。

在下面的视图代码中，我正在向我的工作人员发送一个aaaaCustomButton，它希望每个按钮获取四个值。名称，标题，文本和回调函数。如此处所见：

查看代码

<textarea id="editbox" class="wet-boew-editor" data-wet-boew='{"iHeight": 175, "bFileMenu": false, "aaaaCustomButton": [["glossary", "Insert Glossary Term", "Insert Glossary Term","insertGlossaryWindow",], ["wrap", "test", "test","testCallback",]]}'></textarea>

一切正常，两个按钮都显示在addButton循环中，如下所示：

For Loop

setup: function (ed) {                                 
                        for(var k = 0; k < buttonNames.length; k++)
                        {
                            var holder = buttonCallBackFunctions[k];
                            ed.addButton(buttonNames[k], {
                                title: buttonTitles[k],
                                text: buttonTexts[k],
                                onclick: function () { 
                                    eval(holder);
                                }
                            }); 
                        }                       
                    }

然而问题是onclick事件，暂时忽略了eval，因为即使我不喜欢使用它（即使使用window.settings也会出现问题。）当我点击te按钮时，eval会查找holder，然后运行事件。这很棒，这就是我想要的！错误！所以我说我有2个按钮，test1和test2。当onclick事件触发test1时，holder的最后一个值是“test2”，如果我有7个按钮，按下按钮test1，test7是持有者的值。

现在要解决这个问题，我一直试图以各种方式破解它，例如获取按钮的名称或ID，然后从那里获取回调，但我似乎无法得到id或名称TinyMCE中点击的按钮。

如果有人为此提出解决方案，那就太好了。现在我搁置这个并继续其他更重要的事情，所以如果有必要，请花点时间。我在下面列出了完整的工人代码。

完整工人代码

(function ($) {
    "use strict";
    var _pe = window.pe || {
        fn: {}
    }; /* local reference */
    _pe.fn.editor = {
        type: 'plugin',
        depends: ['tinymce'],
        mobile: function (elm) {
            return elm;
        },
        _exec: function (elm) {
            if (_pe.mobile) {
                return;
            }

            var opts,
                overrides,
                menuBar,
                toolBar;    

            var buttonNames = [];
            var buttonTitles = [];
            var buttonTexts = []; 
            var buttonCallBackFunctions = [];

            //Defaults
            opts = {
                aaaaCustomButton:[], // [0] Button Name, [1] Button Title, [2] Button Text, [3] Callback Function
                iHeight : 300,
                iWidth : 'auto',
                bEditorIsPrintOnly : false, //if this option is true, all other option become redundant
                bFileMenu : true,
                bEditMenu : true,
                bInsertMenu : true,
                bViewMenu : true,
                bFormatMenu : true,
                bTableMenu : true,
                bToolsMenu : true,
                bShowMenuBar : true, //if this is false all menu values above become redundant
                bShowToolBar : true,
                bShowStatusBar : true,          
                sLanguage : pe.language,
            };

            // Class-based overrides - use undefined where no override of defaults or settings.js should occur
            overrides = {};

            // Extend the defaults with settings passed through settings.js (wet_boew_editor), class-based overrides and the data-wet-boew attribute
            $.extend(opts, (typeof wet_boew_editor !== 'undefined' ? wet_boew_editor : {}), overrides, _pe.data.getData(elm, 'wet-boew'));

            //
            menuBar = opts.bFileMenu ? "file " : "";
            menuBar += opts.bEditMenu ? "edit " : "";
            menuBar += opts.bInsertMenu ? "insert " : "";
            menuBar += opts.bViewMenu ? "view " : "";
            menuBar += opts.bFormatMenu ? "format " : "";
            menuBar += opts.bTableMenu ? "table " : "";
            menuBar += opts.bToolsMenu ? "tools " : ""; 

            //
            if(opts.aaaaCustomButton.length > 0)
            {
                toolBar = "";
                for(var i = 0; i < opts.aaaaCustomButton.length; i++)
                {           
                    buttonNames[i] = opts.aaaaCustomButton[i][0];   
                    buttonTitles[i] = opts.aaaaCustomButton[i][1];
                    buttonTexts[i] = opts.aaaaCustomButton[i][2];
                    buttonCallBackFunctions[i] = opts.aaaaCustomButton[i][3] + "(ed)";
                    toolBar += opts.aaaaCustomButton[i][0] + " ";   
                }       
            }

            //Initializing editor       
            if(!opts.bEditorIsPrintOnly)
            {
                tinymce.init({
                    mode: "none",
                    theme: "modern",
                    entity_encoding : "raw",
                    plugins: "pagebreak,textcolor,table,hr,link,preview,searchreplace,print,paste,visualchars,nonbreaking,template,wordcount,code,contextmenu", 
                    menubar: opts.bShowMenuBar ? menuBar.trim() : false,    
                    statusbar: opts.bShowStatusBar,
                    toolbar: opts.bShowToolBar ? toolBar + '" | undo redo | forecolor backcolor | bold italic underline strikethrough | outdent alignleft aligncenter alignright alignjustify indent | bullist numlist hr |",' : false,
                    contextmenu: 'undo redo | cut copy paste |',
                    height: opts.iHeight,
                    width: opts.iWidth,
                    language : opts.sLanguage, 
                    setup: function (ed) {                                 
                        for(var k = 0; k < buttonNames.length; k++)
                        {
                            var holder = buttonCallBackFunctions[k];
                            ed.addButton(buttonNames[k], {
                                title: buttonTitles[k],
                                text: buttonTexts[k],
                                onclick: function () { 
                                    eval(holder);
                                }
                            }); 
                        }                       
                    }           
                });             
            }
            else //A non editable for printing
            {
                tinymce.init({
                    mode: "none",
                    theme: "modern",
                    entity_encoding : "raw",
                    plugins: "print,wordcount,noneditable,autoresize",
                    menubar: false,
                    toolbar: "print",
                    contextmenu: false,
                    statusbar: false,       
                    language : opts.sLanguage, 
                    setup: function (ed) {
                        ed.on('PreInit', function (event) {
                            var ed = event.target, dom = ed.dom;
                            dom.setAttrib(ed.getBody(), 'contenteditable', 'false');
                        });
                    }
                }); 
            }

            tinymce.execCommand("mceAddEditor", true, elm.attr('id'));                      
        } // end of exec
    };
    window.pe = _pe;
    return _pe;
} (jQuery));

Answer 1

但我似乎无法获得所点击按钮的ID或名称 TinyMCE的。

好吧，我无法为您提供按钮ID，但这可以为您提供点击按钮的名称。

setup : function(ed) {
       ed.on('ExecCommand',function(e){
           alert(e.command, e.ui, e.value);        
        })
    }

检查此链接 -

http://www.tinymce.com/wiki.php/api4:class.tinymce.CommandEvent

你也可以在这里查看我上次发表的答案 -

tinymce - adding a custom code / change value of a html element, when any of buttons is clicked

或检查演示 - WORKING DEMO

TinyMCE 4 - 使用回调函数动态添加按钮

1 个答案: