Can I customise the header tags(h1,h2,h3…) in reda

2019-05-10 22:57发布

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?

3条回答
做自己的国王
2楼-- · 2019-05-10 23:36

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;
}
查看更多
再贱就再见
3楼-- · 2019-05-10 23:37

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;
查看更多
爷的心禁止访问
4楼-- · 2019-05-10 23:54

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/

查看更多
登录 后发表回答