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

Question

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

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

但是，TinyMCE 只允许 h1s 在包含在 div.

中时具有 text-align 属性

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

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

valid_elements: 'h1'

没用，然后我试了

valid_elements: 'h1/p'

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

Answer 1

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

我有两个解决方案给你。

第一个解法：

尝试用 div 包围元素（h1、h2 等）的内部，并给它一个 class 就像你定位的 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>

第二种解法 您还可以制作一个自定义按钮，将 class 添加到外部父标签，而不是用

包围内部内容

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

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

How do I get TinyMCE to allow text-align when H1 is the root element?

javascript

tinymce