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>
Basic example
<div class="u-summernote-editor">
<div class="js-summernote-editor" data-height="300"></div>
</div>
Attributes
All data attributes are transformed as follows:
from:
fontNames
to:
data-font-names
look at the parameter on the official documentation page of the plugin: https://summernote.org/deep-dive and paste the data attribute according to this transformation.
Methods
The methods work as follows:
from:
$('#summernote').summernote('insertText', 'hello world');
to:
$.HSCore.components.HSSummernoteEditor.method('#summernote', 'insertText', 'hello world');
- look at the method on the official documentation page of the plugin: https://summernote.org/deep-dive and insert the data attribute according to this transformation.
Callbacks
Callbacks work like this:
$('#summernote').summernote({
callbacks: {
onFocus: function() {
console.log('Editable area is focused');
}
}
});
to:
$.HSCore.components.HSSummernoteEditor.init('#summernote', {
callbacks: {
onFocus: function() {
console.log('Editable area is focused');
}
}
});
- look at the callback on the official documentation page of the plugin https://summernote.org/deep-dive and insert it according to the example above.