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/