Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Approach
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://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
Create a textarea element in your HTML where you want the Summernote editor to appear −
<textarea id="summernote"></textarea>
In your JavaScript file, initialize the Summernote editor on the textarea element −
$(document).ready(function() {
$('#summernote').summernote();
});
If you want to customize the options of the Summernote editor, you can pass an options object to the summernote() function −
$(document).ready(function() {
$('#summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true // set focus to editable area after initializing summernote
});
});
To access the content of the editor, you can use the code() function −
var content = $('#summernote').summernote('code');
To set the content of the editor, you can use the code() function and pass the content as a string −
$('#summernote').summernote('code', '<p>This is the content of the editor.</p>');
Save the content to the server using the ajax method −
$('#save').click(function(){
var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
$('.summernote').destroy();
$.ajax({
url: '/save',
type: 'post',
data: {content: aHTML},
success: function(){
alert('Your content was successfully saved');
}
});
});
That's it! Your Summernote editor should now be functional on your webpage.
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>
<textarea id="summernote"></textarea>
<button id="save">Save</button>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true // set focus to editable area after initializing summernote
});
});
$('#save').click(function(){
var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
$('.summernote').destroy();
$.ajax({
url: '/save',
type: 'post',
data: {content: aHTML},
success: function(){
alert('Your content was successfully saved');
}
});
});
</script>
</body>
</html>
Explanation
In this example, we have a textarea element with the id "summernote" where the Summernote editor will appear. We include the Summernote CSS and JavaScript files in the head of the document, and also include the jQuery library as it is a dependency for Summernote.
In the script section, we initialize the Summernote editor on the textarea element with some options. We also have a button with the id "save" which when clicked will save the content of the editor to the server using an ajax request.
2K+ Views
