[PREGUNTA] Restablecer rasgo al editar el contenido de un componente personalizado

Question

Hola,

Tengo un componente personalizado cuyo contenido se puede cambiar cambiando las opciones de selección de rasgos, pero también puede editarse de forma similar al tipo de componente de texto cuando ya está renderizado dentro del lienzo. ¿Hay alguna forma sencilla de reiniciar el atributo relacionado con los rasgos al editar un componente?

'''js modelo: { Predeterminados: { Tipo: 'Etiqueta', etiquetaNombre: 'span', Droppable: 0, editable: 1, Textible: 1, rasgos: [{ tipo: 'select', etiqueta: 'Tipo personalizado', nombre: 'customType', opciones: customTypeOptions, }], }, toHTML() { return this.get('content'); },

Vista: { eventos: { enfoque: 'resetTrait', }, reseTrait() { } }

inaLar · Accepted Answer

@artf, respecto a la opción "Select" no pude conectar el cambio en el contenido y que funcionara al cambiar el rasgo en un solo flujo y también cambiarlo manualmente editando su texto/contenido. El cambio manual no sincronizaba el rasgo, pero conseguí que funcionara. Un componente de texto personalizado funcionó perfectamente.

En cuanto a la documentación de la última versión, la estoy leyendo ahora mismo y parece muy buena, pero no la vi cuando publiqué la pregunta.

Puede que solo me pase a mí, pero aprendo con el ejemplo, así que más ejemplos y casos de uso siempre serán un punto a favor.

Entiendo que el producto es abierto y agradezco tu esfuerzo. Espero adquirir más conocimientos y poder contribuir con algo en un futuro próximo.

Salud.

zgover · Answer

Podrías adjuntar un oyente de eventos al content prop del componente, luego en la callback recuperar el rasgo o cambiar el valor prop del trait, véase el ejemplo más abajo tomado de docs

'''javascript Actualicemos las 'opciones' de nuestro rasgo 'tipo', definidas en el componente de entrada componente const = editor.getSelected(); component.getTrait('type').set('options', [ { id: 'opt1', nombre: 'Nueva opción 1'}, { id: 'opt2', nombre: 'Nueva opción 2'}, ]); o con múltiples valores component.getTrait('type').set({ etiqueta: 'Mi tipo', opciones: [...], });

inaLar · Answer

Gracias, Zachary1748, pero no puedo usar eso en mi caso. Quizá no lo expliqué bien. Tengo un componente hecho a medida. El contenido de los componentes puede cambiarse de 3 maneras:

Cuando se arrastra y se suelta en el lienzo (tienes una ventana emergente con opciones)
Desde la configuración (también eligiendo entre opciones)
Editando su texto dentro del lienzo

En fin, creo que he encontrado una solución: creé un tipo de dato personalizado y vinculé los eventos a su cambio también, no solo a los cambios de contenido. Pero todavía lo estoy probando.

Restablecer rasgo al editar el contenido de un componente personalizado

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Los Nodos de Texto interfieren al cambiar el contenido en un elemento

[PREGUNTA] - Vincular texto/html interno (como div, p, h1) a Trait

[Pregunta] Editar innerHTML en un botón personalizado

Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables

Plugins de pago que cumplen con este problema

Explorar categorías de plugins