Can I customise the header tags(h1,h2,h3…) in redactor editor?

Question

I've used the plugins of redactor editor to change the font size and font color of text. It's working fine in other tags except the header. Don't understand why..

I've tried this

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

Any help?

Answer 1

You can format the text by adding CSS!

By adding classes to the elements, you could style them like you want to

See the documentation or the example below for more information!

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

If you mean so users can change the font color of headings then basically you can't. I asked why and they replied

"it is done so by design; heading styles should be in CSS" https://twitter.com/imperavi/status/575696417240391681

I had to modify redactor.js in the end and comment out line 4250 to make it work (as it used to):

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

Answer 3

Or you can just modify the line so that it only affects headings. With this change you can now bold, italic, strike-through, etc headings.

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

I wrote a blog article on how to apply a patch to achieve this rather than changing the source.

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