Question

我目前正在CMS中使用WYSIWYG编辑器tinyMCE，以便客户为广告创建自己的文本。这意味着在前端，他们放入textarea的所有内容都会显示在<a>标记中。

我正在尝试确保语义正确，因此我已禁用forced_root_block选项以停止使用<p>标记，但text-align选项将所选文本/元素包装在我不想要<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'}}
        }

Answer 2

也许对你来说还不算太晚。我遇到了同样的问题，因为我将内容加载到p标签中。第一个答案接近解决方案。但是您必须定义将用于对齐的内联标记。用这个完成第一个答案的代码：inline：'span'，像这样：

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

}，

TinyMCE - 将“text-align”应用于span

2 个答案: