html - TinyMCE - 将 "text-align"应用到 span

Question

我目前在 CMS 中使用所见即所得编辑器 tinyMCE，供客户创建自己的广告文本。这意味着在前端，他们放在 textarea 中的所有内容都会出现在 <a> 中。标签。

我试图确保语义正确所以我禁用了 forced_root_block选择停止 <p>正在使用标签，但文本对齐选项将选定的文本/元素包装在 <div style="text-align:center"> 中我不想要。

有没有办法强制 tinyMCE 使用 <span style="display:block; text-align:center">而不是为了达到相同的结果。

这是我当前的 tinyMCE init

tinymce.init({
        selector: 'textarea#advertText',
        menubar: false,
        width: <?php echo $selectedSizeWidth ?>,
        height: <?php echo $selectedSizeHeight ?>,
        forced_root_block: false,
        resize: false,
        invalid_elements: 'div',
        plugins: [
            'textcolor colorpicker fontawesome'
        ],
        fontsize_formats: "14px 16px 18px 20px 24px 36px",
        toolbar: 'bold, italic, underline, strikethrough, |, fontsizeselect, |, forecolor, backcolor, |, alignleft, aligncenter, alignright, alignjustify, |, outdent, indent, |, fontawesome'
});

谢谢

Answer 1

最终通过在 tinyMCE init 中编辑默认样式格式，设法自己找到了解决方案。

https://www.tinymce.com/docs/demo/format-custom/

下面是我添加到我的 tinyMCE init 中以覆盖标准样式的代码。这意味着选定的文本元素(例如一个跨度)将被包装在一个具有样式 display: block 和相关的 text-align 属性的跨度中。

formats: {
            alignleft: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'left'}},
            aligncenter: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'center'}},
            alignright: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'right'}},
            alignfull: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'full'}}
        }