How do you insert a string of escaped HTML that is larger than 4096 bytes into a CKEditor instance?

Question

I recently brushed up against Firefox's 4096 byte (4KB) limit for individual XML nodes when using Paul Schreiber's unescapeHtml string method to insert a large string of escaped HTML into a CKEditor instance. This approach did not handle a string over 4KB in size in Firefox 3.5.3 due to the browser splitting the content into multiple nodes once the 4096 byte limit for each node was reached. Instead of the full string being returned, only the first 4096 bytes are returned in Firefox 3.5.3 when using this unescapeHtml method.

What is the most direct and efficient way to get around this 4KB node limit?

Answer 1

I will offer my first approach to solving the node size limit issue. I modified the unescapeHtml code to handle Firefox's splitting of the data into multiple nodes by creating a loop that cycles through each childNode and appends the nodeValues to the result. The function then cleans up the nodes with the help of Matt Thommes' concise remove all child nodes code

My code is listed below:

 //htmlToCKEditor
 // Arguments:
 //  1. contentCK - Escaped content (likely HTML) to be inserted into CKEditor. (string)
 // 2. targetCK- The ID of the target CKEditor instance. (string)
 // Creates a temporary element, inserts the escaped content into the innerHTML,
 // loops over every childNode, appends each nodeValue to the result string,
 // removes the temporary element's child nodes, sets the data of the CKEditor to the new unescaped value.
 function htmlToCKEditor (contentCK,targetCK) {

  // Return false if there's no target CKEditor instance
  if (!(targetCK.match(/\w+/))){
   return false;
  }

  if (contentCK.match(/\w+/)){
   var thisHTML = unescape(contentCK);
   var temp = document.createElement("div");
   temp.innerHTML = thisHTML;

   // Loop over childNodes and append values to result variable.
   var result = '';
   for (var i=0; i < temp.childNodes.length; i++){
    result += temp.childNodes[i].nodeValue;
   }

   // Cleanup from Matt Thommes
   if (temp.hasChildNodes()){
    while (temp.childNodes.length >= 1){
     temp.removeChild(temp.firstChild);
    } 
   }

   // Set CKEditor instance of choice with the newly unescaped result.
   CKEDITOR.instances[targetCK].setData(result);
  }else{
   CKEDITOR.instances[targetCK].setData('');
  }
  return true;
 }

There are a number of alternate approaches one could take to accomplish this and so I refined my question and split my code out as an answer. I'm curious to read more solutions to this question, as I am not entirely familiar with the CKEditor methods and there may be a simpler solution built in to CKEditor.