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>

但是，当我保存文本区域时，display: block; 样式被删除了。

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

设置<p>:
```
<p style="text-align: center;"><img ... ></p>
```
当我保存文本区域的内容时，<p>的样式被删除了。
在tinymce.init中设置：
```
verify_html: false
```
在tiymce.init中设置valid_children: "+body[style]"并在textarea中添加以下内容：
```
<style>
p img {
  display: block;
}
</style>
```
在tinymce.init中设置如下：
```
valid_styles: {
    "img": "display"
}
```

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

Answer 1

编辑CSS

如果您能够将 css 插入您的页面，您只需将图像属性设置为 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 您可以创建一个按钮，您可以使用该按钮将图像对齐到中心。

Answer 2

我想出了一个解决方案：

修改tinymce.init:

(a) 添加格式：将 class 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以在编辑中正确显示居中元素window：将之前添加的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;！

TinyMCE：如何使图像居中？

TinyMCE: how to center an image?

tinymce