0

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 ?

2
  • Has probado con este addon? ckeditor.com/cke4/addon/tab
    – kosmosan
    Commented el 30 ene. 2019 a las 13:12
  • @kosmosan es para la version 4 :( que no me funciona al interno de SharePoint
    – Federico
    Commented el 30 ene. 2019 a las 13:18

1 respuesta 1

1

Encontre la solucion!

hay que utilizar la propriedad .keystrokes.set() a la cual hay que pasar como parametro :keyName y callback en mi caso : editor.keystrokes.set("tab", (data, cancel) => {...}).

para agregar el texto hay que utilizar el metodo change del modelo : editor.model.change ( writer => {...}) ahi instanciamos un writer, y le decimos que queremos añadir como testo plano ' ', eso se hace de la siguiente manera : writer.insertText(" ", editor.model.document.selection.getFirstPosition()) ahi lo que estamos haciendo es :

  1. le decimos que insertar en este caso ' ' (4 espacios)
  2. donde lo queremos insertar ? en este caso agarramos nuevamente el modelo, y le decimos que tome la primera posision de la seleccion que hemos echo al interno del documento.

y el cancel() toma la funcion de e.preventDefault, es este caso es nativo osea que evita conflictos con otras partes de codigo.

PD: para probar el codigo escribir algo al interno del documento, en caso contrario el puntador queda al inicio aunque añada la indentacion

ClassicEditor
      .create(document.querySelector('#editor'))
      .then(editor => {
          editor.keystrokes.set( 'Tab', ( data, cancel ) => {
             editor.model.change( writer => {
                  writer.insertText("    ", editor.model.document.selection.getFirstPosition()) 
             });
             cancel();
           });
        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>

espero que sea de ayuda para alguien mas !

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.