Estoy tratando de añadir a CKEitor 5 la funcionalidad del boton TAB, es decir, agregar 4 espacios al precionar el tabulador.
buscando lo unico que encontre fue el codigo que ven aqui abajo
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editor.editing.view.document.on( 'keydown', function(e){
if ( e.keyCode == 9 ) {
e.preventDefault();
this.value+=" ";
}
});
myEditor = editor;
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
<textarea id="editor"></textarea>
No estando conforme, ya que me cambia el focus, probe lo siguiente, tratando de tomar el objeto editor
(que en fin de cuentas es el editor creado por la libreria)
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
$(editor).on( 'keydown', function(e){
if ( e.keyCode == 9 ) {
console.log( 'AAAAAA!!' );
e.preventDefault();
this.value += " ";
}
});
myEditor = editor;
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
<textarea id="editor"></textarea>
pero como ven, al precionar el TAB sigue cambiando el focus.
otro tentativo fue el siguiente, tratando de tomarlo gracias a las clases que utiliza CKEditor (clases tomadas de la ventana de desarrollo):
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
$(".ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-blurred.ck-editor__editable_inline").on( 'keydown', function(e){
if ( e.keyCode == 9 ) {
editor.setData(editor.getData()+" ");
e.preventDefault();
}
});
myEditor = editor;
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
<textarea id="editor"></textarea>
en este caso directamente no hace nada mientras que si trato de alcanzar el textarea :
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
$("#editor").on( 'keydown', function(e){
if ( e.keyCode == 9 ) {
e.preventDefault();
this.value+=" ";
}
});
myEditor = editor;
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
<textarea id="editor"></textarea>
me sigue cambiando el focus.
alguien tendria alguna idea de como podria hacer ?