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.

Était-ce utile?

La 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>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top