Question

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

Answer 1

好的，所以看一下redactor源代码（最新版本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);
    }

}

Answer 2

对于使用redactor版本9的任何人，API都已更改。这是如何使用回调创建下拉列表。重要的是第3和第4个参数传递给buttonAdd，第3个参数应该是回调函数，这必须是false，以便下拉菜单由redactor自动显示编写buttonBuild函数单击处理程序的方式。第四个参数与版本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个参数传递的回调中的下拉列表。

Answer 3

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

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

Answer 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

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

4 个答案: