如何将ckeditor集成到oraclejet中

Question

我想将ckeditor集成到应用程序中。朝这个方向的任何指示或步骤都会真正有帮助。

按照我的步骤进行。

npm install --save @ ckeditor / ckeditor5-build-classic

path_mapping.json条目

“ ckeditor”：{
      “ cdn”：“ 3rdparty”，
      “ cwd”：“ node_modules / @ ckeditor / ckeditor5-build-classic / build”，
      “调试”：{
        “ src”：[“ ckeditor.js”，“ ckeditor.js.map”]，
        “ path”：“ libs / ckeditor / ckeditor.js”，
        “ cdnPath”：“ ckeditor / ckeditor”
      }，
      “发布”：{
        “ src”：[“ ckeditor.js”，“ ckeditor.js.map”]，
        “ path”：“ 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'}"/>                 

未找到组件ckeditor

Answer 1

以下内容对我有用。我尝试的完全按照ckeditor文档。

1. 使用onCreate折叠香草喷射机应用程序
2. ojet create ckEditor
3. 执行path-mappings.json更改以将ckeditor包含到应用程序中。

npm install --save @ckeditor/ckeditor5-build-classic

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

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

1. 创建一个appController.js（可选，您可以将ckeditor需求直接添加到main.js上，但我更喜欢）

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

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

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

运行该应用。您可以看到CKEditor正常运行。