wysihtml is not defined
astroxoom opened this issue · comments
I'm using the latest version so far (installed with bower but relocated the files) then I have already set up everything.
By the way, i'm also using jQuery + Bootstrap + a Modal for my "Create Post"
When everything is already finished setting up, when I see my textarea it is just like a normal one, then I see my console log and it says that:
index.php:44 Uncaught ReferenceError: wysihtml is not defined
at index.php:44
<head>
<!-- Bootstrap Core CSS -->
<link href="https://github.com/assets/vendor/bootstrap/css/bootstrap.min.css" target="_blank" rel="nofollow" rel="stylesheet">
<!-- Website Core (CSS) -->
<link rel="stylesheet" href="../../../assets/css/adminpg.css">
<!-- For IE8 support of HTML5.elements and Media Queries (Responsiveness) -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- InlineTextEditor -->
<script src="../../../assets/wysihtml/dist/wysihtml.js"></script>
<script src="../../../assets/wysihtml/dist/wysihtml-toolbar.min.js"></script>
<script src="../../../assets/wysihtml/parser_rules/advanced.js"></script>
<script>
var editor = new wysihtml.Editor("wysihtml-textarea", { // id of textarea element
toolbar: "wysihtml-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules // defined in parser rules set
});
</script>
</head>
<body>
<!-- Add Page -->
<div class="modal fade" id="addPage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Page</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Page Title</label>
<input type="text" class="form-control" placeholder="Page Title">
</div>
<div class="form-group">
<label>Page Thumbnail Image:</label>
<input type="file" name="headerimage" style="display: inline" required accept="image/*">
</div>
<div class="form-group">
<label>Page Header Image:</label>
<input type="file" name="thumbnail" style="display: inline" required accept="image/*">
</div>
<div class="form-group">
<label>Page Content</label>
<div id="wysihtml-toolbar" style="display: none;">
<a data-wysihtml-command="bold">bold</a>
<a data-wysihtml-command="italic">italic</a>
<!-- Some wysihtml5 commands require extra parameters -->
<a data-wysihtml-command="foreColor" data-wysihtml-command-value="red">red</a>
<a data-wysihtml-command="foreColor" data-wysihtml-command-value="green">green</a>
<a data-wysihtml-command="foreColor" data-wysihtml-command-value="blue">blue</a>
<!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
<a data-wysihtml-command="createLink">insert link</a>
<div data-wysihtml-dialog="createLink" style="display: none;">
<label>
Link:
<input data-wysihtml-dialog-field="href" value="http://" class="text">
</label>
<a data-wysihtml-dialog-action="save">OK</a> <a data-wysihtml-dialog-action="cancel">Cancel</a>
</div>
</div>
<textarea id="wysihtml-textarea" placeholder="Page Body"></textarea>
</div>
<div class="form-group">
<label>Meta Description</label>
<input type="text" class="form-control" placeholder="Add Meta Description...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src='../../../assets/vendor/jquery/jquery.min.js'></script>
<!-- BootstrapJS -->
<script src='../../../assets/vendor/bootstrap/js/bootstrap.min.js'></script>
</body>
</html>
Check url to wysihtml.js
Open Developer console, switch to network tab and reload page. Filter by Javascript.
Sorry for late reply.
I've also put the wysihtml javascript files below the jQuery.
Here is the statistics (in particular order) [note that all time is 0ms]
jquery.min.js
wysihtml.js
wysihtml-toolbar.min.js
advanced.js
bootstrap.min.js
@astroxoom see
If you see 0 in "Transferred" or "Size" column it's because script isn't loaded at all.
@astroxoom try to disable any cache for test.
@Globulopolis I disabled it (when DevTools is opened) but still it is undefined, sorry for the late comment tho.
I changed
$(function() {
var editor = new wysihtml.Editor("wysihtml-textarea", {
toolbar: "wysihtml-toolbar",
parserRules: wysihtml5ParserRules
});
});
to:
(function($) {
var editor = new wysihtml.Editor("wysihtml-textarea", {
toolbar: "wysihtml-toolbar",
parserRules: wysihtml5ParserRules
});
});
There is no error anymore. However, the textarea is not displaying so well, even the toolbar is not showing up.
Hmmm... This is my code for editor and toolbar(using bootstrap for some menus and famfamfam iconpack for buttons)
http://demo.киноархив.com/static/wysihtml/
I updated my jquery and bootstrap javascript files, used jQuery(document).ready(function($){...});, and now I can use CTRL+B to bold text around my text-area, but now I cannot use the toolbar. Cannot read property 'querySelectorAll' of null
@astroxoom can you provide a demo of you code? Or jsfiddle example.
I replaced the wysihtml, all-commands, table_editing, toolbar with the one provided in the dist folder.
Now this errors came up, checked Network tab in Google Chrome, they have status of 200 which means OK.
Note that I didn't build this from npm, just cloned the repository then copied the files from the dist folder over to my own dist folder.