【问题标题】:tinymce is changing the html codetinymce 正在更改 html 代码
【发布时间】:2016-01-21 05:42:14
【问题描述】:

您好,我在我的应用程序中使用了 tiny mce 主要版本 3。下面是初始化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>

当我在 tiny mce 中加载 html 代码时,它正在更改现有的 html 代码,如下所示。

我写的HTML代码:

  <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">
               one <br/> <br/>
               two <br/> <br/>
               three <br/><br>
               four <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> to subscribe our newsletter for 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>

tinymce生成的html代码

  Confirmation Letter
  <table width="700" border="0" cellspacing="0" cellpadding="0">
  <tbody>
  <tr>
    <td align="left">
     <p><font size="2" face="Verdana"> one <br /> <br /> two <br /> <br /> three <br /><br /> four <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> to subscribe our newsletter for 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>

我将“ul”标签也保留在“p”标签内,以便应用字体大小 2。但微小的 mce 将“ul”标签保留在“p”标签之外,结果字体大小 2 不适用。因此,普通文本的字体大小与 "ul" 内的文本之间存在差异。 请帮助我解决此问题,以便字体大小 2 也应应用于“ul”项目。谢谢你

【问题讨论】:

    标签: html css tinymce


    【解决方案1】:

    那是因为您的代码不是有效的 HTML 代码,Tiny MCE 修复了它。更多信息请查看this answer

    【讨论】:

    • 我明白了。谢谢你。请建议我如何将字体大小 2 包装到“ul”元素。
    • @rajanichowdhary font 在 html5 中标记 not supported。而不是size="2",您可能会使用CSS。例如ul li {font-size:15px}。这是一个非常简单的例子。在w3cschool 上阅读更多相关信息
    • 谢谢我明白了。如果我们想在 html4 中,是否有可能将字体标签应用于“ul”元素。
    猜你喜欢
    • 1970-01-01
    • 2017-08-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-18
    • 2016-06-25
    相关资源
    最近更新 更多