Redactor - getting Failed to execute 'insertBefore' on 'Node' error with Meteor

Question

I am trying to use Redactor with Meteor 1.0. I have tried to combine with this approach, as when I just included it straight I got the doubled up text: https://github.com/Swavek/contenteditable

Error details:

Exception from Tracker recompute function: Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at Error (native) at Function.DOMRange._insertNodeWithHooks (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:379:12) at Function.DOMRange._insert (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:348:16) at DOMRange.attach (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:425:16) at DOMRange.setMembers (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:469:12) at doMaterialize (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1866:22) at Object.Tracker.nonreactive (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:502:12) at doRender (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1856:15) at http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1795:16 at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2029:12)

My code looks something like:

<template name="contenteditable">

   {{{editable}}}

</template>


Template.contenteditable.helpers({
    editable: function () {
        var displayContent = "Please type something...";
        if (this.content){
            displayContent = this.content;
        }

        return '<div class="rich-text-editor" tabindex=0>' +  displayContent + '</div>';
     }

});

Template.contenteditable.rendered = function(){
    $('.rich-text-editor').redactor({
         blurCallback: function(e)
         {


             e.preventDefault();
             e.stopImmediatePropagation();

             var blurredItem = e.currentTarget;

          console.log("Blaze.getData(blurredItem)._id:" + Blaze.getData(blurredItem)._id + " val:" + this.code.get())





         <DO SOME UPDATE STUFF>

         }
    });
}

Any ideas? Perhaps I need to use the .html/innerHTML approach instead?

Answer 1

I could not get this working with https://github.com/Swavek/contenteditable approach

I ended up reverting the the autorun/html replacement approach and it works!

As defined here https://github.com/meteor/meteor/issues/1964 it's not as neat as the Swavek one, perhaps I was doing something silly?