javascript - 改变 TinyMCE 对齐图像中心的方式

Question

我正在使用 TinyMCE 4.0 构建 HTML 电子邮件，我需要更改 TinyMCE 居中图像的方式。

我在搜索后看到了涉及使用类的解决方案，但这不是我想要这样做的方式，因为我想保持电子邮件客户端的兼容性..

我找到了 img 的中心位置，但找不到做我想做的事情的方法

aligncenter: [{
    selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li",
    styles: {
        textAlign: "center"
    },
    defaultBlock: "div"
}, {
    selector: "img",
    collapsed: !1,
    styles: {
        display: "block",
        marginLeft: "auto",
        marginRight: "auto"
    }
}

我需要做的就是..

当选择一个img并点击aligncenter时，将图片包裹起来

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

如果有人对如何实现这一目标有任何建议，我们将不胜感激，因为目前我正在竭尽全力为这个问题提供解决方案。

问候，

查尔杰

Answer 1

这段代码对我来说效果很好，添加到 tinymce 配置中:

formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {textAlign: 'left'}},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {textAlign: 'center'}},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {textAlign: 'right'}}
},

请注意，您不应在标签列表中包含“img”；相反，依赖于 img 周围对齐的 p(或其他)。