1

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?

4

2 回答 2

0

你检查过他们的一些插件吗?(如 FontSize、FontFamily 等)

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

- 我是

于 2013-07-10T15:35:23.943 回答
0

创建按钮 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/

于 2014-07-31T06:13:16.380 回答