css - 我可以使用 TinyMCE 格式配置为给定对齐的不同元素设置不同的类吗？

Question

例如，我正在使用

formats : {
    alignleft : {selector : 'img', classes : 'float-left'},
    alignright : {selector : 'img', classes : 'float-right'},
    }

将浮点类应用于左/右对齐的 img 元素而不是内联样式。我知道从技术上讲，我可以在选择器中添加 ',p' 来为它们提供“float-left/right”类，然后在 CSS 中为 p 元素调整类选择器，但我宁愿给它们一个不同的类“文本右/左”。

我尝试附加alignleft : {selector : 'p', classes : 'text-left'}到格式配置数组，但它只是覆盖了 img 浮点类配置。

我想要实现的目标是可能的吗？

Answer 1

试试这个 tinymce 配置

formats: {
    alignleft: [
        {selector : 'div.nb-image,img', classes: 'float-left'},
        {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {'text-align': 'left'}}
    ],
    aligncenter: [
        {selector : 'div.nb-image,img', classes: 'float-center'},
        {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {'text-align': 'center'}}
    ],
    alignright: [
        {selector : 'div.nb-image,img', classes: 'float-right'},
        {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {'text-align': 'right'}}
    ],
    alignfull: [
        {selector : 'div.nb-image,img', classes: 'float-full'},
        {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table', styles: {'text-align': 'justify'}}
    ]
}