summernote-text-findnreplace

A plugin for the Summernote WYSIWYG editor.

Adds a button to the Toolbar that adds an area to the Toolbar that allows Find and Replace text in the editor.

Here are the functions you can do with this plugin:

• Find text in the editor area.
• Selecting text before opening the plugin will copy the selected text into the find field.
• Selecting text after opening the plugin will replace the selection with text entered in the replace field.
• Feedback is displayed in the Toolbar area.

Installation

1. Include JS

Include the following code after including Summernote:

<script src="summernote-text-findnreplace.js"></script>
<script src="lang/[language-COUNTRY].js"></script>

2. Supported languages

Supported languages can be found in the lang folder, and should be included after the plugin, then setting the chosen language when initialising Summernote.

3. Summernote options

Finally, customize the Summernote Toolbar.

$(document).ready(function() {
  $('#summernote').summernote({
    toolbar:[
      ['custom',['findnreplace']], // The button
      ['style',['style']],
      ['font',['bold','italic','underline','clear']],
      ['fontname',['fontname']],
      ['color',['color']],
      ['para',['ul','ol','paragraph']],
      ['height',['height']],
      ['table',['table']],
      ['insert',['media','link','hr']],
      ['view',['fullscreen','codeview']],
      ['help',['help']]
    ],
    findnreplace:{
      lang: 'en-US' // Change to your chosen language
    }
  });
});

4. Check out our other Summernote Plugins via our main Github page.

• Diemen Design