css - tinymce is changing the html code -
hi using tiny mce major version 3 in application. below code initialize tinymce.
<!doctype html> <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script> <script> tinymce.init({ width : "100%", height : "100%", theme : "advanced", selector :"textarea#elm1", plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks", paste_retain_style_properties : 'all', valid_children : "+span[div],+var[div|p]", forced_root_block : "", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,forecolor,backcolor,|,undo,redo,|,bullist,numlist,|,fontselect,fontsizeselect,|,code", plugins: "fullscreen", toolbar: "fullscreen", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : false, convert_fonts_to_spans : false, cleanup_on_startup : false, cleanup : false, // style formats style_formats : [ {title : 'bold text', inline : 'b'}, {title : 'red text', inline : 'span', styles : {color : '#ff0000'}}, {title : 'red header', block : 'h1', styles : {color : '#ff0000'}}, {title : 'example 1', inline : 'span', classes : 'example1'}, {title : 'example 2', inline : 'span', classes : 'example2'}, {title : 'table styles'}, {title : 'table row 1', selector : 'tr', classes : 'tablerow1'} ], setup : function(ed) { ed.onbeforerenderui.add(function(ed, cm) { }); ed.onloadcontent.add(function(ed, o) { }); } }); </script> <body> <textarea id="elm1" name="area"></textarea> </body> when loaded html code in tiny mce changing existing html code given below.
html code wrote :
<head> <title>confirmation letter</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body vlink="#666633" alink="#ffffcc" bgcolor="#ffffff" link="#cc9966"> <table width="700" height="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"> <p> <font size="2" face="verdana"> 1 <br/> <br/> 2 <br/> <br/> 3 <br/><br> 4 <br><br> <strong>list of items</strong> <ul> <li>list1 data1</li> <li>list2 data2</li> <li>list3 data3</li> </ul> click <a href="file1">here</a> subscribe our newsletter exclusive promotions. </font> <font size="1" face="verdana"> <br/><a href="file2">privacy policy</a>. </font> </p> <a href="file3"><img border="0" src="image1" align="right"></a> <br/> </td> </tr> </tbody> </table> </body> html code generated tinymce
confirmation letter <table width="700" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="left"> <p><font size="2" face="verdana"> 1 <br /> <br /> 2 <br /> <br /> 3 <br /><br /> 4 <br /><br /> <strong>list of items</strong></font></p> <ul> <li>list1 data1</li> <li>list2 data2</li> <li>list3 data3</li> </ul> <p><font size="2" face="verdana">click <a href="file1">here</a> subscribe our newsletter exclusive promotions. </font> <font size="1" face="verdana"> <br /><a href="file2">privacy policy</a>. </font></p> <a href="file3"><img src="image1" alt="" align="right" border="0" /></a> </td> </tr> </tbody> </table> i kept "ul" tag within "p" tag in order apply font size 2. tiny mce keeping "ul" tag outside "p" tag result font size 2 not applying. result there difference between font size of normal text , text within "ul" . please me how resolve issues font size 2 should applied to "ul" item well. thank you
that because code not valid html code , tiny mce fixed it. @ this answer more information.
Comments
Post a Comment