javascript - example - ckeditor replace textarea

Método abreviado de teclado para insertar texto(guión suave) con CKEditor

Question

¿Cómo puedo decirle a CKEditor que inserte un guión suave ( ­ ) con un método abreviado de teclado determinado, como Ctrl + - (guión) como en Word? Sé que puedo escribir Alt + 0173 , pero a mi cliente no le gusta eso.

Answer 1

CKEditor 4

Usaremos la API de enlace de teclas incorporada de CKEditor para asignar un comando personalizado al atajo de teclado personalizado Ctrl + Shift + (porque Ctrl + solo activa el atajo "alejar" en muchos navegadores). Vamos a envolver todo esto en un plugin para modularidad:

CKEDITOR.plugins.add(''soft-hyphen-shortcut-key'', {
    init: function (editor) {
        var shortcutKeys = CKEDITOR.CTRL + CKEDITOR.SHIFT + 189;

        editor.addCommand(''insertSoftHyphen'', {
            exec: function (editor, data) {
                editor.insertHtml(''­'');
            }
        });

        editor.keystrokeHandler.keystrokes[shortcutKeys] = ''insertSoftHyphen'';
    }
});

Esta implementación utiliza el método de editor insertHtml() para agregar el ­ Entidad HTML al documento en la posición del cursor cuando el usuario presiona la combinación de teclas. Podemos inicializar una nueva instancia de editor con un <textarea name="editor"> que carga nuestro complemento:

CKEDITOR.replace(''editor'', {
    extraPlugins: ''soft-hyphen-shortcut-key''
});

Aquí hay una demonstration (tuve que hacer esto externo, los fragmentos de código no funcionarán con el <iframe> CKEditor).

CKEditor 5

Esta versión está en alfa en el momento de la redacción, por lo que es posible que la API y la documentación no estén completas. La versión 5 cambia dramáticamente la arquitectura del proyecto, incluyendo un cambio a ES6 para el código fuente, por lo que no demostraré cómo crear un complemento para esta versión (necesitaríamos compilarlo). En su lugar, crearemos la misma funcionalidad que crearíamos con el complemento cuando iniciemos el editor:

ClassicEditor
    .create(document.querySelector(''#editor1''))
    .then(function (editor) {
        var shortcutKeys = [ ''Ctrl'', ''Shift'', 189 ];
        var softHyphen = ''/u00AD'';

        editor.keystrokes.set(shortcutKeys, function () {
            editor.execute(''input'', { text: softHyphen });
        });
    });

La versión 5 no parece incluir un equivalente a insertHtml() de la versión 4 todavía, por lo que el ejemplo utiliza el carácter Unicode para el guión suave. Aquí está la demo para v5 .

Para aquellos interesados ​​en crear un complemento y comando personalizados para la versión 5, consulte la documentación para el Marco CKEditor 5 . Esto requiere un entorno donde podamos instalar los paquetes npm del marco. Usaremos ES6 para ampliar las clases del marco y el paquete web para agruparlos.

Una nota rápida para abordar la recompensa: podemos vincular combinaciones de teclas de manera similar en TinyMCE ( demo ):

tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("ctrl+shift+189", ''Insert Soft Hyphen'', function () {
            editor.execCommand(''mceInsertContent'', false, ''/u00AD'');
        })
    }
});

Answer 2

En lugar de Ctrl + - , puedes usar Alt + - . Porque Ctrl + - la clave asignada por defecto del navegador, que se utiliza para alejar la imagen.

Aquí hay un ejemplo de clasificación:

tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("alt+189", ''Insert Soft Hyphen'', function () {
            editor.execCommand(''mceInsertContent'', false, ''­'');
        })
    }
});