javascript - TinyMCE custom format with :before selector -
i'm trying setup custom format in tinymce.
i'm trying make when select text , choose format, puts border around text , uses :before
css selector prepend image.
it seems working in chrome, not in ie8 or ie9 (haven't been able test in other browser versions). in ie8 , 9, format applied (the border , changing text color red, image doesn't appear
here init
method
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 });
and 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 specified or image doesn't appear reason */ background : url('/img/rte/warning.gif'); display : block; width : 75px; height : 30px; border : 1px solid #d42e12; margin-right : 10px; }
i've found cause of problem. it's known bug ie regarding :before selector , quirks mode
Comments
Post a Comment