TinyMCE removes my code and changes my html, none of the solution is working

377 views Asked by At

I am using Tiny MCE Editor, when i save my html text it removes my content automatically, i have reviewed many solutions on different forums but none of them resolves this problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>Receipt Creation Failure</title>  </head>    <body style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;">  <div style="border:1px; border-color:#003; border-style:solid; width:600px; float:left">        <div style="float:left; padding-top:20px; width:560px; padding:20px; min-height:200px; "> <strong>Dear Team, </strong><br />      <br />    There was a payment attempt from the Test named <b>{TestName}</b> placed at <b>{TestLocation}</b>. <br This is a system generated message, please do not reply to this email address since it is not monitored.<br />      <br />      <strong>Thank you <br />      xyz Support Team </strong></div>    <div style="width:580px; padding:10px; background-color:#132c4d; height:10px; text-align:right; clear:both; color:#FFF; text-decoration:none"><a style="color:#FFF; text-decoration:none;" href="https://emaar.service-now.com/" target="_blank">Contact Us</a> | <a href="http://xyz.ae/" target="_blank" style=" color:#FFF; text-decoration:none;">xyz.ae</a></div>  </div>  </body>  </html>

When i save this information, it converts it into

<p>Receipt Creation Failure</p>
<div style="border: 1px; border-color: #003; border-style: solid; width: 600px; float: left;">
<div style="float: left; padding-top: 20px; width: 560px; padding: 20px; min-height: 200px;"><strong>Dear Team, </strong><br /> <br /> There was a payment attempt from the Test named <strong>{TestName}</strong> placed at <strong>{TestLocation}</strong>. <br /> <br /> <strong>Thank you <br /> xyz Support Team </strong></div>
<div style="width: 580px; padding: 10px; background-color: #132c4d; height: 10px; text-align: right; clear: both; color: #fff; text-decoration: none;"><a style="color: #fff; text-decoration: none;" href="https://emaar.service-now.com/" target="_blank">Contact Us</a> | <a style="color: #fff; text-decoration: none;" href="http://xyz.ae/" target="_blank">xyz.ae</a></div>
</div>

Please help.

2

There are 2 answers

0
nicolallias On

This is not an answer, but the comments are not good at formatting code.

  1. This is a content editor, it will not behave like you expect with doctype and headers.
  2. Try to prune your HTML, keeping only the content of <body>. In your case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Receipt Creation Failure</title>
  </head>
  <body style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;">
    <div style="border:1px; border-color:#003; border-style:solid; width:600px; float:left">
      <div style="float:left; padding-top:20px; width:560px; padding:20px; min-height:200px; ">
        <strong>Dear Team, </strong>
        <br />
        <br />
        There was a payment attempt from the Test named <b>{TestName}</b> placed at <b>{TestLocation}</b>. <br This is a system generated message, please do not reply to this email address since it is not monitored.<br />
        <br />
        <strong>Thank you <br />
        xyz Support Team </strong>
      </div>
      <div style="width:580px; padding:10px; background-color:#132c4d; height:10px; text-align:right; clear:both; color:#FFF; text-decoration:none">
        <a style="color:#FFF; text-decoration:none;" href="https://emaar.service-now.com/" target="_blank">Contact Us</a>
        |
        <a href="http://xyz.ae/" target="_blank" style=" color:#FFF; text-decoration:none;">xyz.ae</a>
      </div>
    </div>
  </body>
</html>

Becomes:

<div style="border:1px; border-color:#003; border-style:solid; width:600px; float:left">
  <div style="float:left; padding-top:20px; width:560px; padding:20px; min-height:200px; ">
    <strong>Dear Team, </strong>
    <br />
    <br />
    There was a payment attempt from the Test named <b>{TestName}</b> placed at <b>{TestLocation}</b>. <br This is a system generated message, please do not reply to this email address since it is not monitored.<br />
    <br />
    <strong>Thank you <br />
    xyz Support Team </strong>
  </div>
  <div style="width:580px; padding:10px; background-color:#132c4d; height:10px; text-align:right; clear:both; color:#FFF; text-decoration:none">
    <a style="color:#FFF; text-decoration:none;" href="https://emaar.service-now.com/" target="_blank">Contact Us</a>
    |
    <a href="http://xyz.ae/" target="_blank" style=" color:#FFF; text-decoration:none;">xyz.ae</a>
  </div>
</div>

  1. Maformed HTML:

    <br This is a system generated message, please do not reply to this email address since it is not monitored.

In the end you should have more or less what TinyMCE got.

1
Roland Veres On

Did you try the tinyMCE.activeEditor.getContent({format : 'raw'}); ?