title: Integrating Quill Rich Text Editor toolbar in SAPUI5 (Javascript) project
body: <p>I want to integrate Quill into a SAPUI5 project. The problem is that Quill uses HTML with different 's, whereas my entire SAPUI5 application only has one div tag and for the rest everything is Javascript.</p>
  
  <p>I have managed to get the quill editor working properly into my application as follows:</p>
  
  <pre><code>var oPanel = new sap.m.Panel( {
    content: new sap.ui.core.HTML( {
      afterRendering: function() {
  
        var oRichTextArea = new Quill("#" + oPanel.sId, {
          'toolbar': {
            container: "#toolbar" 
          },
          theme: 'snow'
        });
  
        oRichTextArea.setHTML("");
  
        oRichTextArea.on('text-change', function(delta, source) {
         //do something
        });
      }
    })
  });
  </code></pre>
  
  <p>However, the <a href="http://quilljs.com/docs/modules/toolbar/" rel="nofollow">documentation</a> for the toolbar suggests doing this:</p>
  
  <pre><code>&lt;div id="toolbar"&gt;
    &lt;!-- Add font size dropdown --&gt;
    &lt;select class="ql-size"&gt;
      &lt;option value="10px"&gt;Small&lt;/option&gt;
      &lt;option value="13px" selected&gt;Normal&lt;/option&gt;
      &lt;option value="18px"&gt;Large&lt;/option&gt;
      &lt;option value="32px"&gt;Huge&lt;/option&gt;
    &lt;/select&gt;
    &lt;!-- Add a bold button --&gt;
    &lt;button class="ql-bold"&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="editor"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to either add this div into my SAPUI5 in a working manner, or I can create my own toolbar. I have attempted the following code (the <a href="http://quilljs.com/docs/modules/toolbar/" rel="nofollow">documentation</a> says these style classes automatically add a click event):</p>
  
  <pre><code>   var oTools = new sap.m.Panel("toolbar", {
        content: [new sap.m.Text( {
          text: "Bold"
        }).addStyleClass("ql-bold")]
      }).addStyleClass("ql-toolbar");
  </code></pre>
  
  <p>but it was to no avail.</p>
  
  <p>I also tried appending the recommended HTML as the content of an HTML element, but also then I did not manage to connect the buttons to the text editor:</p>
  
  <pre><code>var oPanelHTML = new sap.m.Panel();
  
  var sInnerHTML = '&lt;div id=toolbar&gt;&lt;button class="ql-bold"&gt;Bold&lt;/button&gt;&lt;button class="ql-italic"&gt;Italic&lt;/button&gt;&lt;/div&gt;&lt;!-- Create the editor container --&gt;&lt;div id="' + oPanelResult.sId + '-editor' + '"&gt;&lt;div&gt;Hello World!&lt;/div&gt;&lt;div&gt;Some initial &lt;b&gt;bold&lt;/b&gt; text&lt;/div&gt; &lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;';
  
  $("#" + oPanelHTML.sId).append(sInnerHTML);
  </code></pre>
  
  <p>and I tried</p>
  
  <pre><code>var oHTML = new sap.ui.core.HTML( {
  content: sInnerHTML
  });
  </code></pre>
  
  <p>neither of which works.</p>