将字体大小添加到 Redactor JS答案

【问题标题】：Add fontsize to Redactor JS将字体大小添加到 Redactor JS
【发布时间】：2013-11-04 23:41:21
【问题描述】：

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

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

【问题讨论】：

你的buttons 变量中有什么？假设是按钮字符串数组，你是不是在里面加了Superscript和Subscript？

标签： javascript redactor

【解决方案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>

代码对我有用。

【讨论】：

也适合我。谢谢！

【解决方案2】：

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

还有其他可用的新插件：

fontcolor.js, fontsize.js and fontfamily.js

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

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

【讨论】：