Question

Imperavi的WYSIWYG jQuery编辑器 - Redactor - 是一段精彩的代码，带有清晰的文档。但在某些情况下，它缺乏可配置性。

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

Answer 1

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

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

- iM时

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/

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

2 个答案: