redactor - Redactor: Make dropdown menu look like an actual dropdown

Question

Imperavi's WYSIWYG jQuery editor - Redactor - is a wonderful piece of code with clear documentation. However in some cases it lacks configurability.

I am trying to add a dropdown menu. Their documentation demonstrates how to do precisely this, but the end result is just a square button with an image. I would like to make the dropdown "button" look like an actual dropdown menu (like a selector). Would this be possible without any deep hacks?

Answer 1

你检查过他们的一些插件吗？（如 FontSize、FontFamily 等）

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

- 我是

Answer 2

创建按钮 css 或制作 Font Awesome 的图标：

<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/