Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add Summernote Editor to the webpage in Javascript?
To add Summernote Editor in a webpage, we first need to include the Summernote CSS and JS files in the head of our HTML document. Next, we need to initialize the Summernote editor on a specific text area or div element by calling the Summernote function on it. Finally, we can customize the editor's options and functionality by passing options as an object to the Summernote function.
Let us first understand what Summernote editor is.
What is Summernote?
Summernote is a JavaScript library that allows for the creation and editing of rich text within a web page.
It is a WYSIWYG (What You See Is What You Get) editor, providing a user-friendly interface for formatting text.
Summernote supports a variety of features such as text formatting, lists, images, videos, and links.
It is easy to integrate and customize, with a wide range of options and plugins available.
Summernote is open-source and actively maintained, with a strong community and regular updates.
We will be using HTML + jQuery to integrate summernote editor. Let us discuss the approach for the same.
Prerequisites
Before integrating Summernote, ensure you have:
jQuery library (Summernote depends on jQuery)
Bootstrap CSS (optional, but recommended for better styling)
Summernote CSS and JavaScript files
Step-by-Step Implementation
Step 1: Include Required Files
Include the Summernote CSS and JavaScript files in the head of your HTML document:
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
Step 2: Create HTML Structure
Create a textarea element in your HTML where you want the Summernote editor to appear:
<textarea id="summernote"></textarea>
Step 3: Initialize the Editor
In your JavaScript file, initialize the Summernote editor on the textarea element:
$(document).ready(function() {
$('#summernote').summernote();
});
Customization Options
You can customize the Summernote editor by passing an options object:
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
});
Working with Content
Get Content from Editor
To access the content of the editor, use the code() function:
var content = $('#summernote').summernote('code');
console.log(content);
Set Content in Editor
To set the content of the editor programmatically:
$('#summernote').summernote('code', '<p>This is the content of the editor.</p>');
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Summernote Editor Example</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
</head>
<body>
<div style="padding: 20px;">
<h1>Summernote Editor Demo</h1>
<textarea id="summernote"></textarea>
<br><br>
<button id="getContent">Get Content</button>
<button id="setContent">Set Sample Content</button>
</div>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
placeholder: 'Start typing here...'
});
$('#getContent').click(function() {
var content = $('#summernote').summernote('code');
alert('Content: ' + content);
});
$('#setContent').click(function() {
$('#summernote').summernote('code', '<h2>Sample Content</h2><p>This is a <strong>sample</strong> content with <em>formatting</em>.</p>');
});
});
</script>
</body>
</html>
Common Configuration Options
| Option | Type | Description |
|---|---|---|
height |
Number | Editor height in pixels |
focus |
Boolean | Set focus on editor after initialization |
placeholder |
String | Placeholder text when editor is empty |
toolbar |
Array | Customize toolbar buttons |
Conclusion
Summernote provides a powerful and easy-to-integrate WYSIWYG editor for web applications. With jQuery dependency and simple initialization, you can quickly add rich text editing capabilities to your webpage with extensive customization options.
4K+ Views
