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: /
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
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/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
- Try uploading your mock to jsfiddle or anywhere we can see it (not)running – ffflabs Commented Nov 27, 2013 at 23:49
- "cannot read property 'fn' of undefined" most probably means that you haven't included jQuery in your page – Phil Commented Nov 27, 2013 at 23:50
- Included the JSFiddle link in the post. – user2859066 Commented Nov 28, 2013 at 0:21
- "Within my body I have <div id="editor">Editor</div>" Within your body? Does it hurt? – Lajos Arpad Commented Nov 28, 2013 at 3:19
2 Answers
Reset to default 4The 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./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
"cannot read property 'fn' of undefined"
usually means that the script does not have script being loaded into DOM. You might are missing jQuery file? I have often noticed that it is being a practice for jQuery scripts to be loaded right in the bottom of HTML, right before
</body>
But, it always works so well if I loaded only one Jquery file in header meanwhile the rest of other jquery plugin scripts loaded in the bottom of the html file.