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

尝试在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

您可以使用官方＆＃34; fontsize＆＃34;如果你想要的插件：https://github.com/johnsardine/redactor-plugins

还有其他新插件可用：

fontcolor.js, fontsize.js and fontfamily.js

如果包含，您可以像这样使用它们：

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

将fontsize添加到Redactor JS

2 个答案: