как интегрировать 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",
"debug": {
" src ": [" ckeditor.js "," ckeditor.js.map "],
" путь ":" libs / ckeditor / ckeditor.js ",
" cdnPath ":"ckeditor / ckeditor"
},
"release": {
"src": ["ckeditor.js", "ckeditor.js.map"],
"path": "libs/ckeditor/ckeditor.js",
"cdnPath": "ckeditor / ckeditor"
}
} ​​

web / js / libs / ckeditor Папка создана.

main.js entry

'ckeditor': 'libs / ckeditor / ckeditor'

также определил 'ckeditor' в viewModel, но все еще получаю ошибку: -

в представлении

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

Компонент ckeditor не найден

Answer 1

Следующее сработало для меня. То, что я попробовал, точно соответствует документации ckeditor .

1. Эшафот с ванильным реактивным двигателем, используя ojet create ckEditor
2. npm install --save @ckeditor/ckeditor5-build-classic
3. Измените путь path-mappings.json, чтобы включить ckeditor в приложение.

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

4. Измените index.html, чтобы добавить это в тег body:

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

5. Создайте appController.js (необязательно, вы можете добавить требуемый ckeditor непосредственно в 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();
});

6. Добавьте appController в main.js и привяжите его:

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

Запустите приложение. Вы можете видеть, как работает CKEditor.