Componente personalizado: cómo configurar el editable como verdadero
¡Gracias! He hecho algo similar, pero el tuyo no es tan complicado. He tenido otros eventos vinculados a onActive, así que no pude usarlo. Ahora los he despegado y haré lo que sugieres. Sobre el 'data-gjs-type': lo necesito porque el contenido que estoy creando se almacena y, al recargar, los componentes tienen que se...
Lee la respuesta completa abajo ↓Pregunta
Hola, he creado un tipo de componente personalizado, pero estoy teniendo algunos problemas para hacerlo editable. El componente es un "span" con tipo de componente "tag". solo contendrá texto, pero quiero que extienda el componente por defecto, no el texto. ¿Alguna idea de cómo puedo hacer que se pueda editar, aunque no sea "texto"?
'''js comps.addType('tag', {
modelo: { Predeterminados: { Tipo: 'Etiqueta', etiquetaNombre: 'span', Editable: Cierto, Droppable: falso, atributos: { 'data-gjs-type': 'tag', }, Textible: 1, rasgos: [{ tipo: 'select', etiqueta: 'Tag', Nombre: 'Selected-Tag', opciones: etiquetaTipos, }], },
isComponent: function(el) { Sea resultado; if (el.tagName == 'SPAN' && el.getAttribute("data-gjs-type") === "tag") { resultado = { Tipo: 'Etiqueta', }; } resultado de retorno; } }, ...
Respuestas (3)
¡Gracias! He hecho algo similar, pero el tuyo no es tan complicado. He tenido otros eventos vinculados a onActive, así que no pude usarlo. Ahora los he despegado y haré lo que sugieres. Sobre el 'data-gjs-type': lo necesito porque el contenido que estoy creando se almacena y, al recargar, los componentes tienen que ser reconocidos para que se carguen sus configuraciones/rasgos, especialmente este componente de tipo personalizado que he añadido. También existe la posibilidad de cambiar el contenido mediante rasgos, lo que complica demasiado las cosas :) P.D.: @artf ¡Has hecho un gran trabajo, con diferencia!
¿Cuál sería tu intención y objetivo al hacerlo editable si no tienes intención de ampliar el tipo de componente de texto? El tipo de componente de texto amplía el tipo predeterminado y añade capacidades de edición, como el editor de texto enriquecido. ¿Estás pensando en implementar tu propio RTE? API RichTextEditor. Si no, mira la fuente del tipo de componente de texto y ve qué partes no quieres y reimplementa aquellas que sí quieres en tu propio componente.
Preferiría no usar RTE, ya que no necesito ninguna de sus funcionalidades. Solo quiero poder editar el contenido y guardarlo (por editar me refiero a que hagas clic en el espacio, cambie el texto y lo guarde de nuevo). Además, el nuevo tipo tendrá rasgos específicos y se añadirá al lienzo tras una elección.
Si quisiera usar un componente de texto tipográfico, no haría la pregunta :)
Gracias por el consejo de investigar más detenidamente la parte de texto; lo haré.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1255
[PREGUNTA]: ¿Cómo configurar el contenido html del editor a partir de un componente personalizado?
Estoy teniendo problemas para que un bloque+componente personalizado muestre su plantilla HTML dentro del editor de uvas. Dentro del HTML e...
Issue #1959
[Pregunta] Editar innerHTML en un botón personalizado
Hola a todos, Estoy intentando cambiar el texto en un componente de botón, pero no consigo editarlo. He añadido este tipo: Incluí el paráme...
Issue #2454
Establecer el radio de la frontera con un valor 'em'.
Hola Estoy intentando usar grapesjs para un proyecto que necesita escalar a la pantalla. Tengo cosas como márgenes y fuentes que funcionan...
Issue #975
[Pregunta] Valores predeterminados para el campo de rasgos
He creado un componente con ciertos rasgos. No puedo asignar valores por defecto a los rasgos pasando valores. Aparece como indefinido para...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.