javascript - 向 Redactor JS 添加字体大小

Question

我正在尝试添加一个按钮来更改 Redactor JS 中的字体大小，但它不起作用。这是我初始化 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

尝试在您的插件之前添加此代码

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>

代码对我有用。