Question

我有一个<select> <option value="0">[object object]</option> <option value="1">[object object]</option> <option value="2">[object object]</option> <option value="3">[object object]</option> </select>或h1等标签作为我应用TinyMCE内联编辑器的根元素。

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

但是，TinyMCE仅允许h2在h1中包含text-align属性。

或者，有没有办法获得div，只允许有一个div元素，而没有其他元素？

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

h1

哪个不起作用，然后我试了

valid_elements: 'h1'

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

Answer 1

这里的问题是当你应用text-align属性时，它将文本包装在span标签（或其他标签......即strong等）中。这适用于大多数格式，但不适用于text-align。原因是因为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;}

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

1 个答案: