javascript - 使用 Javascript 的单选按钮列表，每个列表选项返回自定义文本

Question

我正在为 Wordpress 制作一个自定义 TinyMCE 按钮，部分 Javascript 代码如下所示:

(function() {
    tinymce.create('tinymce.plugins.Green', {
        init : function(ed, url) {
            ed.addButton('green', {
                title : 'Prompt Text',
                image : url+'/images/btn_green.jpg',
                onclick : function() {                    
                    var prompt_text = prompt("Green Button", "Green Button Text");
                    var caret = "caret_pos_holder";
                    var insert = "<div>" + prompt_text + "</div><span id="+caret+"></span>";
                    if (prompt_text != null && prompt_text != 'undefined')
                    {
                        ed.execCommand('mceInsertContent', false, insert);
                        ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                        ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                    }
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('green', tinymce.plugins.Green);
})();

我想删除prompt_text函数并添加一个单选按钮列表，其中会出现一个窗口，用户可以选择列表中的选项之一。每个列表项都应该有其唯一的插入。 这怎么可能？

例如，窗口应包含三个选项的列表:茶、咖啡、水。

如果用户选择咖啡，则应插入文本:咖啡唤醒你。

我对 Javascript 的了解非常有限，这阻止了我解决这个问题。但是，我认为这只能通过创建 jQuery 表单来实现？

Answer 1

为此，您需要编写一个自己的插件。您应该查看开发者tinymce构建并查看源代码，尤其是searchreplace插件。该插件使用tinymce弹出窗口，用户可以选择多个设置。我建议您复制该插件，根据您的需要进行调整并删除所有不需要的内容。