Integración de contenido i18n

@teawithfruit si esperas algo en tu página HTML guardada (fuera del editor GrapesJS), lo único que veo que puede hacer es: '''js script: function() { console.log('¡guion hecho!') }

Así que no sirve de nada, probablemente eres otra víctima de pensar que los scripts dentro del editor GrapesJS funcionarán en el código exportado (pero el HTML final no tiene nada que ver con el editor). Una explicación un poco más detallada [aquí](https://github.com/artf/grapesjs/issues/2181#issuecomment-520470116)

Hola @teawithfruit hay un par de problemas con tu código:

1. no tienes acceso a ''this'' como modelo dentro del componente ''script'': Component & Js docs
2. si tu caso de uso es controlar un atributo, no tienes que proporcionar un rasgo personalizado para ello; Simplemente define un rasgo normal y añade oyentes para los cambios sobre ese atributo:

modelo: {
            init() {
                this.on('change:attributes:data-i18n', this.handleTypeChange);
            },

handleTypeChange() {
                console.log('Entrada cambiada a: ', this.getAttributes()['data-i18n']);
            },
            Predeterminados: {
                atributos:{
                  'data-i18n':''
                },
                Rasgos: [
                    {
                        Nombre: 'data-i18n',
                        etiqueta: 'i18n!'
                    }
                ],
            //....

¡Salud!

¡Gracias por la respuesta tan útil! Este es mi bloque/componente actualizado. Ahora mismo solo tengo un problema más.

La función de script que he añadido al componente no se llama en la página html guardada. Si añado el bloque al lienzo en el editor, se llama a la función, pero no si guardo la página y la abro fuera de grapes.js. Si miro en el inspector de elementos, la etiqueta de script es visible pero no se llama.

¿Estoy haciendo algo mal?

'''js editor. DomComponents.addType('content', { isComponent: el => el.classList && el.classList.contains('content'), extiende: 'texto', modelo: { async init() { clave const = this.getAttributes()['data-i18n']

if(key && await Localize.exists(key) == true) { this.set('content', await Localize.get(key)) }

this.on('change:attributes:data-i18n', this.handleTypeChange) }, async handleTypeChange() { clave const = this.getAttributes()['data-i18n']

if(key && await Localize.exists(key) == true) { this.set('content', await Localize.get(key)) } else { Let Attributes = this.getAttributes()

if(attributes['data-i18n'] != indefinido) { eliminar atributos['data-i18n'] this.setAttributes(attributes) } } }, Predeterminados: { Rasgos: [ { Nombre: 'data-i18n', Etiqueta: 'i18N' } ], script: function() { console.log('¡guion hecho!') } } } })

editor. BlockManager.add('add-content', { etiqueta: 'Contenido', categoría: 'Elementos', Tipo: 'Contenido', content: '<div class="content">Insertar texto aquí...</div>` })

¡Gracias de nuevo por vuestra ayuda!