Issue #3231💬 RespondidoAbierto el 13 de enero de 2021por vatte21Reacciones 2

Cómo cambiar el componente GJS-ckeditor-format

Respuesta rápidapor Abhisheknanda13444631

@vatte21 Para que tu componente sea editable. Tienes que extender el texto en tu componente de esta manera '''js editor. Components.addType('anyDiv', { modelo: { Predeterminados: { Tipo: 'texto', Rasgos:[ ... editor. Componentes.getType(type.id).model.prototype.defaults.traits, ... [] ] }, reRender() { this.view.rende...

Lee la respuesta completa abajo ↓

Pregunta

Hola a todos, Todos sabemos que el plugin GJS-ckeditor-funciona con componentes [data-gjs-type]="text". Quiero saber, ¿podríamos cambiar esta opción? Quiero crear mi propio componente personalizado con, por ejemplo, [data-gjs-type]="anyDiv" y tener la misma funcionalidad que en [data-gjs-type]="text". ¿Quizá alguien sabe cómo cambiar eso? ¿Quizá pueda cambiar eso en la configuración de CKEDITOR? Cuando inicializamos CKEDITOR, por ejemplo: Opciones: { !!!!! Por ejemplo: formato: 'texto', quiero añadir ('anyDiv'), idioma: 'en', startupFocus: cierto, extraAllowedContent: '(); {}', // Permite cualquier clase y cualquier estilo en línea allowedContent: true, // Desactivar el formato automático, eliminación de clases, etc. enterMode: editor de ck. ENTER_BR, uiColor: '#0000001a', // Color del editor en línea extraPlugins: 'justificar,colorbutton,panelbutton,fuente,sourcedialog,showblocks', altura: 5, barra de herramientas:[ [ "Formato", 'Fuente', 'TamañoFuente',"-", "Negrita", "Cursiva", "Strike", "Subrayado", "Subíndice", "Superíndice", "RemoverFormato", "-", "-", "JustificifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "TextColor", "BGColor", "-", "-", "-"] ] }, posición: 'izquierda',

Respuestas (4)

Abhisheknanda134446314 de enero de 2021

@vatte21 Para que tu componente sea editable. Tienes que extender el texto en tu componente de esta manera '''js editor. Components.addType('anyDiv', { modelo: { Predeterminados: { Tipo: 'texto', Rasgos:[ ... editor. Componentes.getType(type.id).model.prototype.defaults.traits, ... [] ] }, reRender() { this.view.render(); }, }, extiende: 'texto', isComponent: function (el) { if (el.tagName === 'anyDiv') return {type: 'anyDiv'}; } });

vatte2114 de enero de 2021

@Abhisheknanda1344463 ¡Gracias! Lo intentaré

abulka8 de febrero de 2021

@Abhisheknanda1344463 tu fragmento de código me da un error 'Uncaught ReferenceError: type is not defined' en la línea

... editor. Componentes.getType(type.id).model.prototype.defaults.traits,

¿Dónde se define el 'tipo'?

ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @vatte21.

¡Gran sugerencia sobre cómo cambiar el componente de formato gjs-ckeditor! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.

Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });


**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad

**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo

El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.

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.