Использование редактора WYSIWYG, например summernote, в приложении openui5 - PullRequest
Новая
       87

Использование редактора WYSIWYG, например summernote, в приложении openui5

0 голосов
/ 17 июня 2020

Я новичок в openui5. Я хочу включить редактор летних заметок в свое приложение. Я включил ссылки 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)

Любые идеи были бы очень признательны. Спасибо

1 Ответ

1 голос
/ 18 июня 2020

Мне удалось заставить это работать в простом сценарии, но я не уверен, как это будет работать с другими элементами UI5 и повторным рендерингом и т.д. c. Я создал простой элемент управления, чтобы показать, как он может взаимодействовать с UI5, но для этого потребуется некоторая работа!

Примечания: SAPUI5 содержит jQuery в библиотеке по умолчанию, хотя существует версия, отличная от jQuery доступен, поэтому вы можете использовать свою собственную версию jQuery, я не уверен, какая версия необходима для оптимального перекрытия обеих версий. Кроме того, Summernote, похоже, требует bootstrap 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/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.js"></script>
  </head>
  
  <body class="sapUiBody sapUiSizeCompact">
    <div id='content'></div>
  </body>
</html>
...