CLEditor/TinyMCE rendering incorectly

StackOverflow https://stackoverflow.com/questions/19933991

Question

I am attempting to incorporate CLEditor into one of my applications. But somewhere this is a disconnect causing some rendering problems.

Front end uses jQuery/HTML/CSS backend is using Java/Oracle/Spring/Struts 2 and I am not quite sure where the problem is surfacing. I think it is CLEditor getting confused somehow.

My code looks like the following.

<textarea id="editor" name="contractTemplate.contractBody" value="${contractTemplate.contractBody}"></textarea>

And further down the page I have CLEditor set ups as follows:

<script type="text/javascript">
  $(function() {

    $('#editor').cleditor({
      width: 'auto',
      height: 300,
      controls: "font bold italic | " +
              "bullets numbering | " +
              "alignleft center alignright justify | " +
              "outdent indent | " +
              "undo redo " +
              "rule | cut copy paste pastetext | print source",
      fonts: // font names in the font popup
              "Arial,Arial Black,Courier New,Narrow,Garamond," +
              "Georgia,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
      bodyStyle: "margin:4px; font: 10pt Arial, Verdana; cursor:text",
      docType: '<!DOCTYPE html>'
    });


  });
</script>

When I first load up the page that the textarea lives on it displays nicely. I am able to format things as I wish using left align, right align, center. I am able to create proper looking ul and ol (most of the functions I need). I am also able to view the code using the Show Source provided. I submit to my Action and it saves the formatted text I sent in a CLOB as expected. However when I revisit the page to edit (one of my use cases) previously formatted text is damaged... Typically if I have right aligned some text it strips tags from it forcing a left align and a "> is added to the end of the textarea. You can imagine the confusion that gets introduced from there. If you don't catch the "> and save it removes all text with only the "> surviving and a subsequent save will leave you with "&gt; saved to the database.

Where might this problem be coming from? I have been unable to find anyone having a similar problem searching around thus far.

Thanks in advance for your help!

Edit:

Perhaps the problem has nothing to do with CLEditor... I just threw TinyMCE with a quick install:

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
        tinymce.init({selector:'textarea'});
</script>

And I get the same behavior...

Edit:

Further investigation shows that somewhere along the line things are not being escaped properly.

This is from the Inspect Element feature:

<textarea aria-hidden="true" style="display: none;" id="editor" name="contractTemplate.contractBody" value="<p style=" text-align:="" right;"="">Right Align&lt;/p&gt;
&lt;p style="text-align: center;"&gt;Center&lt;/p&gt;
&lt;p style="text-align: left;"&gt;Left Align&lt;/p&gt;"&gt;</textarea>

As you can see the the value="<p style" ends up closing the quote and does not escape things properly. the further down the page things change from < and > to &gt; and &lt; I see the problem but am not sure how to fix it.

Was it helpful?

Solution

Someone hopefully will benefit from my lack of paying attention... There is nothing wrong with either of the editors. The problem described above was a matter of me not paying attention to what I was doing. Rather than removing the question I will leave it so that hopefully someone will search and see what I did wrong to fix their problem...

When using a textarea do not use <textarea value="some value"></textarea> Use <textarea>some value</textarea>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top