How to add Summernote Editor to a web page using Javascript?

To add the Summernote editor to a web page, we first need to include the Summernote CSS and JS files in the head of the HTML document. Next, we need to initialize the Summernote editor on a specific text area or div element by calling the Summernote function. Finally, we can customize the editor's options and functionality by passing the options as objects to the Summernote function.

Let’s first understand what the Summernote editor is.

What is Summernote?

• Summernote is a JavaScript library that allows the creation and editing of rich text in web pages.

• It is a WYSIWYG (What You See Is What You Get) editor that provides a user-friendly text formatting interface.

• Summernote supports multiple features such as text formatting, lists, images, videos, and links.

• It is easy to integrate and customize, offering a variety of options and plugins.

• Summernote is open source and actively maintained, with a strong community and regular updates.

We will use HTML jQuery to integrate the Summernote editor. Let us discuss the same method.

method

• Include 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 text area element in HTML to display the Summernote editor -

<textarea id="summernote"></textarea>

• In a 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 the 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 contents 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>');

• Use ajax method to save content to server -

$('#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 working on your web pages.

Example

   
   
   
   

   
      <textarea id="summernote"></textarea>
      Save
      <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>
   

illustrate

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 at the head of the document and also include the jQuery library since it is a dependency of 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 editor's contents to the server using an ajax request.

The above is the detailed content of How to add Summernote Editor to a web page using Javascript?. For more information, please follow other related articles on the PHP Chinese website!