如何在oraclejet中集成ckeditor

我想在应用程序中集成ckeditor。在这个方向上的任何指示或步骤都会很有帮助

下面是我遵循的步骤

npm安装--保存@ckeditor/ckeditor5 build classic

path_mapping.json条目

“ckeditor”：{
“cdn”：“第三方”，
“cwd”：“node_modules/@ckeditor/ckeditor5 build classic/build”，
“调试”：{
“src”：[“ckeditor.js”、“ckeditor.js.map”]，
“路径”：“libs/ckeditor/ckeditor.js”，
“cdnPath”：“ckeditor/ckeditor”
}，
“发布”：{
“src”：[“ckeditor.js”、“ckeditor.js.map”]，
“路径”：“libs/ckeditor/ckeditor.js”，
“cdnPath”：“ckeditor/ckeditor”
}
}

创建web/js/libs/ckeditor文件夹

main.js条目

“ckeditor”：“libs/ckeditor/ckeditor”

在viewModel中也定义了“ckeditor”，但仍出现错误：-

鉴于

<textarea id="feedback" data-bind="jqueryUI:{component: 'ckeditor', value: value, skin: 'moono-lisa', toolbar: 'basic', uiColor : '#9AB8F3'}"/>                 

---

找不到组件编辑器

以下操作对我有效。我所尝试的完全符合文档要求

使用ojet create ckEditor构建一个香草喷射应用程序

npm安装--save@ckeditor/ckeditor 5 build classic

执行path-mappings.json更改以将ckeditor包含到应用程序中

修改index.html以将其添加到body标记中：

将appController添加到main.js并绑定它：

运行应用程序。您可以看到编辑器正在工作

"ckeditor": {
  "cdn": "3rdparty",
  "cwd": "node_modules/@ckeditor/ckeditor5-build-classic/build",
  "debug": {
  "src": ["ckeditor.js", "ckeditor.js.map"],
  "path": "libs/ckeditor/ckeditor.js",
  "cdnPath": "ckeditor/ckeditor"
  },
  "release": {
  "src": ["ckeditor.js", "ckeditor.js.map"],
  "path": "libs/ckeditor/ckeditor.js",
  "cdnPath": "ckeditor/ckeditor"
  }
}     

<div id="globalBody">
  <h1>CK Editor on Oracle JET</h1>
  <div id="editor">
    <p>This is the editor content.</p>
  </div>      
</div>

define(['knockout', 'ckeditor'], function(ko, ClassicEditor) {
  var Controller = function() {
    // This code is taken directly from the readme of ckeditor
    // https://github.com/ckeditor/ckeditor5-build-classic
    ClassicEditor.create(document.querySelector( '#editor' ))
        .then(editor => {
            window.editor = editor;
        })
        .catch(err => {
            console.error( err.stack );
        });
  };

  return new Controller();
});

require(['ojs/ojcore', 'knockout', 'jquery', 'appController', 'ojs/ojknockout'],
  function (oj, ko, $, app) {
    $(function () {
      function init() {
        ko.applyBindings(app, document.getElementById('globalBody'));
      }

      // If running in a hybrid (e.g. Cordova) environment, we need to wait for the deviceready
      // event before executing any code that might interact with Cordova APIs or plugins.
      if ($(document.body).hasClass('oj-hybrid')) {
        document.addEventListener('deviceready', init);
      } else {
        init();
      }
    });
  }
);