Jquery 我可以在redactor编辑器中自定义标题标签（h1、h2、h3…）吗？

我使用了redactor editor的插件来更改文本的字体大小和字体颜色。它在除标题以外的其他标记中工作正常。我不明白为什么

我试过这个

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

---

有什么帮助吗？

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

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

有关更多信息，请参见或下面的示例

HTML:

---

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

“这是通过设计实现的；标题样式应采用CSS”

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

---

或者您可以修改行，使其仅影响

标题

。通过此更改，您现在可以

加粗

，

斜体

，

删除

，等等

标题

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

我写了一篇关于如何应用补丁来实现这一点而不是改变源代码的博客文章

<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>

.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;
}

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

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