javascript - 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?