how to integrate ckeditor in oraclejet - ckeditor

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.
Scaffold a vanilla jet application using ojet create ckEditor
npm install --save #ckeditor/ckeditor5-build-classic
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"
}
}
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>
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();
});
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.