JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<div id='summer'>
test
</div>

JavaScript

var bank = ['apple', 'apples', 'orange', 'watermelon', 'lemon']
$("#summer").summernote({
	hint: {
    words: bank,
    match: /\b(\w{3,})$/,
    search: function (keyword, callback) {
      callback($.grep(this.words, function (item) {
        return item.indexOf(keyword) === 0;
      }));
    }
  }
})
$("button").click(function(){
	var toinsert = "Some text goes here!<span class='replace'>More text!</span> and more here"
	$("#summer").summernote('editor.pasteHTML', toinsert);
})

    $(document).on('click', '.replace', function() {
		
        $(this).selectText();
    });
		
jQuery.fn.selectText = function(){
    var doc = document
        , element = this[0]
        , range, selection
    ;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};