在SAPUI5 (Javascript)项目中集成Quill富文本编辑器工具栏

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

本文关键字：Quill 文本 文本编辑 工具栏 编辑器 集成 SAPUI5 Javascript 项目      更新时间：2023-09-26

我想将Quill集成到SAPUI5项目中。问题是Quill使用不同的HTML，而我的整个SAPUI5应用程序只有一个div标签，其余的都是Javascript。

我已经设法使羽毛笔编辑器正常工作到我的应用程序如下:

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

但是，工具栏的文档建议这样做:

<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>

我想以工作方式将这个div添加到我的SAPUI5中，或者我可以创建我自己的工具栏。我尝试了以下代码(文档说这些样式类会自动添加单击事件):

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

但无济于事。

我还尝试附加推荐的HTML作为HTML元素的内容，但我也没有设法将按钮连接到文本编辑器:

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

我找到了一个替代方案:CKEditor。我复制了如何将富文本编辑器包含到SAPUI5中的相关代码。我将库上传到我的项目中，并在JS片段

中使用以下代码
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
相关文章：