CODEWITHSUNDEEP
javascripthtmlsapui5quill
Daniël Camps
Daniël Camps

Reputation: 1809

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

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.

Upvotes: 2

Views: 1949

Answers (1)

Dani&#235;l Camps
Dani&#235;l Camps

Reputation: 1809

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

Upvotes: 1

Related Questions