如何使用插件 API 向编辑器编辑器添加下拉按钮？答案

【问题标题】：How do you add a dropdown button to the redactor editor using the plugin API?如何使用插件 API 向编辑器编辑器添加下拉按钮？
【发布时间】：2013-04-15 17:57:54
【问题描述】：

通过设置buttonsCustom 调用.redactor() 中的文档示例show you can do it。插件 API 文档shows how you can add a single button。但是如何通过插件 API 添加下拉菜单？

【问题讨论】：

标签： redactor

【解决方案1】：

好的，查看编辑器源代码（最新版本 8.2.6），我注意到您可以将第四个参数传递给插件 API 的 addBtn 函数。所以，假设你想从插件内部添加一个字体大小下拉菜单：

RedactorPlugins.fontSize = {

    init: function(obj) {

        btnCallback = function(obj,event,key) {
            // button actions, if any
        }

        dropdown = {
            small: {
                title: 'Small'
                callback: function(obj,event,key) { //set the font size to small }
            }
            medium: {
                title: 'Medium'
                callback: function(obj,event,key) { //set the font size to medium }
            }
        }

        this.addBtn('fontSize','Change font size', btnCallback, dropdown);
    }

}

【讨论】：

知道如何为每个下拉项设置类吗？

【解决方案2】：

对于使用版本 9 的任何人，API 已更改。这是创建带有回调的下拉列表的方法。重要的不是传递给buttonAdd 的第三和第四个参数，第三个参数应该是回调函数，这必须是false，以便编辑器自动显示下拉菜单，因为buttonBuild 函数单击处理程序已编写。第 4 个参数与版本 8 相同。

RedactorPlugins.snippets = {
  init: function(){
    var dropdown = {
      quote: {
        title: "Pull Quote",
        callback: function(){
          // callback code here
        }
      },
      accordian: {
        title: "Accordian",
        callback: function(){
          // callback code here
        }
      }
    };
    this.buttonAdd('snippets', 'Snippets', false, dropdown);
  }
};

如果您需要在调用下拉菜单时运行回调，您需要编写代码以在作为第三个参数传递的回调中显示下拉菜单。

【讨论】：

【解决方案3】：

将类名添加到下拉项的示例例如：-

dropdown = {
        small: {
            title: 'Small',
            callback: function(obj,event,key) { //set the font size to small },
            className:'YOURCLASS NAME'
            }
  }

【讨论】：

【解决方案4】：

JamieD 是对的。对于更高版本的 Redactor，API 发生了很大变化。这是我用于 v9.2.5 的内容。

此代码向工具栏添加了一个下拉菜单，其中包含 2 个新按钮

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.newbtns = {
    init: function ()
    {
        //biu is bold italics underline
        var newbtns = {};
        newbtns['Bold'] = { title: 'Button 1', callback: this.btn1 };
        newbtns['Italics'] = { title: 'Button 2', callback: this.btn2 };

        this.buttonAdd('newbtns', 'New Buttons', false, newbtns);
        // adding font-awesome buttons
        // u will have to include font-awesome stylesheet separately for this to work
        this.buttonAwesome('newbtns', 'fa-tasks');

    },
    btn1: function(buttonName, buttonDOM, buttonObj, e)
    {
        // add stuff for btn1
    },
    btn2: function(buttonName, buttonDOM, buttonObj, e)
    {
        // add stuff for btn2
    }
};

用你的插件初始化编辑器

$('#myTextarea').redactor({
    plugins: ['newbtns']
});

查看此页面了解更多信息 - Redactor plugins

【讨论】：