title: Dynamically instantiate QuillJS editor
body: <p>(I'm going to preface this with the fact that I'm a new javascript developer, and I'm sure I have gaps in my knowledge about how javascript/angular/quill all work together on the page.) </p>
  
  <p>I'm wanting to know if this is possible. Instead of instantiating the editor in the script tag on the page, I want to instantiate the editor for the div when it gets clicked. I'm using an Angular controller for my page, and inside the on click event I set up for the div, I tried a few things:</p>
  
  <pre><code>editor = new Quill(myDiv, {
           modules: { toolbar: '#toolbar' },
           theme: 'snow'
           });
  </code></pre>
  
  <p>But that didn't work, so I thought maybe I had to explicitly pass the id of the div:</p>
  
  <pre><code>editor = new Quill('#editor', {
           modules: { toolbar: '#toolbar' },
           theme: 'snow'
           });
  </code></pre>
  
  <p>This didn't work, and didn't focus inside the div and allow me to edit. So I thought maybe the problem was that I was hijacking the click event with angular, and maybe I need to switch the focus to the div after instantiating the editor. So I created a focus directive (just copy/pasted from another SO article) which worked fine when I tested on an input. </p>
  
  <pre><code>app.directive('focusOn', function () {
  return function (scope, elem, attr) {
      scope.$on(attr.focusOn, function (e) {
          elem[0].focus();
      });
  };
  </code></pre>
  
  <p>then in the on click function in the angular controller:</p>
  
  <pre><code>$scope.$broadcast('focussec123');
                      if (editor == null) {
                          editor = new Quill('#editor', {
                              modules: { toolbar: '#toolbar' },
                              theme: 'snow'
                          });
                      }
  </code></pre>
  
  <p>That worked to select the text inside the div, but it didn't show the toolbar and so I suspected it didn't really work. I'm sure I'm misunderstanding some interactions and I'm fully aware I lack a lot of necessary knowledge about JS. My bottom line is I want to know:</p>
  
  <ol>
  <li>Is it possible to dynamically instantiate the editor only for the current section, and to instantiate the editor again for another section when it gets clicked, etc.</li>
  <li>If so, how?</li>
  </ol>
  
  <p>Thanks in advance.</p>