JQuery - cannot read property 'Editor' of undefined

user2859066 picture user2859066 · Nov 28, 2013 · Viewed 16.7k times · Source

I'm trying several WYSIWYG HTML5/JQuery editors. However, with both Bootstrap WISWYG and Summernote, I get 'cannot read property 'fn' of undefined' or 'cannot read property 'Editor' of undefined. I'm just using the standard files out there on GitHub. Anyone familiar with these errors using JQuery plugins?

EDIT

I'm now trying Bootstrap WISWYG

Within my body I have

<div id="editor">Editor</div>

In my js, I have

$(document).ready(function() {
  $('#editor').wysihtml5();
});

However, the error I get is: Cannot read property 'Editor' of undefined (line 157)

Line 157:

var editor = new wysi.Editor(this.el[0], options);

JSFiddle: http://jsfiddle.net/MgcDU/8125/

EDIT 2

I forgot to include one JS file. However, after including it I get a new error:

Uncaught TypeError: Cannot read property 'firstChild' of undefined

The lines of code that the error refers to:

if (isString) {
  element = wysihtml5.dom.getAsDom(elementOrHtml, context);
} else {
  element = elementOrHtml;
}

while (element.firstChild) <<<Error

Answer

Jos&#233; SAYAGO picture José SAYAGO · Nov 28, 2013

The thing is you are using a DIV element instead of a textarea there are also dependencies missing. Checking the Bootstrap WYSIHTML5 page it says:

Dependencies:

  • bootstrap-wysihtml5.js
  • bootstrap-wysihtml5.css
  • wysihtml5
  • Twitter Bootstrap

Then your document should look something like:

<!DOCTYPE html>
<header>
    <title>HTML5 Editor</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Of course place sources in your own server, do not leech bandwidth -->
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/src/bootstrap-wysihtml5.css">
</header>
<body>
   <textarea class="editor"></textarea>
   <script type="text/javascript">
       $(document).ready(function(){
           $('.editor').wysihtml5();
       });
   </script>
</body>

For further reference, please check: Wysihtml5 #Usage