Colocar HTML no editable alrededor del envoltorio

He trasteado con el código y he hecho un pequeño parche que se adapta a mis necesidades. Una opción de configuración 'surround' te permite especificar un ID, que representa un elemento en el contenedor. Este subárbol DOM se extrae durante la inicialización principal, se almacena en la configuración del Editor y se recoge en el Canvas. El Lienzo se encarga entonces del renderizado del marco alrededor del envoltorio. Me interesa saber si alguien más tiene necesidades similares y si esto parece una buena solución.

De nuevo, si el caso de uso no está claro: supongamos que estoy usando Bootstrap y tengo un Tema con contenedor, barra de navegación, pie de página, etc. Luego tengo una plantilla de página que estoy editando con uvas. Quiero ver la plantilla dentro del HTML de su tema, pero debería poder editar solo la plantilla, y de forma similar 'Editor.getHtml()' debería devolver solo el HTML de la plantilla.

Genial@z1lk creo que incluso algo así funcionará '''js const canvas = editor. Lienzo; const surround = document.createElement('div'); surround.innerHTML = '<div>Algo de texto</div>'; canvas.getBody().appendChild(surround); surround.appendChild(canvas.getWrapperEl());

Cierro esto porque has resuelto tu caso

Usé una solución similar a la tuya para no tener que mantener cambios en la fuente de uvas. A veces la posición de las "herramientas" de los componentes está fuera de lugar, como si su desplazamiento vertical se calculara respecto al cuerpo y no al envoltorio. Aunque no puedo reproducirlo de forma fiable. ¡Gracias por vuestra ayuda @artf

edito: Creo que la colocación incorrecta de las herramientas se debió a que el "surround" se movió de fuera del lienzo hacia dentro. Ya no tengo el problema, pero puedo generar un problema similar seleccionando un componente para abrir las herramientas y luego abriendo el inspector del navegador (Firefox). Similar al #495