Unable to type in editor box of CKEditor

I am integrating an custom build of CKEditor in my angular project and using a trial version of it.

I am able to initialize the editor and able to show all custom toolbar items on the toolbar as well.

Issue is that I am not able to type any content in the editor, neither I am able to paste anything.

`<p style="text-align:justify;"><strong>&nbsp; &nbsp; &nbsp;</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</p><p style="text-align:justify;"><strong>&nbsp; &nbsp; &nbsp;</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</p>`


i get above data in console where i can see the tags but content replaced by &nbsp;

and while typing i dont even get the console.

below is the implemented code:

HTML:

`<ckeditor [editor]="CkEditor" class="classic-editor" id="editorCk" [(ngModel)]="editorContent"
(ready)="onReadyChanged($event)" >
</ckeditor>`


Typescript file:

`
import * as Editor from 'ckeditor5/build/ckeditor';

onReadyChanged(event?) {
let toolbarItems = [];
this.edi = document.getElementById('editorCk');
toolbarItems = Array.from(event.ui.componentFactory.names());
console.log('Available toolbar items: ' + toolbarItems);
this.CkEditor.create(this.edi, {
initialData: this.editorContent,
isReadOnly: true, typing: {
autoGrow: true, // Enables automatic editor height adjustment as you type
blockSpaces: true, // Automatically adds non-breaking spaces in certain contexts
},
licenseKey: 'ZUJUSmw1Rm9SdnZKd09TRitmTGZrZzUvU3pFeGZpYUgwWXd5bFZGQWtyWFNCTGlPZE54TjJ3SlRpYlRmLU1qQXlOREF6TXpFPQ==',
toolbar: {
items: toolbarItems
},
editor: {
data: '<p>Hello, CKEditorss!</p>',
on: {
change: (event) => {
console.log('Editor content changed:', event);
}
}
}
}).then((res) => {

res.disableReadOnlyMode('editorCk');
const editorContent = res.getData() || '';

const root = res.model.document.getRoot();
console.log('root.getRoot();', root);

res.model.document.on('change:data', () => {
console.log('Editor content changed:', res.getData());
});
console.log('Loaded plugins:', res.plugins.list);
console.log('Editor configuration:', res.config._config);
console.log('Editor DOM element:', res.ui.element);
console.log(res, 'ck editor ready');

}).catch((err) => {
console.log(err.stack, 'error editor');
})
}
`


package.json:

`{
"name": "MangoApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng s --o --c='dev'",
"dev": "ng s --o --c='dev'",
"qa": "ng s --o --c='test'",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^14.3.0",
"@angular/cdk": "^13.0.2",
"@angular/common": "^14.3.0",
"@angular/compiler": "^14.3.0",
"@angular/core": "^14.3.0",
"@angular/forms": "^14.3.0",
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/router": "^14.3.0",
"@aspnet/signalr": "^1.0.27",
"@azure/msal-angular": "^2.0.2",
"@azure/msal-browser": "^2.16.1",
"@capacitor/app": "1.0.2",
"@capacitor/core": "3.2.0",
"@capacitor/haptics": "1.0.2",
"@capacitor/keyboard": "1.0.2",
"@capacitor/status-bar": "1.0.2",
"@ckeditor/ckeditor5-angular": "^4.0.0",
"@ckeditor/ckeditor5-build-classic": "41.2.0",
"@ckeditor/ckeditor5-core": "41.2.0",
"@ckeditor/ckeditor5-engine": "41.2.0",
"@ckeditor/ckeditor5-pagination": "41.2.0",
"@ckeditor/ckeditor5-paste-from-office": "41.2.0",
"@ckeditor/ckeditor5-utils": "41.2.0",
"@ckeditor/ckeditor5-watchdog": "41.2.0",
"@ionic/angular": "^6.7.5",
"@microsoft/microsoft-graph-client": "^3.0.0",
"@ng-select/ng-select": "8.3.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@swimlane/ngx-charts": "^19.1.0",
"angular-auth-oidc-client": "^13.1.0",
"angular-svg-round-progressbar": "^8.0.0",
"aos": "^2.3.4",
"ckeditor5-custom-build": "file:../../../Users/kpatb/Downloads/ckeditor5-41.1.0-onxcjnxd6cdl",
"date-fns": "^2.23.0",
"date-fns-tz": "^1.1.6",
"docx": "^7.4.1",
"echarts": "^5.4.3",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"file-viewer": "^1.2.0",
"html-docx-js-typescript": "^0.1.5",
"html2pdf.js": "^0.9.2",
"moment": "^2.29.1",
"mustache": "^4.2.0",
"ng-pick-datetime": "^7.0.0",
"ng2-pdf-viewer": "^9.1.0",
"ng2-search-filter": "^0.5.1",
"ngx-cookie-service": "^13.1.2",
"ngx-doc-viewer": "^2.1.4",
"ngx-echarts": "8.0.1",
"ngx-infinite-scroll": "^10.0.1",
"ngx-pipes": "^2.7.6",
"ngx-print": "^1.2.1",
"ngx-quill": "^14.3.0",
"pdf-lib": "^1.17.1",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"windows-iana": "^5.0.2",
"xlsx": "^0.17.5",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.13",
"@angular-eslint/builder": "~14.4.0",
"@angular-eslint/eslint-plugin": "~14.4.0",
"@angular-eslint/eslint-plugin-template": "~14.4.0",
"@angular-eslint/template-parser": "~14.4.0",
"@angular/cli": "14.2.13",
"@angular/compiler-cli": "^14.3.0",
"@angular/language-service": "^14.3.0",
"@capacitor/cli": "3.2.0",
"@ionic/angular-toolkit": "^4.0.0",
"@microsoft/microsoft-graph-types": "^2.20.0",
"@microsoft/signalr": "6.0.6",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/mustache": "^4.2.2",
"@types/node": "^12.20.55",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"cordova-android": "^9.1.0",
"cordova-browser": "^6.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.6.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android",
"browser"
]
}
}
`


Not sure why I am not able to type or paste the data in it. can someone please helps me with the editor?

I tried res.disableReadOnlyMode('editorCk'); and passing isReadOnly: false which is in the document of it but its not working.

Related question but not helpful

CKEditor: can't type in editor field

Cannot type in CKeditor with fancybox

Not able to type in ckeditor on safari or ipad

Continue reading...