javascript - 当 H1 是根元素时，如何让 TinyMCE 允许文本对齐？

Question

我有一个 h1 或 h2 等标记作为我应用 TinyMCE 内联编辑器的根元素。

我想允许用户将此文本向右对齐或居中。

但是，TinyMCE 仅允许 h1 在包含在 div 中时具有 text-align 属性。

或者，有没有办法让 div 只允许有一个 h1 元素，而不允许有其他元素？

 

在将根元素设置为 div 而不是 h1 后，我在 tinymce.init 中尝试了以下选项。

valid_elements: 'h1'

这不起作用，然后我尝试了

valid_elements: 'h1/p'

它确实将所有 p 转换为 h1，但仅在编辑器关闭并重新打开后，而不是在用户键入时进行。

Answer 1

这里的问题是，当您应用 text-align 属性时，它会将文本包装在 span 标记(或其他标记......即强标记等)中。这适用于大多数格式，但不适用于文本对齐。原因是因为 tex-align 必须应用于父标签，而不是其内部。就好像我告诉你将一个正方形置于另一个大小完全相同的正方形的中心一样。如果你左对齐、右对齐或居中对齐，效果是一样的，因为没有空间可以移动。你可以在这个 fiddle 上明白我的意思:http://jsfiddle.net/f8meyapv/1/

我有两个解决方案给你。

第一个解决方案:

尝试用 div 包围元素(h1、h2 等)的内部，并为其指定一个类似您目标的 editable-inner 的类。唯一的缺点是它会将您的内部内容包装在 p 标签 ( <h1><p>content</p></h1> ) 中。然而，这是一个快速且简单的解决方案。不要忘记更新 JavaScript 中的选择器!

JS:

my_wysiwyg_settings = {
    selector: "h1.wysiwyg>div.editable-inner",
    ...
}

HTML:

<h1 class='wysiwyg'>
   <div class='editable-inner'>
       <!-- WYSIWYG content is added here -->
   </div>
</h1>

启动后，会变成这样:

<h1 class='wysiwyg'>
   <div class='editable-inner'>
        <p style="text-align:center;">Some content!!</p>
   </div>
</h1>

第二种解决方案 您还可以创建一个自定义按钮，将类添加到外部父标记，而不是用

包围内部内容

HTML:

<h1 class='wysiwyg'>
   <!-- WYSIWYG content is added here -->
</h1>

JS:

     my_wysiwyg_settings = {
        selector: "h1.wysiwyg",
        toolbar: "myHeadingAlignLeft myHeadingAlignCenter myHeadingAlignRight", //add custom buttons to toolbar
        setup: function(editor) {  //define button function
            editor.addButton('myHeadingAlignLeft', {
                icon: 'alignleft',
                onclick: function() {
                    addClass(editor.id,'align-left'); //back-end function below
                    // or use this front-end function: //$('#' + editor.id).css({'textAlign' : 'left'});
                }
            });

        editor.addButton('myHeadingAlignCenter', {
            icon: 'aligncenter',
            onclick: function() {
                addClass(editor.id,'align-center');
            }
        });

        editor.addButton('myHeadingAlignRight', {
            icon: 'alignright',
            onclick: function() {
                addClass(editor.id,'align-right');
            }
        });    
...
};

function addClass(id, className) {
    $.ajax({
        type: 'POST',
        ... //rest of ajax request here...
    });
}

CSS:

.align-left{ text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}