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 ">
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</p>
<p style="text-align: center;">Center</p>
<p style="text-align: left;">Left Align</p>"></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 > and <
I see the problem but am not sure how to fix it.