在openui5应用程序中使用类似于Summernote的WYSIWYG编辑器

问题描述 投票：0回答：1

我对openui5还是陌生的。我想在我的应用程序中包含summernote编辑器。我已经从其首页添加了CDN链接，但出现以下错误

ShellRenderer-dbg.js:143 Uncaught (in promise) TypeError: Cannot read property 'require' of undefined
    at Object.S.getLogoImageHtml (ShellRenderer-dbg.js:143)
    at Object.S.render (ShellRenderer-dbg.js:86)
    at R.renderControl (RenderManager-dbg.js:1004)
    at R.render (RenderManager-dbg.js:1259)
    at constructor.U.rerender (UIArea-dbg.js:629)
    at constructor.Core.renderPendingUIUpdates (Core-dbg.js:2774)
    at constructor.Core.init (Core-dbg.js:1235)
    at Core-dbg.js:485
    at a (Core-dbg.js:179)
    at SyncPoint.finishTask (Core-dbg.js:173)

任何想法都将不胜感激。谢谢

sapui5 wysiwyg
1个回答
0
投票

我已经设法在一个简单的场景中使它工作，但是不确定它如何与其他UI5元素一起工作以及重新渲染等。我已经创建了一个简单的控件来展示它如何与UI5交互，但是需要一些工作！

注意：SAPUI5在默认库中包含jQuery，尽管有可用的非jQuery版本，所以您可以使用自己的jQuery版本，但我不确定要使两者最佳重叠所需的版本。此外，Summernote似乎需要引导CSS + JS，并且不确定是否也可以与UI5一起使用，特别是如果要在Launchpad场景中进行部署。可以作为独立应用程序使用！

玩得开心！

sap.ui.define([
    "sap/ui/core/Control"
], function (Control) {
    "use strict";
  
    return Control.extend("MySummernoteControl", {
        metadata: {
            properties: {},
            aggregations: {},
            events: {}
        },
        renderer: {
          apiVersion: 2,
          render: function(rm, oButton) {
            rm.openStart("div", oButton);
            rm.openEnd();
            rm.close("div");
          }
        },
        onAfterRendering: function () {
          if (!this._rendered) {
            this.$().summernote();
            this._rendered = true;
          }
        }
    });
});

const ctrl = new MySummernoteControl();
ctrl.placeAt("content");
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script 
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap" 
            data-sap-ui-theme="sap_fiori_3" 
            data-sap-ui-xx-bindingSyntax="complex" 
            data-sap-ui-libs="sap.m"></script>
    
    <!-- include bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.js"></script>
  </head>
  
  <body class="sapUiBody sapUiSizeCompact">
    <div id='content'></div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.