我可以在編輯器編輯器中自定義標頭標簽（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/