Summernote WYSIWYG Editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
Official documentation
For more detailed information and examples, see the official documentation: Summernote WYSIWYG Editor.
How to use?
To add hs.summernote-editor.js
in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/summernote/dist/summernote-lite.css">
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/summernote/dist/summernote-lite.js"></script>
Copy-paste the following <script>
near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.summernote-editor.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of text editors
$.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor');
});
</script>