├── lang
    └── en-US.js
├── summernote-text-findnreplace.png
├── css
    └── lite.css
├── LICENSE
├── README.md
└── summernote-text-findnreplace.js


/lang/en-US.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/summernote-text-findnreplace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DennisSuitters/summernote-text-findnreplace/HEAD/summernote-text-findnreplace.png


--------------------------------------------------------------------------------
/css/lite.css:
--------------------------------------------------------------------------------
 1 | #findnreplaceToolbar {
 2 |   padding: 5px;
 3 |   background-color: var(--note-toolbar-background-color) !important;
 4 | }
 5 | 
 6 | #findnreplaceToolbar .note-form-row {
 7 |   position: relative;
 8 |   display: flex;
 9 |   flex: 1 0 100%;
10 |   flex-wrap: nowrap;
11 |   vertical-align: middle;
12 |   padding: 0; }
13 | 
14 | .note-display-none {
15 |   display: none !important; }
16 | 
17 | .note-display-block {
18 |   display: block !important; }
19 | 
20 | mark.note-findnreplace {
21 |   background-color: #ff0; }
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Diemen Design
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # summernote-text-findnreplace
 2 | A plugin for the [Summernote](https://github.com/summernote/summernote/) WYSIWYG editor.
 3 | 
 4 | Adds a button to the Toolbar that adds an area to the Toolbar that allows Find and Replace text in the editor.
 5 | 
 6 | Here are the functions you can do with this plugin:
 7 | - Find text in the editor area.
 8 | - Selecting text before opening the plugin will copy the selected text into the find field.
 9 | - Selecting text after opening the plugin will replace the selection with text entered in the replace field.
10 | - Feedback is displayed in the Toolbar area.
11 | 
12 | ![summernote-text-findnreplace](summernote-text-findnreplace.png)
13 | 
14 | ### Installation
15 | 
16 | #### 1. Include JS
17 | 
18 | Include the following code after including Summernote:
19 | 
20 | ```html
21 | <script src="summernote-text-findnreplace.js"></script>
22 | <script src="lang/[language-COUNTRY].js"></script>
23 | ```
24 | 
25 | #### 2. Supported languages
26 | 
27 | Supported languages can be found in the `lang` folder, and should be included after the plugin, then setting the chosen language when initialising Summernote.
28 | 
29 | #### 3. Summernote options
30 | Finally, customize the Summernote Toolbar.
31 | 
32 | ```javascript
33 | $(document).ready(function() {
34 |   $('#summernote').summernote({
35 |     toolbar:[
36 |       ['custom',['findnreplace']], // The button
37 |       ['style',['style']],
38 |       ['font',['bold','italic','underline','clear']],
39 |       ['fontname',['fontname']],
40 |       ['color',['color']],
41 |       ['para',['ul','ol','paragraph']],
42 |       ['height',['height']],
43 |       ['table',['table']],
44 |       ['insert',['media','link','hr']],
45 |       ['view',['fullscreen','codeview']],
46 |       ['help',['help']]
47 |     ],
48 |     findnreplace:{
49 |       lang: 'en-US' // Change to your chosen language
50 |     }
51 |   });
52 | });
53 | ```
54 | 
55 | #### 4. Check out our other Summernote Plugins via our main Github page.
56 | - [Diemen Design](https://github.com/DiemenDesign/)
57 | 


--------------------------------------------------------------------------------
/summernote-text-findnreplace.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 |   if (typeof define === 'function' && define.amd) {
  3 |     define(['jquery'], factory);
  4 |   } else if (typeof module === 'object' && module.exports) {
  5 |     module.exports = factory(require('jquery'));
  6 |   } else {
  7 |     factory(window.jQuery);
  8 |   }
  9 | }(function ($) {
 10 |   $.extend(true,$.summernote.lang, {
 11 |     'en-US': { /* English */
 12 |       findnreplace: {
 13 |         tooltip:            `Find 'N Replace`,
 14 |         findBtn:            'Find ',
 15 |         findPlaceholder:    'Enter the text you want to find...',
 16 |         findResult:         ' results found for ',
 17 |         findError:          'Nothing entered to find...',
 18 |         replaceBtn:         'Replace',
 19 |         replacePlaceholder: 'Enter the text to replace the text above or selected...',
 20 |         replaceResult:      ', replaced by ',
 21 |         replaceError:       'Nothing entered to replace...',
 22 |         noneSelected:       'Nothing selected to replace...'
 23 |       }
 24 |     }
 25 |   });
 26 |   $.extend($.summernote.options, {
 27 |     findnreplace: {
 28 |       classHidden: 'note-display-none',
 29 |       icon:      '<i class="note-icon" data-toggle="findnreplace"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="16" height="16" style="fill:currentColor"><path d="m 5.8,2.3764705 c 0.941176,0 1.811765,0.376471 2.423529,1.011765 l -1.741176,1.741176 4.117647,0 0,-4.117647 -1.411765,1.411765 C 8.317647,1.5529415 7.117647,1.0117645 5.8,1.0117645 c -2.423529,0 -4.423529,1.788236 -4.752941,4.117647 l 1.388235,0 C 2.741176,3.5529415 4.129412,2.3764705 5.8,2.3764705 Z m 3.8588235,6.282353 c 0.4470585,-0.611764 0.7764705,-1.341176 0.8705885,-2.164706 l -1.388236,0 c -0.305882,1.552942 -1.694117,2.752942 -3.364705,2.752942 -0.941177,0 -1.811765,-0.376471 -2.42353,-1.011765 L 5.094118,6.4941175 1,6.4941175 1,10.611765 2.411765,9.2000005 C 3.282353,10.070589 4.482353,10.611765 5.8,10.611765 c 1.058824,0 2.047059,-0.352942 2.847059,-0.9411765 L 11.988235,12.988236 13,11.97647 9.6588235,8.6588235 Z"/></svg></i>'
 30 |     }
 31 |   });
 32 |   $.extend($.summernote.plugins, {
 33 |     'findnreplace': function (context) {
 34 |       var ui       = $.summernote.ui,
 35 |           $note    = context.layoutInfo.note,
 36 |           $editor  = context.layoutInfo.editor,
 37 |           $toolbar = context.layoutInfo.toolbar,
 38 |           options  = context.options,
 39 |           lang     = options.langInfo,
 40 |           interface = $.summernote.interface;
 41 |       $('<link/>', {
 42 |         rel: 'stylesheet',
 43 |         type: 'text/css',
 44 |         href: '../summernote-text-findnreplace/css/lite.css'
 45 |       }).appendTo('head');
 46 |       context.memo('button.findnreplace', function() {
 47 |         var button = ui.button({
 48 |           contents: options.findnreplace.icon,
 49 |           container: options.container,
 50 |           tooltip:  lang.findnreplace.tooltip,
 51 |           placement: options.placement,
 52 |           click: function (e) {
 53 |             e.preventDefault();
 54 |             $editor.find('.note-findnreplace').contents().unwrap('mark');
 55 |             $('#findnreplaceToolbar').toggleClass(options.findnreplace.classHidden);
 56 |             $('.note-status-output').text('');
 57 |             if ($note.summernote('createRange').toString()) {
 58 |               var selected = $note.summernote('createRange').toString();
 59 |               $('#note-findnreplace-find').val(selected);
 60 |             }
 61 |           }
 62 |         });
 63 |         return button.render();
 64 |       });
 65 |       this.initialize = function () {
 66 |         var fnrBody =
 67 |         '<div id="findnreplaceToolbar" class="note-display-none">' +
 68 |           '<div class="note-form-row">' +
 69 |             '<input id="note-findnreplace-find" type="text" class="note-findnreplace-find note-input" value="" placeholder="' + lang.findnreplace.findPlaceholder + '">' +
 70 |             '<button class="note-findnreplace-find-btn note-btn">' + lang.findnreplace.findBtn + '</button>' +
 71 |           '</div>' +
 72 |           '<div class="note-form-row">' +
 73 |             '<input id="note-findnreplace-replace" type="text" class="note-findnreplace-replace note-input" value="" placeholder="' + lang.findnreplace.replacePlaceholder + '">' +
 74 |             '<button class="note-findnreplace-replace-btn btn btn-default note-btn" style="width:100px;">' + lang.findnreplace.replaceBtn + '</button>' +
 75 |           '</div>' +
 76 |         '</div>';
 77 |         $('.note-toolbar').append(fnrBody);
 78 |         this.show();
 79 |       };
 80 |       this.findnreplace = function() {
 81 |         var $fnrFindBtn    = $('.note-findnreplace-find-btn');
 82 |         var $fnrReplaceBtn = $('.note-findnreplace-replace-btn');
 83 |         $fnrFindBtn.click(function (e) {
 84 |           e.preventDefault();
 85 |           $editor.find('.note-findnreplace').contents().unwrap('mark');
 86 |           var fnrCode    = context.invoke('code');
 87 |           var fnrFind    = $('.note-findnreplace-find').val();
 88 |           var fnrReplace = $('.note-findnreplace-replace').val();
 89 |           var fnrCount   = (fnrCode.match(new RegExp(fnrFind + "(?![^<>]*>)", "gi")) || []).length
 90 |           if (fnrFind) {
 91 |             $('.note-status-output').text(fnrCount + lang.findnreplace.findResult + "`" + fnrFind + "`");
 92 |             var fnrReplaced = fnrCode.replace(new RegExp(fnrFind + "(?![^<>]*>)", "gi"), function(e){return '<mark class="note-findnreplace">' + e + '</mark>';});
 93 |             $note.summernote('code',fnrReplaced);
 94 |           } else
 95 |             $('.note-status-output').html(lang.findnreplace.findError);
 96 |         });
 97 |         $fnrReplaceBtn.click(function (e) {
 98 |           e.preventDefault();
 99 |           $editor.find('.note-findnreplace').contents().unwrap('mark');
100 |           var fnrCode    = context.invoke('code');
101 |           var fnrFind    = $('.note-findnreplace-find').val();
102 |           var fnrReplace = $('.note-findnreplace-replace').val();
103 |           var fnrCount   = (fnrCode.match(new RegExp(fnrFind, "gi")) || []).length
104 |           if (fnrFind) {
105 |             $('.note-status-output').text(fnrCount + lang.findnreplace.findResult + "`" + fnrFind + "`" + lang.findnreplace.replaceResult +"`" + fnrReplace + "`");
106 |             var fnrReplaced = fnrCode.replace(new RegExp(fnrFind + "(?![^<>]*>)", "gi"), fnrReplace);
107 |             $note.summernote('code', fnrReplaced);
108 |           } else {
109 |             if (fnrReplace) {
110 |               if ($note.summernote('createRange').toString()) {
111 |                 $note.summernote('insertText',fnrReplace);
112 |                 $('.note-status-output').text('');
113 |               } else
114 |                 $('.note-status-output').html(lang.findnreplace.noneSelected);
115 |             } else
116 |               $('.note-status-output').html(lang.findnreplace.replaceError);
117 |           }
118 |         });
119 |       };
120 |       this.show = function() {
121 |         this.findnreplace();
122 |       };
123 |     }
124 |   });
125 | }));
126 | 


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