Meteor: Has anyone used Summernote editor successfully?

Question

Has anyone used the Summernote editor with Meteor successfully?

See http://hackerwins.github.io/summernote/

I included the following div in my template:

      <div id="summernote">Hello Summernote</div>

I instantiated like so:

    Template.sometemplate.rendered = function(){
        $('#summernote').summernote({
            height: 200,   //set editable area's height
            focus: true    //set focus editable area after Initialize summernote
        });


    }

Error message in the console:

     Resource interpreted as Script but transferred with MIME type text/html:
         "http://localhost:3000/summernote.min.js". newcontentlayout:138
     Uncaught SyntaxError: Unexpected token < summernote.min.js:1
     Exception from Deps afterFlush function function: TypeError: undefined is not a function
     at Object.Template.contentLayoutNew.rendered (http://localhost:3000/client/views/contentlayouts/contentlayout_new.js?cb9b5cd577322a6aec6c2ac6819121e7f43b8dc2:6:22)
at http://localhost:3000/packages/ui.js?f0696b7e9407b8f11e5838e7e7820e9b6d7fc92f:426:23
at _assign.flush (http://localhost:3000/packages/deps.js?91f1235baecd83915f7d3a7328526dbba41482be:345:13) debug.js:41
     event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 

Any ideas appreciated?

Answer 1

I proved the editor and works perfectly. I put the code the editor in the folder Client because it works with object window. After that, your code could to be of the following way.

.html

<template name="editor">
  <div id="summernote">Hello Summernote</div>
</template>

.js in folder Client

Template.editor.rendered = function() {
     $('#summernote').summernote({
         height: 200,   // set editable area's height
         focus: true    // set focus editable area after Initialize summernote
     });
}

Files of the editor

summernote.min.js
summernote.css
summernote-bs2.css
summernote-bs3.css