¿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 exportado, el marcado y el CSS se generan como se espera.

Sin embargo, dentro del editor, el bloque no deja ningún tipo de interfaz (aunque se arrastra correctamente según el html/css exportado).

Mi pregunta es: ¿Cuál es la forma correcta de que la salida del método 'toHtml' también se aplique al iframe del editor? Basándome en ejemplos similares que veo en otros sitios, parece que en todos los demás casos tiene que generarse a partir de la propiedad de bloque 'content'. Sin embargo, por razones que omito aquí, tengo que usar el formato de objeto para el 'contenido' para obtener la funcionalidad que proporcionan los componentes personalizados

Código:

'bloquear'

'''export default (editor, config = {}) => { const bm = editor. Jefe de bloque; bm.add('flex-columns', { etiqueta: '2 Columnas', Contenido: { Tipo: 'columnas' }, });

'componente'

export default (editor, config = {}) => { const domc = editor. DomComponents; const defaultType = domc.getType('default'); const defaultModel = defaultType.model; const defaultView = defaultType.view;

domc.addType('columns', { model: defaultType.model.extend({ defaults: Object.assign({}, defaultType.model.prototype.defaults, {

rowAttr: { clase: 'fila', },

colAttrMain: Object.assign({}, { 'data-gjs-arrastrable': 'row', }, { Clase: 'Célula-Principal' }),

colAttrAside: Object.assign({}, { 'data-gjs-arrastrable': 'row', }, { Clase: 'Célula-Principal' }),

styleRow: ' .row { pantalla: flex; Justificar-contenido: Inicio flexible; Alinear-ítems: estiramiento; Flex-wrap: sin wrap; relleno: 10px; } .row:primero-hijo { relleno a la derecha: 20px; } @media (ancho máximo: 768px) { .row { Envoltura flexible: envolvente; } } , styleClm: ' .cell-aside { Altura mínima: 75px; flexión: 1; } .cell-main { Altura mínima: 75px; flexión: 2; }, Plantilla: '', }),

attrsToString: función (attrs) { resultado const = [];

para (dejemos la clave en attrs) { Sea valor = atracción[clave]; const toParse = instancia de valor del Array || instancia de valor de Objeto; value = toParse ? JSON.stringify(value) : value; result.push('${key}=${toParse ? ''${value}'' : '"${value}"'}'); }

¿devolver resultado.longitud? ' ${result.join(' ')}' : ''; },

Initialize(O, opt) { defaultType.model.prototype.initialize.apply(esto, argumentos);

const attrsRow = this.attrsToString(this.attributes.rowAttr); const attrsCellAside = this.attrsToString(this.attributes.colAttrAside); const attrsCellMain = this.attrsToString(this.attributes.colAttrMain);

Estilos const = '<style> ${this.attributes.styleRow} ${this.attributes.styleClm} '</style>

this.attributes.template = '< div ${attrsRow}> <div ${attrsCellAside}><p>Apartado</p></div> <div ${attrsCellMain}><p>Main</p></div> ' +</div> estilos; },

toHTML: function () { si (!this.view || !this.view.el) { sea html = document.createElement('div'); const customRenderedEl = this.generateHtml(); html.appendChild(customRenderedEl); console.log('html es', html); return html.innerHTML; } },

generateHtml(el = this.view.el) { sea generadoSection = el; generatedSection.innerHTML = this.attributes.template; return generatedSection; }, }, { isComponent(el) { Resultado var = ''; if (el.tagName == 'DIV') { resultado = { Tipo: 'columnas' }; } resultado de retorno; } } ),

view: defaultType.view }) }

Dentro del HTML, esto es lo que se muestra: 

<div class="row"> <div class="cell"> <p>Columna </p> </div> <div class="cell"> <p>Columna </p> </div> </div> ``` , sin nada mostrado en el iframe del editor de uvas