我可以在编辑器编辑器中自定义标头标签（h1，h2，h3 ......）吗？

Question

我使用了redactor编辑器的插件来改变文本的字体大小和字体颜色。 除了标题之外，它在其他标签中工作正常。 不明白为什么..

我试过这个

$('#redactor').redactor({
    focus: true,
    plugins: ['fontcolor', 'fontsize'],
    formatting: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
});

有帮助吗？

Answer 1

您可以通过添加CSS来格式化文本！

通过向元素添加类，您可以按照自己的意愿设置样式

有关详细信息，请参阅文档或以下示例！

HTML：

<textarea id="redactor" name="content">...</textarea>

JS：

<script type="text/javascript">
$(function()
{
    $('#redactor').redactor({
        focus: true,
        formatting: ['p', 'blockquote', 'h1', 'h2'],
        formattingAdd: [
        {
            tag: 'p',
            title: 'Red Block',
            class: 'red-styled'
        },
        {
            tag: 'p',
            title: 'Blue Styled Block',
            class: 'blue-styled'
        },
        {
            tag: 'p',
            title: 'P Attr Title',
            attr: {
                name: 'title',
                value: 'Hello World!'
            },
            class: 'p-attr-title'
        },
        {
            tag: 'p',
            title: 'P Data Set',
            data: {
                name: 'data-name',
                value: 'true'
            },
            class: 'p-data-set'
        },
        {
            tag: 'span',
            title: 'Big Red',
            style: 'font-size: 20px; color: red;',
            class: 'span-big-red'
        },
        {
            tag: 'span',
            title: 'Font Size 20px',
            style: 'font-size: 20px;',
            class: 'font-size-20'
        },
        {
            tag: 'span',
            title: 'Font Georgia',
            style: 'font-family: Georgia;',
            class: 'font-family-georgia'
        },
        {
            tag: 'code',
            title: 'Code'
        },
        {
            tag: 'mark',
            title: 'Marked Tag'
        },
        {
            tag: 'span',
            title: 'Marked Span',
            class: 'marked-span'
        }]
    });
});
</script>

CSS：

.red-styled {
    color: red;
}
.blue-styled {
    color: blue;
    font-weight: bold;
}
.marked-span {
    background: yellow;
    font-family: monospace;
}


.redactor-dropdown .redactor-formatting-span-font-size-20 {
    font-size: 20px;
}
.redactor-dropdown .redactor-formatting-span-font-family-georgia {
    font-family: Georgia;
}
.redactor-dropdown .redactor-formatting-span-big-red {
    font-size: 20px;
    color: red;
}
.redactor-dropdown .redactor-formatting-code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background: #f4f4f4;
}
.redactor-dropdown .redactor-formatting-mark {
    background-color: #ffc800;
    color: #0f0f0f;
}
.redactor-dropdown .redactor-formatting-span-marked-span {
    background: yellow;
    font-family: monospace;
}

Answer 2

如果你的意思是这样用户可以改变标题的字体颜色，那么基本上你不能。 我问为什么，他们回答说

“它是通过设计完成的;标题样式应该是CSS” https://twitter.com/imperavi/status/575696417240391681

我不得不在最后修改redactor.js并注释掉第4250行以使其工作（就像以前一样）：

// Stop formatting pre and headers
// if (this.utils.isCurrentOrParent('PRE') || his.utils.isCurrentOrParentHeader()) return;

Answer 3

或者您可以修改该行，使其仅影响headings 。 通过此更改，您现在可以使用bold ， italic ， strike-through等headings 。

//if (this.utils.isCurrentOrParent('PRE') || this.utils.isCurrentOrParentHeader()) return;
if (this.utils.isCurrentOrParent('PRE')) return;

我写了一篇博客文章，介绍如何应用补丁来实现这一目标，而不是改变源代码。

http://blog.justinleveck.com/2015/12/21/patch-redactor-to-allow-header-formatting/