带有 :before 选择器的 TinyMCE 自定义格式答案

【问题标题】：TinyMCE custom format with :before selector带有 :before 选择器的 TinyMCE 自定义格式
【发布时间】：2014-06-26 02:00:31
【问题描述】：

我正在尝试在 tinyMCE 中设置自定义格式。

我正在尝试这样做，以便当您选择一些文本并选择此格式时，它会在文本周围放置一个边框并使用:before css 选择器来添加图像。

它似乎可以在 Chrome 中运行，但在 IE8 或 IE9 中不起作用（无法在其他浏览器版本中进行测试）。在 IE8 和 9 中，应用了格式（边框和将文本颜色更改为红色，但图像不出现

这是我的init 方法

tinymce.init({
    , theme                 : 'modern'
    , selector              : selector
    , entity_encoding       : 'named'
    , plugins               : ['table','contextmenu','paste','fullscreen','image','template','mention']
    , content_css           : contentcss
    , formats               : {
                                  Warning: { inline:'span', 'classes':'rte-warning' }
                              }
    , style_formats         : [
                                {
                                    title: 'Custom', items: [
                                        { title: 'Warning', format: 'Warning' }
                                    ]
                                }
                              ]
    , menubar               : false
});

还有我的css

.rte-warning
{
    display             : block;
    border              : 1px solid #FD9F08;
    background-color    : #FFFFFF;
    line-height         : 30px;
    padding             : 10px;
    color               : #FC2400;
    font-weight         : bold;
}
.rte-warning:before
{
    content             : "";  /* Empty string must be specified or image doesn't appear for some reason */
    background          : url('/img/rte/Warning.gif');
    display             : block;
    width               : 75px;
    height              : 30px;
    border              : 1px solid #D42E12;
    margin-right        : 10px;
}

【问题讨论】：

标签： javascript css internet-explorer tinymce tinymce-4

【解决方案1】：

我找到了问题的原因。这是 IE 关于 :before 选择器和 Quirks 模式的一个已知错误

【讨论】：