Integrating Quill Rich Text Editor toolbar in SAPUI5 (Javascript) project

Question

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.

I have managed to get the quill editor working properly into my application as follows:

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
      });
    }
  })
});

However, the documentation for the toolbar suggests doing this:

<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="10px">Small</option>
    <option value="13px" selected>Normal</option>
    <option value="18px">Large</option>
    <option value="32px">Huge</option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
</div>
<div id="editor"></div>

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 documentation says these style classes automatically add a click event):

   var oTools = new sap.m.Panel("toolbar", {
      content: [new sap.m.Text( {
        text: "Bold"
      }).addStyleClass("ql-bold")]
    }).addStyleClass("ql-toolbar");

but it was to no avail.

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:

var oPanelHTML = new sap.m.Panel();

var sInnerHTML = '<div id=toolbar><button class="ql-bold">Bold</button><button class="ql-italic">Italic</button></div><!-- Create the editor container --><div id="' + oPanelResult.sId + '-editor' + '"><div>Hello World!</div><div>Some initial <b>bold</b> text</div> <div><br></div></div>';

$("#" + oPanelHTML.sId).append(sInnerHTML);

and I tried

var oHTML = new sap.ui.core.HTML( {
content: sInnerHTML
});

neither of which works.

did you get it running in the meantime? looking for the same. would be great. — dotchuZ
@zyrex I ended up choosing ckeditor.com which works really well and fast. I you like I can help you get started — Daniël Camps
this would be great, i already tried implementing but didnt get it running, how did you do it? you would really solve one of my biggest Problems!! did you upload the whole library to your Project? — dotchuZ
@zyrex I uploaded the core of how I got it to work. It works really well for me, even when I have a form with 20 rich text editors. Please let me know if it works for you — Daniël Camps

Daniël Camps Daniël Camps · Accepted Answer · 2016-04-29T08:18:30

I found an alternative: CKEditor. I copied the relevant code of how I included the Rich Text Editor into SAPUI5. I uploaded the library into my project, and use the following code in a JS fragment

jQuery.sap.require("CKEditorPath.ckeditor");

var oEditor = false;
var bInit = false;
var oPanel = new sap.m.Panel();
var sTextAreaId = oPanel.getId() + "-textarea";

var oTextArea = new sap.m.TextArea(sTextAreaId, {}).addEventDelegate( {
      onAfterRendering: function() {

            if (oEditor) {
        oEditor.destroy();
        bInit = false;
      }

        if (!bInit) {
          bInit = true;

          oEditor = CKEDITOR.replace(sTextAreaId, {
            on: {
              instanceReady: function(oEvent) {

                /*
                 * Use CKEditor API to respond to the events you care about, and set your settings
                 */

            }
          });

        }
      }


     });

oPanel.addContent(oTextArea);
return oPanel

Integrating Quill Rich Text Editor toolbar in SAPUI5 (Javascript) project

1 Answers