While developing a shop website for my first client, I needed a WYSIWYG editor for creating detailed journal posts. I chose Summernote because of its simplicity and ease of use. However, I encountered a small issue since I wasn't using Bootstrap for the site.
Summernote is a free WYSIWYG editor that typically integrates with Bootstrap, but it can also be used standalone. Here’s a step-by-step guide on how to set it up without Bootstrap:
Step 1: Include Required Files
First, make sure you load jQuery before Summernote's CSS and JS files. Here’s how to include them in your HTML:
<!-- Load jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Load Summernote -->
<script src="<?= base_url('summernote') ?>/summernote-lite.js"></script>
<link href="<?= base_url('summernote') ?>/summernote-lite.css" rel="stylesheet">Step 2: Initialize Summernote
Add the following script to initialize Summernote. Place this script inside your <body> tag, before the closing </body> tag:
<script>
// Initialize Summernote
$('#summernote').summernote({
placeholder: 'Hello, standalone UI',
tabsize: 2,
height: 250,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['codeview', 'help']]
]
});
</script>You can customize the toolbar options according to your needs.
Step 3: Add Summernote to Your Form
To use Summernote in your forms, include it in your HTML as follows:
<textarea class="summernote" id="summernote" name="deskripsiproduk"></textarea>
Note: Using <textarea> is essential because the <div> element doesn’t capture the input value correctly in non-Bootstrap setups.
Result
After following these steps, Summernote should be installed and functional on your site without Bootstrap. Here’s a preview of how it will look:
Hope you find this guide helpful!
