javascript - 在 TinyMCE 中设置水平线的样式

Question

在 TinyMCE 4.7.3 中，有没有办法设置水平线的样式（不使用源代码）？使用Horizo​​ntal 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

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

插件.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 />根据提供的数据生成样式：

有用的链接

• 为 TinyMCE 创建插件

• TinyMCE API v4 windowManager.open - 我可以为 body 选项配置哪些小部件？

Answer 2

为什么不直接使用 CSS 来设置样式<hr>？