internet-explorerinternet-explorer-9cleditor

Using cleditor in Internet Explorer 9 causes double-quotes to be incorrectly escaped


I've scoured the internet looking for an answer to this problem but, alas, I am forced to ask for help.

I am using the cleditor jQuery plugin for its Rich Text/HTML editing capabilities. For the most part, it works fine. However, there's a weird problem if I do the following in IE9:

  1. Click the "Show Source" button at the top right of the toolbar to switch to HTML Mode
  2. Paste the following snippet:

    <p>Note the double-quotes</p>
    <div onclick='alert("hi")'>click me</div>
    
  3. Switch back to Rich Text Mode and make a trivial change (for e.g., add a space)

  4. Switch again to HTML Mode

Note how the double-quotes are now incorrectly escaped like this:

<div onclick="alert(\"hi\")">click me</div>

What the heck is going on here? Other browsers escape the double-quotes properly like this:

<div onclick="alert(&quot;hi&quot;)">click me</div>

I've tried to using the entity, &quot;, myself but it doesn't matter - IE9 still messes it up. Does anyone know how to overcome this issue?


Solution

  • Nevermind, I figured it out. If anyone else is struggling with this issue, I think it's the combination of using cleditor, the XHTML plugin and Internet Explorer.

    You can fix it by adding this JavaScript Snippet before your cleditor code:

    (function ($) {
        var oldCallback = $.cleditor.defaultOptions.updateTextArea;
    
        $.cleditor.defaultOptions.updateTextArea = function (html) {
            if (oldCallback) {
                html = oldCallback(html);
            }
    
            var isIE = /*@cc_on!@*/false;
            if (isIE) {
                return html.replace(/\\\"/g, "&quot;");
            } else {
                return html;
            }
        };
    })(jQuery);
    

    Alternatively, you can do the conditional replacement in jquery.cleditor.js (line 1126 for cleditor v1.3.0).