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

我也尝试了以下方法，但徒劳无功：

1. 设置<p>：

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

   <p>当我保存textarea的内容时，的样式将被删除。

2. 在中tinymce.init，设置：

   verify_html: false
   

3. 设置valid_children: "+body[style]"在tiymce.init在文本区域添加如下内容：

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

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

   valid_styles: {
       "img": "display"
   }
   

因此，无论如何我如何在TinyMCE中居中放置图像？

Answer 1

我想出了一个解决方案：

调整tinymce.init：

(a) 添加格式：为每个居中的块元素添加必要的类center和必要的，包括.stylesimg

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;自己创建的样式！