Интеграция панели инструментов Quill Rich Text Editor в проект SAPUI5 (Javascript)

Я хочу интегрировать Quill в проект SAPUI5. Проблема в том, что Quill использует HTML с разными 's, тогда как все мое приложение 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);

и я попробовал

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

ни чего не работает.


javascript html sapui5 quill
person Daniël Camps    schedule 16.10.2015    source источник
comment
вы тем временем запустили его? ищу то же самое. было бы замечательно.   -  person dotchuZ    schedule 25.04.2016
comment
@zyrex В итоге я выбрал ckeditor.com, который работает очень хорошо и быстро. Мне нравится, я могу помочь тебе начать работу   -  person Daniël Camps    schedule 29.04.2016
comment
это было бы здорово, я уже пробовал реализовать, но не запустил, как вы это сделали? вы бы действительно решили одну из моих самых больших проблем !! вы загрузили всю библиотеку в свой проект?   -  person dotchuZ    schedule 29.04.2016
comment
@zyrex Я выложил ядро, как заставить его работать. У меня это работает очень хорошо, даже когда у меня есть форма с 20 редакторами форматированного текста. Пожалуйста, дайте мне знать, работает ли это для вас   -  person Daniël Camps    schedule 29.04.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел альтернативу: 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
person Daniël Camps    schedule 29.04.2016
comment
не могли бы вы опубликовать некоторую информацию о CKEditorPath и особенно о том, какие библиотеки вы должны туда поместить? - person dotchuZ; 29.04.2016
comment
@zyrex, поскольку CKEditor ожидает глобальную переменную пути, если вы используете функцию SAP require, я сделал следующее: // Глобальная переменная: var CKEDITOR_BASEPATH = resources / libraries / ckeditor /; jQuery.sap.registerModulePath (CKEditorPath, CKEDITOR_BASEPATH); требуемый код из приведенного выше фрагмента будет легко интегрирован. Я поместил всю папку ckeditor в webcontent / resources / libraries - person Daniël Camps; 29.04.2016
comment
извините за вопрос, но я действительно борюсь с папкой. Я загрузил редактор CK, нужно ли мне загружать все папки в ..libraries / ckeditor (мой загруженный пакет включает в себя адаптеры, lang, плагины, образцы, скины и некоторые файлы .js ...), вы все загрузили в твоя папка? Спасибо! - person dotchuZ; 29.04.2016
comment
@zyrex, да, я загрузил все эти файлы в папку ckeditor и объявил глобальную переменную (в вашем случае: CKEDITOR_BASEPATH = libraries / ckeditor). Обязательно используйте jQuery.sap.registerModulePath (CKEditorPath, CKE‌ DITOR_BASEPATH) и используйте jQuery.sap.require (CKEditorPath.ckeditor); - person Daniël Camps; 02.05.2016