Styling horizontal rule in TinyMCE

Question

In TinyMCE 4.7.3, is there a way to style horizontal rule (without using source code) ? Using the Horizontal Rule plugin, it seems that I can only insert an horizontal rule (i.e. <hr />) and nothing else.

If not, is there an alternative way to create a horizontal rule (without using source code) with some styling (alignment, color, thickness, etc) ?

$(function() {
    tinymce.init({ 
        selector: 'textarea',
        branding: false,
        menubar: false,
        toolbar_items_size: 'small',
        theme: 'modern',
        fontsize_formats: "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt 48pt 72pt",
        // use absolute URLs
        relative_urls: false,
        remove_script_host: false,
        width: 580,
        height: 400,
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools code contextmenu colorpicker textpattern help',
        toolbar1: 'formatselect | fontselect fontsizeselect | bold italic strikethrough superscript subscript forecolor backcolor | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | hr link image table code | removeformat',
    });
});

Probably relevant to you: https://stackoverflow.com/questions/3165778/applying-css-in-tinymce. What styling were you looking to apply to the `
` element? — j08691, Mar 12 '18 at 14:09
@j08691 Thanks. Primarily, I would like the user to be able to change the alignment, color, width, and height or thickness of the horizontal rule. It seems I'll have to write my own plugin to do that. — Mikey, Mar 12 '18 at 14:14

score 2 · Accepted Answer · answered Mar 12 '18 at 19:27

I ended up creating a very simple plugin to meet my needs.

plugin.min.js

tinymce.PluginManager.add('hrcustom', function (editor, url) {
    // create button
    editor.addButton('hrcustom', {
        icon: 'hr',
        tooltip: 'Insert horizontal rule',
        onclick: function() {
            // open window
            editor.windowManager.open({
                title: 'Insert horizontal rule',
                body: [
                    { 
                        type: 'listbox', 
                        name: 'align', 
                        label: 'Alignment', 
                        values: [
                            { value: 'left', text: 'Left' },
                            { value: 'center', text: 'Center' },
                            { value: 'right', text: 'Right' }
                        ] 
                    },
                    {
                        type: 'colorbox',
                        name: 'color',
                        label: 'Color',
                        onaction: createColorPickerAction(),
                        value: '#000000'
                    },
                    {
                        type: 'textbox',
                        name: 'width',
                        label: 'Width',
                        maxLength: 5,
                        value: '100%'
                    }, 
                    {
                        type: 'textbox',
                        name: 'height',
                        label: 'Thickness',
                        maxLength: 5,
                        value: '2px'
                    }
                ],
                // generate and insert HTML upon submitting dialog 
                onsubmit: function (e) {
                    var hr = document.createElement('hr');

                    // set alignment
                    switch (e.data.align) {
                        case 'center':
                            hr.style.marginLeft = 'auto';
                            hr.style.marginRight = 'auto';
                            break;
                        case 'right':
                            hr.style.textAlign = 'right';
                            hr.style.marginRight = 0;
                            break;
                        default:
                            hr.style.textAlign = 'left';
                            hr.style.marginLeft = 0;
                            break;
                    }

                    // set color
                    hr.style.backgroundColor = e.data.color || '#000000';

                    var unitRegex = /^\d+(px|%)?$/;
                    // set width
                    hr.style.width = unitRegex.test(e.data.width) ? e.data.width : '100%';
                    // set height (thickness)
                    hr.style.height = unitRegex.test(e.data.height) ? e.data.height : '1px';

                    // set other styles
                    hr.style.border = 0;
                    hr.style.marginTop = '5px';
                    hr.style.marginBottom = '5px';
                    hr.style.overflow = 'hidden';

                    // insert content when the window form is submitted
                    editor.insertContent(hr.outerHTML);
                }
            });
        }
    });

    // note: colorpicker plugin MUST be included for this to work

    // taken from core plugins
    function createColorPickerAction() {
        var callback = tinymce.activeEditor.settings.color_picker_callback;
        if (callback) {
            return function () {
                var self = this;
                callback.call(
                    editor,
                    function (value) {
                        self.value(value).fire('change');
                    },
                    self.value()
                );
            }
        }
    }
});

It will open a dialog and generate a styled <hr /> based off the data provided:

Useful links

score 1 · Answer 2 · answered Mar 13 '18 at 00:57

1

Why not just use CSS to style your <hr>?

answered Mar 13 '18 at 00:57

1

Behind-the-scenes, I am using CSS to style `
`. The issue here is about giving a non-programmer the ability to add and style an horizontal rule without knowing CSS. – Mikey Mar 13 '18 at 13:11
this solved it for me as I don't need the option for end users to customize it. I just added the CSS in the `content_style` option, https://www.tiny.cloud/docs/configure/content-appearance/#content_style – netotz Aug 22 '22 at 15:54

Styling horizontal rule in TinyMCE

2 Answers2