将fontsize添加到Redactor

Question

我正在尝试添加一个按钮来改变Redactor中的字体大小，但是它不起作用。这里是我的代码，以使红演员不受伤害：

$('#redactor_content').redactor({
                        buttons: buttons,
                        buttonsCustom: {
                          superscript: {
                              title: 'Superscript',
                              callback: function(obj, event, key) {
                                  obj.execCommand('superscript')
                              }
                          },
                          subscript: {
                              title: 'Subscript',
                              callback: function(obj, event, key) {
                                  obj.execCommand('subscript')
                              }
                          }
                        },
                        plugins: ['fontsize']
                    });

这是我的插件：

RedactorPlugins.fontsize = {
init: function()
{
    var fonts = [10, 11, 12, 14, 16, 18, 20, 24, 28, 30];
    var that = this;
    var dropdown = {};

    $.each(fonts, function(i, s)
    {
        dropdown['s' + i] = { title: s + 'px', callback: function() { that.setFontsize(s); } };
    });

    dropdown['remove'] = { title: 'Remove font size', callback: function() { that.resetFontsize(); } };

    this.buttonAdd( 'fontsize', 'Change font size', false, dropdown);
},
setFontsize: function(size)
{
    this.inlineSetStyle('font-size', size + 'px');
},
resetFontsize: function()
{
    this.inlineRemoveStyle('font-size');
}
};

但工具栏中没有显示任何内容。有什么想法吗？我做错什么了吗？

Answer 1

尝试在yuour插件之前添加以下代码

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.fontsize = {
    init: function(){
        var fonts = [10, 11, 12, 14, 16, 18, 20, 24, 28, 30];
        var that = this;
        var dropdown = {};

        $.each(fonts, function(i, s){
            dropdown['s' + i] = { title: s + 'px', callback: function() { that.setFontsize(s); } };
        });

        dropdown['remove'] = { title: 'Remove font size', callback: function() { that.resetFontsize(); } };
        this.buttonAdd( 'fontsize', 'Change font size', false, dropdown);
    },
    setFontsize: function(size){
        this.inlineSetStyle('font-size', size + 'px');
    },
    resetFontsize: function(){
        this.inlineRemoveStyle('font-size');
    }
};

此外，删除任何额外的代码，以确保您有问题的代码在问题。也可以把它放在文档就绪事件中。

<script type="text/javascript">
$(document).ready(
    function()
    {
        $('#redactor_content').redactor({
            focus: true,
            plugins: ['fontsize']
        });
    }
);
</script>

密码对我有用。

Answer 2

如果您愿意，可以使用正式的"fontsize“插件：https://github.com/johnsardine/redactor-plugins

还有其他可用的新插件：

fontcolor.js, fontsize.js and fontfamily.js

如果包括在内，您可以这样使用它们：

elem.redactor({
      plugins: ['fontcolor', 'fontsize', 'fontfamily']
});