Super Simple WYSIWYG Editor
Tuesday January 19, 2016
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. An overview of summernote, how to download and use, basic features and examples, and more.
Requires HTML5 doctype
Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>Include js/css
Summernote uses open source libraries(jQuery, Bootstrap, font-awesome). Include the Following code in your HTML <HTML> tag
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.3/summernote.js"></script>
Don't forget to change the file's path if you downloaded summernote in a different folders.
Insert
Add div into body; this targeted element will later be rendered to summernote editing tool.
<div id="summernote">Hello Summernote</div>Run summernote
Run the script below when document is ready!
$(document).ready(function() {
$('#summernote').summernote();
});
