Issue #3286💬 RespondidoAbierto el 23 de febrero de 2021por abulkaReacciones 0

HAZAÑA: Teclas y complementos personalizados Codemirror

Respuesta rápidapor abulka

Por fin he conseguido que el 'commentRange' incluido en Grapesjs funcione: debe invocarse directamente en 'cm.commentRange', no a través de 'cm.execCommand'. Además, toma parámetros. Así que pude hacer que funcionara algo de comentario, siempre que selecciones el área que quieres que se comente: '''javascript 'Cmd-1':...

Lee la respuesta completa abajo ↓

Pregunta

¿Hay alguna forma de añadir teclas de acceso directo y complementos para el editor Codemirror integrado? Especialmente quiero una tecla rápida para comentar.

Hay varios plugins que usan el editor Grapesjs, incluyendo https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 y los plugins personalizados de código html https://github.com/Ju99ernaut/grapesjs-script-editor y https://github.com/ryandeba/grapesjs-html-block que podrían beneficiarse de esto.

Aunque hay una forma de pasar las opciones normales de personalización de Codemirror, invocar los complementos no parece funcionar, por ejemplo. '''javascript var pfx = editor.getConfig().stylePrefix; var modal = editor. modal; var cmdm = editor. Órdenes; var codeViewer = editor. CodeManager.getViewer('CodeMirror').clone(); var pnm = editor. Paneles; var container = document.createElement('div'); var btnEdit = document.createElement('button');

codeViewer.set({ Nombre en clave: 'htmlmixed', Sólo lectura: 0, Tema: 'Rayuela', autoBeautify: cierto, autoCloseTags: cierto, autoCloseBrackets: cierto, Envolvimiento de línea: cierto, styleActiveLine: cierto, smartIndent: cierto, indentWithTabs: cierto,

toggleComment: cierto, // ¿se necesita? comentarioRango: cierto, // ¿se necesita? extraKeys: { 'Cmd-1': función (cm) { console.log('hi', cm); cm.execCommand('toggleComment') }, // FRACASA 'Cmd-2': function (cm) { cm.execCommand('toggleComment') }, // FRACASA 'Cmd-3': función (cm) { cm.execCommand('commentRange') }, // FRACASA 'Cmd-4': function (cm) { cm.execCommand('transposeChars') }, // FUNCIONA 'Ctrl-X': función (cm) { cm.execCommand('deleteLine') }, // FUNCIONA }, });


Las teclas de acceso directo funcionan bien, pero el 'cm.execCommand()' no encuentra el comando del addon relevante, aunque lo he importado en el html, por ejemplo '<script src="node_modules/codemirror/addon/comment/comment.js"></script>'. ¿Es como si los comandos del complemento no estuvieran correctamente registrados?

Si, como @artf dicho [hace un tiempo](https://github.com/artf/grapesjs/issues/77#issuecomment-305638407)
> sí, CodeMirror es una dependencia fusionada por ahora.

Y esa es la razón por la que no podemos invocar complementos, al menos deberíamos poder invocar el comando de comentario que parece estar integrado en 'https://github.com/artf/codemirror-formatting/blob/master/formatting.js' mediante 'cm.execCommand('commentRange')' - pero ni siquiera eso me funciona. 

Respuestas (3)

abulka23 de febrero de 2021

Por fin he conseguido que el 'commentRange' incluido en Grapesjs funcione: debe invocarse directamente en 'cm.commentRange', no a través de 'cm.execCommand'. Además, toma parámetros. Así que pude hacer que funcionara algo de comentario, siempre que selecciones el área que quieres que se comente:

'''javascript 'Cmd-1': función (cm) { cm.commentRange(true, cm.getCursor(true), cm.getCursor(false)) }, // commentario 'Cmd-2': función (cm) { cm.commentRange(false, cm.getCursor(true), cm.getCursor(false)) }, // uncomment.


¿Hay alguna posibilidad de que Grapesjs pueda exponer la función 'CodeMirror'? (no la instancia) - porque es necesario para muchas cosas, incluyendo llamadas como 'CodeMirror.Pos' y 'CodeMirror.cmpPos', etc.
artf3 de marzo de 2021

Sí, creo que no es un problema exponerlo en CodeMirrorEditor.js

ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @abulka.

Los problemas de seguridad y dependencias son importantes. El equipo de GrapesJS trabaja activamente para mantener las dependencias actualizadas.

Para ti ahora mismo:

  1. Ejecutar 'npm audit fix' para ver los parches disponibles
  2. Busca una versión más reciente de GrapesJS que ya haya solucionado esto
  3. Si está disponible, prueba la última versión estable antes de actualizar
  4. Si la vulnerabilidad es crítica, 'npm audit fix ---force' es una opción, pero prueba a fondo

Entendiendo el riesgo:

  • Revisar los detalles específicos de vulnerabilidades en los Avisos de Seguridad de GitHub
  • No todos los problemas de alta gravedad afectan a tu ruta de código
  • Algunas vulnerabilidades solo se activan bajo condiciones específicas

Manteniéndome al día:

  • Atentos a nuevos lanzamientos de GrapesJS
  • Suscribirse a las notificaciones de seguridad en el repositorio
  • El equipo prioriza las actualizaciones de seguridad en su ciclo de lanzamiento

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.