TinyMCE：如何使图像居中？

Question

在 TinyMCE 中，我可以插入图像并将其居中。并且生成的代码如下：

<p><img height="684" src="/static/media/uploads/about.jpg" style="margin-left: auto; margin-right: auto; display: block;" width="938" /></p>

但是，当我保存 textarea 时，display: block; 样式被删除。

我也尝试了以下方法，但都是徒劳的：

1. 设置<p>:

   <p style="text-align: center;"><img ... ></p>
   

   我保存textarea的内容时，<p>的样式被去掉了。

2. 在tinymce.init，设置：

   verify_html: false
   

3. 在tiymce.init 中设置valid_children: "+body[style]" 并在textarea 中添加以下内容：

   <style>
   p img {
     display: block;
   }
   </style>
   

4. 在 tinymce.init 中设置以下内容：

   valid_styles: {
       "img": "display"
   }
   

那么，我如何在 TinyMCE 中将图像居中？

Answer 1

我想出了一个变通的解决方案：

修改tinymce.init:

(a) 添加格式：将类center 和必要的styles 添加到每个居中的块元素，包括img。

formats: {
    aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center',
                  styles: {display: 'block', margin: '0px auto', textAlign: 'center'}},
}

(b) 添加 JavaScript 以在编辑窗口中正确显示居中元素：将之前添加的 margin: 0px auto; 替换为 margin: 0px auto; display:block; text-align: center;：

var value = $('textarea').val();
value = value.replace('margin: 0px auto;', 'margin: 0px auto; display:block; text-align: center;');
$('textarea').val(value);

然后在我们自己的 CSS 文件中添加以下内容，以便在 HTML 页面中正确显示居中元素：

.center {
    display: block;
    margin: 0 auto;
    text-align: center;
}

上面的解决方案花了我几个小时才弄明白，都是因为 TinyMCE 不想保存自己创建的样式display: block;！

Answer 2

编辑 CSS

如果您能够在页面中插入 css，您只需将 images 属性设置为 display: block：

p img {
    display: block;
}

编辑 TinyMCE

如果你不能过多的 css 文件，你可以通过某种方式编辑 TinyMCE 编辑器，这样你就可以使用它在text-align: center 中的构建按钮，这应该和你的代码一样吗？

您可以像这样设置 TinyMCE 的工具栏：

$('#your_editor').tinymce({
    plugins: 'link,code,preview,autolink',             
    height: 350,
    width: 750,
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | preview code"
});

在toolbar: 中，您可以选择要添加的按钮。使用aligncenter，您可以创建一个按钮，您可以使用该按钮将图像与中心对齐。