Html TinyMCE-应用“；“文本对齐”；跨越

我目前正在CMS中使用所见即所得编辑器tinyMCE为客户创建他们自己的广告文本。 这意味着在前端，他们在文本区域中放置的所有内容都将显示在

标记中

我试图确保语义正确，因此我禁用了

强制根块

选项以停止使用

标记，但文本对齐选项将所选文本/元素包装在我不想要的

中

有没有办法强迫tinyMCE使用

来达到同样的效果

这是我目前的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'
});

tinymce.init({
选择器：“文本区域#广告文本”，
梅努巴：错，
宽度：，
身高：，
强制根块：false，
调整大小：false，
无效的_元素：“div”，
插件：[
“textcolor颜色选择器”
],
fontsize_格式：“14px 16px 18px 20px 24px 36px”，
工具栏：“粗体、斜体、下划线、删除线、|、字体大小选择、|、前景色、背景色、|、左对齐、居中对齐、右对齐、对齐对齐对齐、|、凸出、缩进、|、字体”
});

---

谢谢

通过在tinyMCE init中编辑默认样式格式，我最终找到了一个解决方案

下面是我添加到tinyMCE init以覆盖标准样式的代码。 这意味着所选文本元素（例如span）将被包装在span中，并带有样式

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

---

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

下面是我添加到tinyMCE init以覆盖标准样式的代码。 这意味着所选文本元素（例如span）将被包装在span中，并带有样式

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

---

也许对你来说还不算太晚。我也有同样的问题，因为我将内容加载到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'}}

---

}，

也许对你来说还不算太晚。我也有同样的问题，因为我将内容加载到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'}}

}，

代替对齐完全使用对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐代替对齐完全使用对齐对齐对齐对齐对齐对齐对齐代替对齐完全使用对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐对齐