Redactor：使下拉菜单看起来像一个实际的下拉菜单

Question

Imperavi的所见即所得的jQuery编辑器 - Redactor - 是一个有着明确文档的美妙的代码片段。但是在某些情况下，它缺乏可配置性。

我想添加一个下拉菜单。他们的文档演示了how to do precisely this，但最终结果只是一个带图像的方形按钮。我想使下拉“按钮”看起来像一个实际的下拉菜单（如选择器）。这可能没有任何深入的黑客？

Answer 1

你看过他们的一些插件吗？ （如字号，的FontFamily等）

http://imperavi.com/redactor/docs/plugins/

--iM

Answer 2

创建一个按钮CSS或使字体真棒的图标：

<style type="text/css"> 
.redactor_toolbar li a.re-advanced { 
    background-image: url(/img/advanced.png); 
} 
.redactor_toolbar li a.re-advanced:hover { 
    background-image: url(/img/advanced-hover.png); 
} 
</style> 

创建插件：

if (!RedactorPlugins) var RedactorPlugins = {}; 

RedactorPlugins.advanced = { 
    init: function() 
    { 
     var dropdown = {}; 

     dropdown['point1'] = { title: 'Point 1', callback: this.point1callback }; 
     dropdown['point2'] = { title: 'Point 2', callback: this.point2callback }; 

     this.buttonAdd('advanced', 'Advanced', false, dropdown); 
    }, 
    point1callback: function(buttonName, buttonDOM, buttonObj, e) 
    { 
     alert(buttonName); 
    }, 
    point2callback: function(buttonName, buttonDOM, buttonObj, e) 
    { 
     alert(buttonName); 
    } 
}; 

使用插件调用Redactor：

$(function() 
    { 
     $('#redactor').redactor({ 
      plugins: ['advanced'] 
     }); 
    }); 

您可以在这里查看工作示例： http://imperavi.com/redactor/examples/dropdown/