jquery.html() interpret html entities

Question

I'm dealing with a rich text editor, but when I try to insert hmtl entities in my "contenteditable" div using jQuery.html() these entities get interpreted.

If I do:

<textarea><b>Hey, look.. this is how do yo make your text bold:</b>&gt;b&lt&;{text}&gt;/b&lt;</textarea>

And trying to convert that textarea in a rich text editor using:

this.$editor.html($textarea.val());

What I expect:

Hey, look.. this is how do yo make your text bold:

<b>{text}</b>

What I get:

Hey, look.. this is how do yo make your text bold: {text}

Obviously, I cant use jQuery.text() in this case... Any ideas? Change my editor it's not a choice.

EDIT: Example, here: http://jsfiddle.net/nNuKk/3/

Give your RTE a code button that places said html in <pre> and/or <code> tags. — user400654
– user400654, Commented Apr 30, 2013 at 15:36

Danita · Accepted Answer · 2013-05-02 14:02:43Z

3

As per jsfiddle in comment Here is Another working example the key here is to escape even the ampersand & in < or >.

just make the text in text area look like below

 <b>Hey, look.. this is how do you make your text bold:</b>
&amp;lt;b&amp;gt;{text}&amp;lt;/b&amp;gt;

If this what you are looking for accept the answer:) or let me know your comments/concerns.

working example Suppose

 <body>
    <textarea id="myid"><b>Hey, look.. this is how do yo make your text bold:</b>&gt;b&lt&;{text}&gt;/b&lt;</textarea>

    <div id=2>

    </div>
</body>

and then javascript

   $("#2").text($("#myid").val());

SO in your case you should use

this.$editor.text($textarea.val());

instead of

this.$editor.html($textarea.val());

If this does not work let me know what element type is your $editor textarea orspan or anything else

If above does not work try this

 var temp=$("<div></div>").text($textarea.val()).html(); //temp will contain the escaped representation
 this.$editor.html(temp);

edited May 2, 2013 at 14:02

Danita

2,5344 gold badges23 silver badges30 bronze badges

answered Apr 30, 2013 at 15:40

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rahul maindargi Over a year ago

Hey Thanks for JS Fiddle updating answer

neiker Over a year ago

It's so obvious that I cannot believe that I haven't realized before. Thank you!!

Stephen · Accepted Answer · 2013-04-30 15:38:23Z

0

You've left out details - like which rich editor your using but it sounds like .html() that your editor is using is not the same as .html() which jquery uses to manipulate the DOM (since if that were the case, what you're trying to do would work)

Your actual solution will depend on the implementation of the editor in question...

answered Apr 30, 2013 at 15:38

Stephen

3,4421 gold badge24 silver badges22 bronze badges

2 Comments

neiker Over a year ago

Thanks, Stephen. I just add a link with code example, check it ;)

Stephen Over a year ago

Alright, the problem is you can't have it both ways.. If you use .val(), you'll get the value of the textarea which inteperts the entities as their underlying characters.. If you change it to use .html() on the textarea you'll get the content with the tags..

Collectives™ on Stack Overflow

jquery.html() interpret html entities

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related