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;样式被删除。

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

套装<p> :

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

<p>的风格当我保存 textarea 的内容时被删除。

在 tinymce.init ， 放:

verify_html: false

套装valid_children: "+body[style]"在 tiymce.init并在 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您可以创建一个按钮，您可以使用该按钮将图像与中心对齐。