title: Access written Text in QuillJS
body: <p>I am using <a href="http://quilljs.com/" rel="nofollow noreferrer">Quill JS</a> as a rich text editor. I want to be able to highlight specific words in the text, if the user clicks a button. But it seems as Quill JS does not give permission to edit its contents by another plugin (?)</p>
  
  <p>I tried <a href="https://markjs.io/" rel="nofollow noreferrer">Mark.js</a> and <a href="http://bartaz.github.io/sandbox.js/jquery.highlight.html" rel="nofollow noreferrer">Highlight.js</a>, but they will only work on elements which are not in the Quill JS editor. The trigger seems to work though, since the <p>line with the correct keyword flashes in Firefox Inspector, like there is something accessing that line, but in the browser there is no real change. </p>
  
  <p>I posted a little example code (<strong>please ignore the first part of the Javascript</strong> since it is just the highlight.js plugin I had to put there. My custom code is at the very end):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
    
    // My custom code is at the very end. This is the highlight.js plugin code:
    // Copyright (c) 2009 Bartek Szopka
    jQuery.extend({
      highlight: function (node, re, nodeName, className) {
          if (node.nodeType === 3) {
              var match = node.data.match(re);
              if (match) {
                  var highlight = document.createElement(nodeName || 'span');
                  highlight.className = className || 'highlight';
                  var wordNode = node.splitText(match.index);
                  wordNode.splitText(match[0].length);
                  var wordClone = wordNode.cloneNode(true);
                  highlight.appendChild(wordClone);
                  wordNode.parentNode.replaceChild(highlight, wordNode);
                  return 1; //skip added node in parent
              }
          } else if ((node.nodeType === 1 &amp;&amp; node.childNodes) &amp;&amp; // only element nodes that have children
                  !/(script|style)/i.test(node.tagName) &amp;&amp; // ignore script and style nodes
                  !(node.tagName === nodeName.toUpperCase() &amp;&amp; node.className === className)) { // skip if already highlighted
              for (var i = 0; i &lt; node.childNodes.length; i++) {
                  i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
              }
          }
          return 0;
      }
  });
  
  jQuery.fn.unhighlight = function (options) {
      var settings = { className: 'highlight', element: 'span' };
      jQuery.extend(settings, options);
  
      return this.find(settings.element + "." + settings.className).each(function () {
          var parent = this.parentNode;
          parent.replaceChild(this.firstChild, this);
          parent.normalize();
      }).end();
  };
  
  jQuery.fn.highlight = function (words, options) {
      var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
      jQuery.extend(settings, options);
      
      if (words.constructor === String) {
          words = [words];
      }
      words = jQuery.grep(words, function(word, i){
        return word != '';
      });
      words = jQuery.map(words, function(word, i) {
        return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&amp;");
      });
      if (words.length == 0) { return this; };
  
      var flag = settings.caseSensitive ? "" : "i";
      var pattern = "(" + words.join("|") + ")";
      if (settings.wordsOnly) {
          pattern = "\\b" + pattern + "\\b";
      }
      var re = new RegExp(pattern, flag);
      
      return this.each(function () {
          jQuery.highlight(this, re, settings.element, settings.className);
      });
  };
  
    // -------------------------------------------------------------------------
    // My custom code
    // -------------------------------------------------------------------------
    
   // Initialize Quill editor options
   var toolbarOptions = [
     ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
   ];
   
   // Setup Quill editor
   var options = {
    
     modules: {
    toolbar: toolbarOptions
     },
     placeholder: 'Start writing demo and another word then hit the green div...',
     theme: 'snow'
   };
   var editor = new Quill('#editor', options);
   
   // Use highlight js to highlight every "demo" in the text
   $("#clicker").on("click", function() {
    $("p").highlight("demo");
   });
   
   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #clicker {
     background-color: #ddffdd;
     display: block;
     padding: 32px;
     text-align: center;
     }
  
      .highlight {
          background-color: #FFFF88;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Prototype&lt;/title&gt;
      &lt;meta name="description" content="This is a  demo page."&gt;
  
      &lt;link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet"&gt;
   
      &lt;script type="text/javascript" src="https://cdn.quilljs.com/1.1.5/quill.js"&gt;&lt;/script&gt;
   
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="clicker" style="cursor: pointer"&gt;Mark "demo" in Text by clicking here&lt;/div&gt;
   &lt;main&gt;
    &lt;div id="editor"&gt;&lt;/div&gt;
    &lt;div&gt;
     &lt;p&gt;demo outside of editor&lt;/p&gt;
    &lt;/div&gt;
   &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>