1

我正在尝试添加一个按钮来更改 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');
}
};

但是工具栏中什么也没有出现。任何的想法？我做错什么了吗？

4

2 回答 2

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>

代码对我有用。

于 2014-02-27T10:35:54.567 回答
0

如果需要，您可以使用官方的“fontsize”插件：https ://github.com/johnsardine/redactor-plugins

还有其他可用的新插件：

fontcolor.js, fontsize.js and fontfamily.js

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

elem.redactor({
      plugins: ['fontcolor', 'fontsize', 'fontfamily']
});
于 2014-04-29T14:13:07.460 回答