Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
SummerNote WYSIWYG Text Editor
16th July 2020
3 mins read
Share On
Hola! Let's integrate the SummerNote WYSIWYG text editor for our HTML textarea.
What we will cover in this article
- Why SummerNote WYSIWYG Editor
- Downloading The SummerNote Libraries
- HTML File Structure
- Simple Implementation
- Toolbar Customization
- Complete Example Code
NOTE: Code available in GitHub @ SummerNote WYSIWYG Editor
SummerNote Official Website
1) Why SummerNote WYSIWYG Editor
I highly recommend SummerNote because of the following advantages
- Firstly, It's open-source
- Very minimal, simple & beautiful
- Inserting external videos is a piece of cake
- Images get auto
base64encoded and will be saved to your database, off-course you can make it to save to the specific path - Enabling & disabling feature's are at the tip of your fingers
- Works out of the box with Bootstrap 3 & Bootstrap 4 versions
2) Downloading The SummerNote Libraries
I will use CDN (Content Delivery Network) instead of downloading and placing them in my HTML file. But if would like to work offline then please go ahead and use the URLs to download the content and save them with respective file names.
jQuery
CDN / Download URL - jQuery CDN
SummerNote Bootstrap 4 Library
CDN / Download URL - SummerNote JS
CDN / Download URL - SummerNote CSS
SummerNote Lite Without Any FrameWork
CDN / Download URL - SummerNote JS
CDN / Download URL - SummerNote CSS
3) HTML File Structure
In the following HTML file structure, I am using SummerNote lite version without any framework
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SummerNote Demo</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
<!-- Your HTML Body Goes Here -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
</body>
</html>
4) Simple Implementation
Let's instantiate the textarea with summernote js
HTML Textarea
<div>
<label for="body">Body</label> <br>
<textarea name="body" id="body" rows="10"></textarea>
</div>
Make sure to add id or class attribute for textarea as we will be using the same to instantiate the same for summernote
SummerNote Javascript
<script>
$(document).ready(function() {
$('textarea#body').summernote({
height: '300px'
});
});
</script>
And you will be able to see the following default textarea converted to very beautiful WYSIWYG editor as follows
SummerNote Basic Textarea Style
5) - Toolbar Customization
Now we got to know how to setup SummerNote text editor. Let's customize toolbar a bit
$(document).ready(function() {
$('textarea#body').summernote({
/** Default place holder for the WYSIWYG editor */
placeholder: 'Enter your body',
/** Height Settings */
height: '300px',
/** Toolbar settings */
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
});
The settings are self-explanatory so I have not added much on it. Now our text editor looks like the following
SummerNote WYSIWYG Editor Customized
6) Complete Example Code
Following is the complete code for the summernote text editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SummerNote Demo</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<!-- Your HTML Body Goes Here -->
<div>
<label for="body">Body</label> <br>
<textarea name="body" id="body" rows="10"></textarea>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
$(document).ready(function() {
$('textarea#body').summernote({
/** Default place holder for the WYSIWYG editor */
placeholder: 'Enter your body',
/** Height Settings */
height: '300px',
/** Toolbar settings */
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
});
</script>
</body>
</html>
Conclusion
Hope you enjoyed the article. Please share it with your friends.
NOTE: Code available in GitHub @ SummerNote WYSIWYG Editor
Articles For You
Why You Should Run Cronjobs In Laravel?
Laravel 7.x Multiple Database Connections, Migrations, Relationships & Querying
Composer Install v/s Composer Update
Getting Started With AMP (Accelerated Mobile Pages)
Automate Repeating Tasks In Linux Server With Cronjobs
Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP
Resolve 404 Not Found In NGINX
Dependency Dropdowns With Javascript And PHP
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Push Files To CPanel / Remote Server using FTP Software FileZilla
Multiple GIT Key Pairs Or Account In The Same Computer
Laravel Last Executed Query In Plain SQL Statement For Debugging
