當H1是根元素時，如何使TinyMCE允許文本對齊？

Question

我有一個h1或h2等標簽作為根元素，我將TinyMCE內聯編輯器應用於該元素。

我想允許用戶將該文本向右對齊或居中。

但是，TinyMCE僅允許h1包含在div時具有text-align屬性。

另外，有沒有辦法讓div ，它只允許有一個h1元素，而沒有其他元素？

在將根元素tinymce.init div而不是h1之后，我在tinymce.init嘗試了以下選項。

valid_elements: 'h1'

這沒有用，然后我嘗試了

valid_elements: 'h1/p'

確實會將所有p s轉換為h1 ，但僅在關閉並重新打開編輯器之后，而不是在用戶鍵入時將其轉換為h1 。

Answer 1

這里的問題是，當您應用text-align屬性時，它會將文本包裝在span標簽（或其他標簽，例如，strong等）中。 這適用於大多數格式，但不適用於文本對齊。 原因是因為必須將tex-align應用於父標記，而不是其內部。 就像我告訴過您將一個正方形居中在另一個大小完全相同的正方形中一樣。 左對齊，右對齊或居中對齊是相同的，因為沒有空間可移動。您可以在這個小提琴上看到我的意思： 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;}