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 />：

有用的链接

Answer 2

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

在TinyMCE中设计水平规则

2 个答案: