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

Question

比如我在用

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

将 float 类应用于左/右对齐的 img 元素而不是内联样式。我知道我可以在技术上只添加 ',p' 到选择器也给他们“ float 左/右”类，然后调整 p 元素的 CSS 中的类选择器，但我宁愿给他们一个不同的类“文本右/左”。

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

我想要实现的目标是否可行？

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'}}
    ]
}