Summernote

https://summernote.org/
Admin
Summernote is a super simple WYSIWYG editor built on Bootstrap that allows users to easily create...
Tokens:17,633
Snippets:118
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Complete Summernote Basic Example Page

Source: https://summernote.org/getting-started

This is a full HTML example demonstrating how to set up and run Summernote. It includes all necessary CSS and JavaScript includes, along with the Summernote initialization script, providing a ready-to-use test case.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>
```

--------------------------------

### Summernote Integration with Bootstrap 5

Source: https://summernote.org/getting-started

This example demonstrates integrating Summernote with Bootstrap 5. It includes jQuery, Bootstrap 5 CSS/JS, and Summernote's Bootstrap 5 specific files. The code initializes Summernote on a div with the id 'summernote' with placeholder text.

```html
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 5</title>
    <!-- include libraries(jQuery, bootstrap) -->
    <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- include summernote css/js-->
    <link href="summernote-bs5.css" rel="stylesheet">
    <script src="summernote-bs5.js"></script>

  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 5',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>
```

--------------------------------

### Summernote Initialization with Language Support (jQuery)

Source: https://summernote.org/getting-started

Shows how to include Summernote libraries and language files, and how to initialize the editor with a specific locale. This is essential for internationalization.

```html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>
```

```javascript
$(document).ready(function() {
$('#summernote').summernote({
lang: 'ko-KR' // default: 'en-US'
});
});
```

--------------------------------

### Basic Summernote Initialization

Source: https://summernote.org/getting-started

This is the most basic way to initialize Summernote on an element with the ID 'summernote'. It applies the default settings without any custom options.

```javascript
$('#summernote').summernote();
```

--------------------------------

### Summernote Initialization with Options

Source: https://summernote.org/getting-started

Demonstrates initializing Summernote with custom options. This allows for configuration of features like placeholder text, tab size, and editor height, among many other possibilities.

```javascript
$('#summernote').summernote({ 
  placeholder: 'Your text here...', 
  tabsize: 2, 
  height: 100 
});
```

--------------------------------

### Initializing Summernote Editor

Source: https://summernote.org/getting-started

This JavaScript code initializes the Summernote editor on an element with the ID 'summernote'. It should be run after the document is ready, especially if the script is placed at the end of the `<body>` tag.

```javascript
$(document).ready(function() {
  $('#summernote').summernote();
});
```

--------------------------------

### Get and Set Summernote Editor Content (jQuery)

Source: https://summernote.org/getting-started

Demonstrates how to retrieve the HTML content of a Summernote editor and how to set content programmatically. Supports selecting specific editors from a set of matched elements using jQuery.

```javascript
var markupStr = $('#summernote').summernote('code');
```

```javascript
var markupStr = $('.summernote').eq(1).summernote('code');
```

```javascript
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);
```

--------------------------------

### Including Summernote CSS and JavaScript Dependencies

Source: https://summernote.org/getting-started

This snippet shows how to include the necessary CSS and JavaScript files for Summernote, including its dependencies like jQuery and Bootstrap. It's recommended to place these in the `<head>` or at the bottom of the `<body>` tag.

```html
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
```

--------------------------------

### Summernote Integration without Bootstrap (Lite)

Source: https://summernote.org/getting-started

This snippet shows how to use Summernote in a standalone mode without Bootstrap dependencies. It requires jQuery and Summernote's lite version CSS/JS files. The initialization includes a placeholder and a custom toolbar configuration.

```html
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>without bootstrap</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>
  </body>
</html>
```

--------------------------------

### Initialize Summernote with Height and Focus Options

Source: https://summernote.org/getting-started

Initializes the Summernote editor with specified height, minimum height, maximum height, and focus options. The `focus: true` option ensures the cursor is placed in the editable area after initialization. If height is not set, the editor's height adjusts to its content.

```javascript
$('#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
});
```

--------------------------------

### Embedding Summernote within a Form

Source: https://summernote.org/getting-started

This HTML snippet shows how to integrate Summernote within a form. Using a `textarea` with a `name` attribute is recommended for form submissions. Setting `method="post"` is advised to handle larger content without truncation.

```html
<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>
```

--------------------------------

### Summernote Module ShouldInitialize Method

Source: https://summernote.org/deep-dive

This JavaScript example illustrates the `shouldInitialize` method within a Summernote module. It's a conditional check to determine if the module should be initialized based on editor options, such as `airMode` and the presence of popover configurations.

```javascript
// AirPopover's shouldInitialize
this.shouldInitialize = function () {
  return options.airMode && !list.isEmpty(options.popover.air);
};
```

--------------------------------

### Configure Summernote Toolbar with Custom Buttons

Source: https://summernote.org/deep-dive

This snippet shows how to initialize Summernote with a custom toolbar configuration. You can define which button groups and individual buttons appear in the editor's toolbar. This example includes basic styling, font options, and paragraph controls.

```javascript
$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});
```

--------------------------------

### HTML Doctype Requirement for Summernote

Source: https://summernote.org/getting-started

Summernote, like Bootstrap, requires the HTML5 doctype for proper functioning. This declaration should be placed at the very beginning of your HTML document to ensure correct rendering and behavior of its components.

```html
<!DOCTYPE html>
<html lang="en">
...
</html>
```

--------------------------------

### Summernote Integration with Bootstrap 4

Source: https://summernote.org/getting-started

This snippet shows how to include Summernote with Bootstrap 4. It requires jQuery, Popper.js, Bootstrap 4 CSS/JS, and Summernote's Bootstrap 4 specific CSS/JS files. Initializes Summernote on a div with id 'summernote'.

```html
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>
```

--------------------------------

### Destroy Summernote Instance

Source: https://summernote.org/getting-started

Removes and cleans up a Summernote editor instance from the DOM. This is useful when you no longer need the editor and want to free up resources.

```javascript
$('#summernote').summernote('destroy');
```

--------------------------------

### Embedding Summernote in a Div

Source: https://summernote.org/getting-started

This HTML code demonstrates how to embed the Summernote editor within a `div` element. This approach is suitable when Summernote is not part of a form submission and is used for rich text editing directly on the page.

```html
<div id="summernote">Hello Summernote</div>
```

--------------------------------

### Get Summernote Interface Type

Source: https://summernote.org/deep-dive

Retrieves the type of Summernote interface being used. Possible return values are 'bs3', 'bs4', or 'lite'.

```javascript
$.summernote.interface;
```

--------------------------------

### Summernote Modal Form Layout Example (JavaScript)

Source: https://summernote.org/plugins

This JavaScript snippet demonstrates the structure for a form layout within a Summernote modal. It includes form groups, help blocks, labels, and input fields, utilizing both Bootstrap and Summernote-specific classes for styling and compatibility.

```javascript
var body = '<div class="form-group note-form-group">' +
              '<div class="help-block note-help-block">Helpful text block</div>' +
            '</div>' +
            '<div class="form-group note-form-group">' +
              '<label for="note-input-1" class="control-label note-form-label">Input Label 1</label>' +
              '<div class="input-group note-input-group">' +
                '<input type="text" id="note-input-1" class="form-contro note-input">' +
              '</div>' +
            '</div>';
```

--------------------------------

### Summernote Modal Tabbed Panes Layout Example (JavaScript)

Source: https://summernote.org/plugins

This JavaScript snippet illustrates the HTML structure for creating tabbed panes within a Summernote modal. It uses Bootstrap's navigation and tab content classes, augmented with Summernote's `note-*` classes for unified styling and functionality across different versions.

```javascript
var body = '<ul class="nav note-nav nav-tabs note-nav-tabs">' +
              '<li class="nav-item note-nav-item active">' +
                '<a class="nav-link note-nav-link active" href="#note-pane-1" data-toggle="tab">Pane 1</a>' +
              '</li>' +
              '<li class="nav-item note-nav-item active">' +
                '<a class="nav-link note-nav-link active" href="#note-pane-2" data-toggle="tab">Pane 2</a>' +
              '</li>' +
              '<li class="nav-item note-nav-item active">' +
                '<a class="nav-link note-nav-link active" href="#note-pane-3" data-toggle="tab">Pane 3</a>' +
              '</li>' +
            '</ul>' +

// Pane 2
            '<div class="tab-content note-tabe-content" id="note-pane-2">' +
            '</div>';

// Pane 3
            '<div class="tab-content note-tabe-content" id="note-pane-3">' +
            '</div>';

// Pane 1, is added last due to how the Styling works to make this Panel active and visible.
            '<div class="tab-content note-tabe-content active" id="note-pane-1">' +
            '</div>';
```

--------------------------------

### Get Last Range

Source: https://summernote.org/deep-dive

Retrieves the last saved range object from the Summernote editor. This range object can represent the current cursor position or a selected text range.

```javascript
const rng = $('#summernote').summernote('editor.getLastRange');
```

--------------------------------

### Initialize Plugin with Dialog

Source: https://summernote.org/plugins

This code handles the initialization of the plugin, including setting up a modal dialog for user interaction. It defines the dialog's title, body, and footer content, and specifies where the dialog should be appended in the DOM.

```javascript
this.initialize = function() {
  var $container = options.dialogsInBody ? $(document.body) : $editor;
  var body = '<div class="form-group">
              </div>';
  var footer = '<button href="#" class="btn btn-primary note-examplePlugin-btn">' + lang.examplePlugin.okButton + '</button>';

  this.$dialog = ui.dialog({
    title: lang.examplePlugin.dialogTitle,
    body: body,
    footer: footer
  }).render().appendTo($container);
};
```

--------------------------------

### Configure Default Summernote Toolbar Buttons

Source: https://summernote.org/deep-dive

This code demonstrates the default configuration for Summernote's toolbar buttons. It outlines the standard groups and buttons available, such as style, font, color, paragraph, table, insert, and view options. This serves as a reference for understanding the editor's capabilities.

```javascript
toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['fontname', ['fontname']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['table', ['table']],
  ['insert', ['link', 'picture', 'video']],
  ['view', ['fullscreen', 'codeview', 'help']],
]
```

--------------------------------

### Add Custom Plugin Button to Summernote Toolbar

Source: https://summernote.org/plugins

Shows how to initialize Summernote with custom options, specifically adding a custom button to a new 'custom' toolbar area and also to an existing 'style' toolbar area using 'examplePlugin'.

```javascript
$(document).ready(function() {
  $('#summernote').summernote({
    toolbar:[

      // This is a Custom Button in a new Toolbar Area
      ['custom', ['examplePlugin']],

      // You can also add Interaction to an existing Toolbar Area
      ['style', ['style' ,'examplePlugin']]
    ]
  });
});
```

--------------------------------

### Basic Editor API

Source: https://summernote.org/deep-dive

Provides methods for fundamental editor operations like inserting text, toggling code view, managing selection, enabling/disabling the editor, and handling fullscreen mode.

```APIDOC
## Basic Editor API

### Initialize Summernote

To initialize Summernote, use the `summernote()` method on your target element.

```javascript
$('#summernote').summernote();
```

### Insert Text

Inserts the specified text into the editor. This method can be called with or without a module name.

```javascript
// With module name (editor)
$('#summernote').summernote('editor.insertText', 'hello world');

// Without module name (defaults to editor)
$('#summernote').summernote('insertText', 'hello world');
```

### Code View

Toggles between the editable view and the code (HTML) view.

```javascript
$('#summernote').summernote('codeview.toggle');
```

### Create Range

Creates a range object representing the current user selection within the editor.

```javascript
var range = $('#summernote').summernote('createRange');
```

### Disable / Enable Editor

Disables user interaction with the editor. Call `enable` to re-enable.

```javascript
// Disable
$('#summernote').summernote('disable');

// Enable
$('#summernote').summernote('enable');
```

### Disable Spellchecking

Disables spellchecking in the editing area. Accepts a boolean value.

```javascript
$('#summernote').summernote({
  spellCheck: true 
});
```

### Disable Grammarly Browser Addon

Disables the Grammarly browser addon. Accepts a boolean value.

```javascript
$('#summernote').summernote({
  disableGrammar: false
});
```

### Focus Editor

Sets the focus to the current Summernote instance.

```javascript
$('#summernote').summernote('focus');
```

### Fullscreen Toggle

Toggles the editor's fullscreen mode.

```javascript
$('#summernote').summernote('fullscreen.toggle');
```

### Is Fullscreen

Determines if the Summernote editor is currently in fullscreen mode. Returns `true` or `false`.

```javascript
$('#summernote').summernote('fullscreen.isFullscreen');
```

### Editor Interface

Returns the interface type of the Summernote instance, which can be `bs3`, `bs4`, or `lite`.

```javascript
$.summernote.interface;
```

### Is Empty

Checks if the editor's content is empty. Returns `true` if empty, `false` otherwise.

```javascript
if ($('#summernote').summernote('isEmpty')) {
  alert('editor content is empty');
}
```

### Reset Editor

Clears the editor's content and removes all stored history.

```javascript
$('#summernote').summernote('reset');
```

### Save / Restore Range

`saveRange` internally saves the current user selection. `restoreRange` restores the last saved selection.

```javascript
// Save the current selection
$('#summernote').summernote('saveRange');

// Move cursor and select another range

// Restore the saved range
$('#summernote').summernote('restoreRange');
```

### Undo / Redo

Reverts or reapplies the last command executed in the editor.

```javascript
// Undo the last action
$('#summernote').summernote('undo');

// Redo the last undone action
$('#summernote').summernote('redo');
```
```

--------------------------------

### Summernote Emoji Hint Configuration

Source: https://summernote.org/examples

Enables emoji autocomplete in Summernote by fetching emoji data from an external API. It uses a regular expression to detect emoji triggers (starting with ':') and provides a template for displaying emojis in the suggestion list and in the editor content.

```javascript
$(".hint2basic").summernote({
  height: 100,
  toolbar: false,
  placeholder: 'type with apple, orange, watermelon and lemon',
  hint: {
    words: ['apple', 'orange', 'watermelon', 'lemon'],
    match: /\b(\w{1,})$/,
    search: function (keyword, callback) {
      callback($.grep(this.words, function (item) {
        return item.indexOf(keyword) === 0;
      }));
    }
  }
});
```

--------------------------------

### Summernote onInit Callback and Event

Source: https://summernote.org/deep-dive

This callback is executed once the Summernote editor has been successfully initialized. It logs a confirmation message to the console. A corresponding jQuery custom event is also available for tracking initialization.

```javascript
// onInit callback
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      console.log('Summernote is launched');
    }
  }
});

// summernote.init
$('#summernote').on('summernote.init', function() {
  console.log('Summernote is launched');
});
```

--------------------------------

### Define Summernote Plugin Structure

Source: https://summernote.org/plugins

This code snippet demonstrates the basic structure for defining a new plugin within Summernote. It shows how to extend the $.summernote.plugins object and initialize a plugin instance with context.

```javascript
$.extend($.summernote.plugins, {
    /**
     *  @param {Object} context - context object has status of editor.
     */
    'examplePlugin':function (context) {
      // Plugin code goes here
    }
});
```

--------------------------------

### Configure Default Summernote Popover Options

Source: https://summernote.org/deep-dive

This code block shows the default configurations for various Summernote popovers, including image, link, table, and air-mode. It details the available actions within each popover, such as resizing and floating images, managing links, adding/deleting table rows/columns, and basic text formatting in air-mode.

```javascript
popover: {
  image: [
    ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
    ['float', ['floatLeft', 'floatRight', 'floatNone']],
    ['remove', ['removeMedia']]
  ],
  link: [
    ['link', ['linkDialogShow', 'unlink']]
  ],
  table: [
    ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
    ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
  ],
  air: [
    ['color', ['color']],
    ['font', ['bold', 'underline', 'clear']],
    ['para', ['ul', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture']]
  ]
}
```

--------------------------------

### Summernote Module Initialize Method

Source: https://summernote.org/deep-dive

This JavaScript code demonstrates the `initialize` method within a Summernote module. It's responsible for creating and rendering UI elements, such as buttons, and appending them to the editor's toolbar. This method is called when the editor is initialized.

```javascript
this.initialize = function () {
  // create button
  var button = ui.button({
    className: 'note-btn-bold',
    contents: '<i class="fa fa-bold">',
    click: function (e) {
      context.invoke('editor.bold'); // invoke bold method of a module named editor
    }
  });

  // generate jQuery element from button instance.
  this.$button = button.render();
  $toolbar.append(this.$button);
}
```

--------------------------------

### Initialize Summernote with CodeMirror Options

Source: https://summernote.org/examples

This snippet demonstrates the JavaScript code to initialize Summernote editor with specific options, including setting the height and configuring CodeMirror for the code view. The `theme` option is set to 'monokai'.

```javascript
 $('.summernote').summernote({
  height: 150, //set editable area's height
  codemirror: { // codemirror options
    theme: 'monokai'
  }
});
```

--------------------------------

### Set Background and Foreground Color in Summernote

Source: https://summernote.org/deep-dive

Sets the background or foreground color of the selected text within the Summernote editor. Accepts a color string as an argument.

```javascript
$('#summernote').summernote('backColor', 'red');
```

```javascript
$('#summernote').summernote('foreColor', 'blue');
```

--------------------------------

### Range Utility: Create WrappedRange

Source: https://summernote.org/deep-dive

Methods for creating `WrappedRange` objects using the `range` utility. These include creating from arguments, DOM nodes, or the current browser selection.

```javascript
const rng = range.create(startContainer, startOffset, endContainer, endOffset)

// or

const rng = range.create() // is equals range.createFromSelection()
```

```javascript
const rng = range.createFromNode(node)
```

```javascript
const rng = range.createFromNodeBefore(node)
```

```javascript
const rng = range.createFromNodeAfter(node)
```

```javascript
const rng = range.createFromSelection(node)
```

--------------------------------

### Integrate Summernote with CodeMirror for Code View

Source: https://summernote.org/examples

Shows how to include necessary libraries (jQuery, Bootstrap, CodeMirror) and Summernote itself, followed by initializing Summernote with CodeMirror options. This allows for a code editor experience within Summernote's code view.

```html
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js">

<!-- include summernote css/js-->
<link href="summernote.css">
<script src="summernote.js">

```

--------------------------------

### Call Custom Module Method in Summernote

Source: https://summernote.org/deep-dive

This code shows how to invoke a method ('method') of a custom Summernote module ('myModule') using the external API. It passes a string argument 'hello' to the method.

```javascript
$(".summernote").summernote("myModule.method", 'hello');
```

--------------------------------

### WrappedRange Object Methods

Source: https://summernote.org/deep-dive

Provides essential methods for interacting with a `WrappedRange` object, such as selecting, collapsing, splitting text, deleting content, and checking if the range is collapsed.

```javascript
rng.select()
```

```javascript
const newRng = rng.collapse(true);   // to start rng

or

const newRng = rng.collapse();  // to end rng
```

```javascript
const textRng = rng.splitText()
```

```javascript
const newRng = rng.deleteContents()
```

```javascript
const isCollapsed = rng.isCollapsed()
```

```javascript
const newRng = rng.wrapBodyInlineWithPara()
```

--------------------------------

### Create Link and Unlink

Source: https://summernote.org/deep-dive

Allows for the creation of hyperlinks with specified text, URL, and target window behavior, as well as the removal of existing links. The `createLink` method requires an object with `text`, `url`, and optionally `isNewWindow` properties.

```javascript
// @param {String} text - link text
// @param {String} url - link url
// @param {Boolean} isNewWindow - whether link's target is new window or not
$('#summernote').summernote('createLink', {
  text: "This is the Summernote's Official Site",
  url: 'http://summernote.org',
  isNewWindow: true
});

$('#summernote').summernote('unlink');
```

--------------------------------

### Format Paragraph as Standard Paragraph in Summernote

Source: https://summernote.org/deep-dive

Formats the current paragraph as a standard HTML `<p>` tag within the Summernote editor.

```javascript
$('#summernote').summernote('formatPara');
```

--------------------------------

### Summernote AutoLink Module Implementation

Source: https://summernote.org/deep-dive

This comprehensive JavaScript code defines the `AutoLink` module for Summernote. It includes the `initialize`, `destroy`, and `shouldInitialize` methods, demonstrating how to create and manage custom editor functionalities, including button creation and event handling within the Summernote framework.

```javascript
// Module Name is AutoLink
// @param {Object} context - states of editor
var AutoLink = function (context) {

// you can get current editor's elements from layoutInfo
var layoutInfo = context.layoutInfo;
var $editor = layoutInfo.editor;
var $editable = layoutInfo.editable;
var $toolbar = layoutInfo.toolbar;

// ui is a set of renderers to build ui elements.
var ui = $.summernote.ui;

// this method will be called when editor is initialized by $('..').summernote();
// You can attach events and created elements on editor elements(eg, editable, ...).
this.initialize = function () {
  // create button
  var button = ui.button({
    className: 'note-btn-bold',
    contents: '<i class="fa fa-bold">',
    click: function (e) {
      // invoke bold method of a module named editor
      context.invoke('editor.bold');
    }
  });

  // generate jQuery element from button instance.
  this.$button = button.render();
  $toolbar.append(this.$button);
}

  // this method will be called when editor is destroyed by $('..').summernote('destroy');
  // You should detach events and remove elements on `initialize`.
  this.destroy = function () {
    this.$button.remove();
    this.$button = null;
  }
};

```

--------------------------------

### Add Custom Plugin Button to Summernote Image Popover

Source: https://summernote.org/plugins

Illustrates initializing Summernote with custom popover options, including adding a custom button ('examplePlugin') to the image popover's 'custom' section, alongside standard image size and float options.

```javascript
$(document).ready(function() {
  $('#summernote').summernote({
    popover: {
      image: [

        // This is a Custom Button in a new Toolbar Area
        ['custom', ['examplePlugin']],
        ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
        ['float', ['floatLeft', 'floatRight', 'floatNone']],
        ['remove', ['removeMedia']]
      ]
    }
  });
});
```

--------------------------------

### Customize Style Tags in Summernote

Source: https://summernote.org/deep-dive

Allows defining custom styles available in the editor's style dropdown. Styles can be specified by tag name or by providing detailed object configurations for tag, title, style, className, and value.

```javascript
$('#summernote').summernote({
  styleTags: [
    'p',
    { title: 'Blockquote', tag: 'blockquote', className: 'blockquote', value: 'blockquote' },
    'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
  ]
});
```

--------------------------------

### Font Style API

Source: https://summernote.org/deep-dive

Provides methods for manipulating font styles including color, family, size, and applying basic formatting like bold, italic, and underline.

```APIDOC
## Font Style API

### Background Color / Foreground Color

Sets the background color or foreground (text) color of the selected text.

```javascript
// Set background color to red
$('#summernote').summernote('backColor', 'red');

// Set foreground color to blue
$('#summernote').summernote('foreColor', 'blue');
```

### Bold / Italic / Underline / Strikethrough

Applies or removes bold, italic, underline, or strikethrough formatting to the selected text.

```javascript
$('#summernote').summernote('bold');
$('#summernote').summernote('italic');
$('#summernote').summernote('underline');
$('#summernote').summernote('strikethrough');
```

### Font Name

Sets the font family for the selected text.

```javascript
// Set font family to Arial
$('#summernote').summernote('fontName', 'Arial');
```

### Font Size

Sets the font size for the selected text. The unit is determined by the `fontSizeUnit` setting.

```javascript
// Set font size to 20
$('#summernote').summernote('fontSize', 20);
```

### Font Size Unit

Sets the unit for font size. Defaults to `px`.

```javascript
// Set font size unit to points (pt)
$('#summernote').summernote('fontSizeUnit', 'pt');
```

### Remove Formatting

Removes all formatting from the selected text.

```javascript
$('#summernote').summernote('removeFormat');
```

### Superscript / Subscript

Applies or removes superscript or subscript formatting to the selected text.

```javascript
$('#summernote').summernote('superscript');
$('#summernote').summernote('subscript');
```
```

--------------------------------

### Create Plugin Button UI

Source: https://summernote.org/plugins

This code initializes a custom button for the plugin within the Summernote toolbar. It utilizes the `ui.button` method to define the button's appearance, tooltip, and click event handler, which triggers a plugin-specific action.

```javascript
var self = this,
    ui = $.summernote.ui,
    $note = context.layoutInfo.note,
    $editor = context.layoutInfo.editor,
    $editable = context.layoutInfo.editable,
    $toolbar = context.layoutInfo.toolbar,
    options = context.options,
    lang = options.langInfo;

context.memo('button.examplePlugin', function () {
  var button = ui.button({
    contents: options.examplePlugin.icon,
    tooltip: lang.examplePlugin.tooltip,
    codeviewKeepButton: true,
    click:function (e) {
      context.invoke('examplePlugin.show');
    }
  });
  return button.render();
});
```

--------------------------------

### Paragraph API

Source: https://summernote.org/deep-dive

Offers methods for manipulating paragraph formatting, including headings, lists, indentation, and inserting paragraphs.

```APIDOC
## Paragraph API

### Format Heading (H1-H6)

Changes the current paragraph to a specified heading level (H1 through H6).

```javascript
// Format current paragraph as H2
$('#summernote').summernote('formatH2');

// Format current paragraph as H6
$('#summernote').summernote('formatH6');
```

### Format Paragraph

Changes the current paragraph back to a standard paragraph (`<p>`) element.

```javascript
$('#summernote').summernote('formatPara');
```

### Indent / Outdent

Increases or decreases the indentation level of the current paragraph.

```javascript
// Indent the current paragraph
$('#summernote').summernote('indent');

// Outdent the current paragraph
$('#summernote').summernote('outdent');
```

### Insert Ordered List / Unordered List

Toggles the creation of an ordered (numbered) list or an unordered (bulleted) list for the current paragraph.

```javascript
// Toggle ordered list
$('#summernote').summernote('insertOrderedList');

// Toggle unordered list
$('#summernote').summernote('insertUnorderedList');
```

### Insert Paragraph

Inserts a new paragraph at the current cursor position.

```javascript
$('#summernote').summernote('insertParagraph');
```
```

--------------------------------

### Format Paragraph as Heading in Summernote

Source: https://summernote.org/deep-dive

Formats the current paragraph as a heading, from H1 to H6, in the Summernote editor. Use the specific method for the desired heading level.

```javascript
$('#summernote').summernote('formatH2');
```

```javascript
$('#summernote').summernote('formatH6');
```

--------------------------------

### Define Custom Module with Options for Summernote

Source: https://summernote.org/deep-dive

This snippet demonstrates how to define and register a custom module named 'myModule' with specific options for the Summernote editor. It utilizes jQuery to initialize Summernote with the custom module.

```javascript
$(".summernote").summernote({
  modules: {
    myModule: MyModule
  }
});
```

--------------------------------

### Summernote onPaste Callback and Event

Source: https://summernote.org/deep-dive

This snippet demonstrates how to use the `onPaste` callback and the `summernote.paste` event to log a message when content is pasted into the Summernote editor. It requires the jQuery library and the Summernote plugin.

```javascript
// onPaste callback
$('#summernote').summernote({
  callbacks: {
    onPaste: function(e) {
      console.log('Called event paste');
    }
  }
});

// summernote.paste
$('#summernote').on('summernote.paste', function(e) {
  console.log('Called event paste');
});
```

--------------------------------

### Use Custom Button in Summernote Toolbar

Source: https://summernote.org/deep-dive

This JavaScript code shows how to integrate a custom button (defined elsewhere, e.g., `HelloButton`) into the Summernote toolbar and popover options. It requires jQuery and the Summernote plugin. The `buttons` option maps a key ('hello') to the button definition.

```javascript
$('.summernote').summernote({
  toolbar: [
    ['mybutton', ['hello']]
  ],

  buttons: {
    hello: HelloButton
  }
});
```

--------------------------------

### Configure XSS Protection for CodeView in Summernote

Source: https://summernote.org/deep-dive

Enables or disables XSS protection features for the CodeView mode, including tag filtering and iframe source whitelisting. Custom regex and whitelist sources can also be provided.

```javascript
$('#summernote').summernote({
  codeviewFilter: false,
  codeviewIframeFilter: true
});
```

```javascript
$('#summernote').summernote({
  codeviewFilterRegex: 'custom-regex',
  codeviewIframeWhitelistSrc: ['my-own-domainname']
});
```

--------------------------------

### Initialize Multiple Summernote Editors

Source: https://summernote.org/examples

This code shows how to initialize multiple Summernote editors on a single HTML page. Each editor is represented by a `div` element with the class 'summernote'. The jQuery `document.ready` function ensures the editors are initialized after the DOM is fully loaded.

```html
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
```

```javascript
$(document).ready(function() {
  $('.summernote').summernote();
});
```

--------------------------------

### Include Summernote and Plugin Script in HTML

Source: https://summernote.org/plugins

Demonstrates how to include necessary libraries like jQuery and Bootstrap, Summernote's CSS and JS files, and a custom plugin script in an HTML page. It assumes the plugin script is placed in a specific folder.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>

    <!-- include plugin -->
    <script src="[folder where script is located]/[plugin script].js"></script>
  </head>
  <body>
```

--------------------------------

### Set Font Size in Summernote

Source: https://summernote.org/deep-dive

Sets the font size for the selected text in the Summernote editor. Accepts a number representing the font size.

```javascript
$('#summernote').summernote('fontSize', 20);
```

--------------------------------

### Undo and Redo Actions in Summernote

Source: https://summernote.org/deep-dive

Reverts or reapplies the last action performed in the Summernote editor, providing standard undo/redo functionality.

```javascript
$('#summernote').summernote('undo');
```

```javascript
$('#summernote').summernote('redo');
```

--------------------------------

### Summernote Word Hint Configuration

Source: https://summernote.org/examples

Configures Summernote to provide autocomplete suggestions for a predefined list of words. It uses a regular expression to match word beginnings and a search function to filter suggestions. The `words` option provides the list of possible suggestions.

```javascript
$.ajax({
  url: 'https://api.github.com/emojis',
  async: false
}).then(function(data) {
  window.emojis = Object.keys(data);
  window.emojiUrls = data;
});;

$(".hint2emoji").summernote({
  height: 100,
  toolbar: false,
  placeholder: 'type starting with : and any alphabet',
  hint: {
    match: /:([\-+\w]+)$/,
    search: function (keyword, callback) {
      callback($.grep(emojis, function (item) {
        return item.indexOf(keyword) === 0;
      }));
    },
    template: function (item) {
      var content = emojiUrls[item];
      return '<img src="' + content + '" width="20" /> :' + item + ':';
    },
    content: function (item) {
      var url = emojiUrls[item];
      if (url) {
        return $('<img />').attr('src', url).css('width', 20)[0];
      }
      return '';
    }
  }
});
```

--------------------------------

### Manage Plugin Dialog Lifecycle

Source: https://summernote.org/plugins

This section outlines methods for managing the plugin's modal dialog, including showing and hiding it, and handling user interactions within the dialog. It ensures proper event binding and cleanup.

```javascript
this.destroy = function () {
  ui.hideDialog(this.$dialog);
  this.$dialog.remove();
};
this.bindEnterKey = function ($input, $btn) {
  $input.on('keypress', function (event) {
    if (event.keyCode === 13) $btn.trigger('click');
  });
};
this.bindLabels = function () {
  self.$dialog.find('.form-control:first').focus().select();
  self.$dialog.find('label').on('click', function () {
    $(this).parent().find('.form-control:first').focus();
  });
};
this.show = function () {
  var $img = $($editable.data('target'));
  var editorInfo = {};
  this.showexamplePluginDialog(editorInfo).then(function (editorInfo) {
    ui.hideDialog(self.$dialog);
    $note.val(context.invoke('code'));
    $note.change();
  });
};
this.showexamplePluginDialog = function(editorInfo) {
  return $.Deferred(function (deferred) {
    ui.onDialogShown(self.$dialog, function () {
      context.triggerEvent('dialog.shown');
      $editBtn.click(function (e) {
        e.preventDefault();
        deferred.resolve({});
      });
      self.bindEnterKey($editBtn);
      self.bindLabels();
    });
    ui.onDialogHidden(self.$dialog, function () {
      $editBtn.off('click');
      if (deferred.state() === 'pending') deferred.reject();
    });
    ui.showDialog(self.$dialog);
  });
};
```

--------------------------------

### Configure Dialog Placement in Summernote

Source: https://summernote.org/deep-dive

Determines whether dialogs should be appended to the document body, which is useful when Summernote is used within a modal. Also controls whether dialogs have a fading effect.

```javascript
$('#summernote').summernote({
  dialogsInBody: true
});
```

```javascript
$('#summernote').summernote({
  dialogsFade: true // Add fade effect on dialogs
});
```

--------------------------------

### Enable Air-Mode in Summernote

Source: https://summernote.org/examples

This snippet demonstrates how to initialize the Summernote editor in air-mode. Air-mode provides a context-aware toolbar that appears only when text is selected, allowing for a cleaner interface. It requires the jQuery library and the Summernote JavaScript and CSS files.

```javascript
 $('.summernote').summernote({
  airMode: true
});
```

--------------------------------

### Define External Plugin as a Summernote Module

Source: https://summernote.org/deep-dive

This JavaScript code illustrates how to define an external plugin, 'myModule', which extends Summernote's plugin system. It uses jQuery's extend method to add the module, providing a structure for defining module logic within the context of the editor.

```javascript
// src/mymodule.js
$.extend($.summernote.plugins, {
  myModule: function (context) {
    // define module
    // ...
  }
});
```

--------------------------------

### WrappedRange: Word and Regex Matching

Source: https://summernote.org/deep-dive

Utilities for range manipulation related to words. `getWordRange` returns a range for the word before or after the cursor, while `getWordsMatchRange` finds a range matching a provided regular expression.

```javascript
const newRng = rng.getWordRange();   // before cursor

// or

const newRng = rng.getWordRange(true);   // after cursor
```

```javascript
// range : 'hi @Peter Pan'
const rng = range.create() // or $('.summernote').summernote('getLastRange');

const newRng = rng.getWordsMatchRange(/@[a-z ]+/i)

console.log(newRng.toString())  // '@Peter Pan'
```

--------------------------------

### Initialize and Destroy Summernote Editor

Source: https://summernote.org/examples

Demonstrates how to initialize the Summernote editor on a specific element and how to destroy it. The 'edit' function initializes the editor with focus, and the 'save' function retrieves the code and then destroys the editor instance.

```javascript
var edit = function() {
  $('.click2edit').summernote({focus: true});
};

var save = function() {
  var markup = $('.click2edit').summernote('code');
  $('.click2edit').summernote('destroy');
};
```
Tokens:
Raw