how to integrate ckeditor in oraclejet

Question

I want to integrate ckeditor in the app. Any pointers or steps in that direction will really help.

Below steps I followed.

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

path_mapping.json entry

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

web/js/libs/ckeditor folder is created.

main.js entry

'ckeditor': 'libs/ckeditor/ckeditor'

defined 'ckeditor' in viewModel also but still getting error:-

in view

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

Component ckeditor is not found

Answer 1

The following worked for me. What I tried is exactly as per ckeditor documentation.

1. Scaffold a vanilla jet application using ojet create ckEditor
2. npm install --save @ckeditor/ckeditor5-build-classic
3. Do the path-mappings.json changes to include ckeditor into the app.

"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. Modify index.html to add this into the body tag:

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

5. Create an appController.js (optional, you can add the ckeditor require directly on to main.js, but I prefer this)

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. Add appController to main.js and bind it:

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

Run the app. You can see the CKEditor working.