Currently, I am in the process of developing a soft keyboard using CKEditor. One part of this involves transforming text upon input (which I have completed) and occasionally needing to delete a key (where I am currently facing challenges). Below is the snippet of my current code:
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then(editor => {
console.log( editor );
editor.editing.view.document.on( 'keydown', ( event, data ) => {
var keyPressed = data.domEvent.key;
//getMappedCharacter returns a map
//String newKey -> value of the keyPressed
//Boolean deleteKey -> Whether the previous character should be deleted
var mappedCode = getMappedCharacter(keyPressed);
console.log('mc', mappedCode)
if (mappedCode.newKey != keyPressed) {
data.preventDefault();
event.stop();
if(mappedCode.deleteKey){
// Struggling with this section
// Attempting to delete the most recently inserted character at cursor location.
}
editor.model.change( writer => {
writer.insertText( mappedCode.newKey, editor.model.document.selection.getFirstPosition() );
} );
}
})
})
.catch( error => {
console.error( error );
} );
As part of my project, I am trying to incorporate the ckeditor5-typing package's Delete command with CKEditor5 in an Angular/Typescript application. The documentation suggests adding the Typing package within the Plugins like so
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic ],
toolbar: [ 'bold', 'italic' ]
} )
However, when implementing this, I encounter the following error in the console:
https://i.sstatic.net/eJRT0.png
Upon executing
document.querySelector('#editor')<textarea _ngcontent-c1 dir="rtl" id="editor" name="content"></textarea>Therefore, it is unclear why a null error is being displayed in the console.
Any assistance on this matter would be greatly appreciated.