TinyMCE 中的水平线样式

Question

在 TinyMCE 4.7.3 中，有没有办法设置水平线的样式（不使用源代码）？使用 Horizontal Rule plugin，似乎我只能插入一条水平线（即 <hr />），不能插入其他任何东西。

如果没有，是否有另一种方法来创建具有某些样式（对齐、颜色、厚度等）的水平线（不使用源代码）？

$(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',
    });
});

Answer 1

我最终创建了一个非常简单的插件来满足我的需求。

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()
                );
            }
        }
    }
});

它将打开一个对话框并根据提供的数据生成样式 <hr />：

有用的链接

Create a Plugin for TinyMCE
TinyMCE API v4 windowManager.open - What widgets can I configure for the body option?

Answer 2

为什么不直接使用 CSS 来设计您的 <hr>？

TinyMCE 中的水平线样式

Styling horizontal rule in TinyMCE

javascript

tinymce

horizontal-line