Insertar texto en un elemento de lienzo no se actualiza en el contenido HTML después de guardarlo.
Hola @jvillena. ¿Te importaría compartir algo de tu código, por favor? Estoy intentando hacer lo mismo pero no consigo entenderlo. Sigo añadiendo <span> etiquetas como "marcadores de posición" para insertar los valores de las variables, pero siempre se añaden al principio de la cadena y no en la posición del cursor. S...
Lee la respuesta completa abajo ↓Pregunta
Salud @artf, Tengo un escollo en medio de guardar el contenido HTML. Ahora mismo tenemos un diálogo modal emergente donde puedo seleccionar un texto especial e inyectarlo en el lienzo en el elemento seleccionado. El problema es que al guardar el contenido HTML, los cambios no se reflejan en él. Parece que tengo que actualizar o actualizar el modelo, pero no sé cómo actualizarlo.
Nota:
Solo guarda los datos después de insertarlos más de una vez. Pero el último cambio añadido no se guarda.
http://recordit.co/Mx1wggkdJT
`
var text = editorRTE.getSelected().view.$el[0].innerHTML;
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
valor = texto.splice(caret, 0, valor);
editorRTE.getSelected().view.$el[0].innerHTML = valor;
editorRTE.getSelected().view.$el[0].focus();'
¿Puedes ayudarme, por favor?Respuestas (3)
Hola @jvillena. ¿Te importaría compartir algo de tu código, por favor? Estoy intentando hacer lo mismo pero no consigo entenderlo. Sigo añadiendo <span> etiquetas como "marcadores de posición" para insertar los valores de las variables, pero siempre se añaden al principio de la cadena y no en la posición del cursor. Si lo hago de otra manera, el cursor sigue añadiendo texto a la etiqueta span en vez de detrás de ella. En resumen, no consigo averiguar cómo insertar el texto en la posición del cursor.
@artf Tienes razón, actualicé el código solo activándose al cambio de evento en el componente seleccionado y entonces funcionaba bien.
No entiendo cómo cambiaste para que se activara al cambiar el evento en la selección de componentes.
> El problema es que al guardar el contenido HTML los cambios no se reflejan en él.
Yo también tengo el mismo problema.
Esto es lo que intenté:
''' //Opción 1: Añadir opciones de marcador de posición/campo de fusión al editor de texto enriquecido
rte.add('mergefield', {
icono: '<b>{ # }</b>',
Nombre: 'Campo de Fusión',
atributos: { título: 'Campo de fusión'},
Resultado: RTE => {
ancla const = rte.selection().anchorNode;
const nextSibling = anchor & & anchor.nextSibling;
if (nextSibling && nextSibling.nodeName == 'span') {
rte.exec('desvincular');
} else {
var tag = '<span data-gjs-type="mergefield" data-gjs-editable="false" data-gjs-stylable="false" data-highlightable="1" readonly="true"> {{ merge-field }} </span>'; clase="gjs-mergefield"
rte.insertHTML(tag);
}
}
});
domComps.addType('mergefield', {
model: dModel.extend({
barra de herramientas: [{
Atributos: { Clase: 'FA FA-flechas' },
Orden: 'Tlb-move',
}],
defaults: Object.assign({}, dModel.prototype.defaults, {
'nombre personalizado': "Campo de fusión",
etiquetaNombre: 'span',
clase: 'campo de fusión',
Badgable: Cierto,
Resaltable: Cierto,
editable: false,
Droppable: falso,
Arrastrable: Cierto,
removible: cierto,
rasgos: [{
Etiqueta: "Mergefield",
tipo: 'select',
Nombre: 'Value',
Opciones: [
{ valor: 'usuario.nombre', nombre: "usuario.nombre" },
{ valor: 'usuario.apellido', nombre: "usuario.apellido" },
{ valor: 'company.name', nombre: "company.name" },
{ valor: 'company.business_regnr', nombre: "company.business_regnr1" },
{ valor: 'data.sistema', nombre: "data.sistema" },
]
}],
estilo: {
pantalla: 'bloque en línea',
Borde: '1px discontinuo #455699',
'alineación de texto': 'centro',
'color de fondo': '#BDCDF4',
'acolchado': '3px',
'radio de frontera': '5px',
'color': 'negro'
},
}),
}, {
barra de herramientas: [{
Atributos: { Clase: 'FA FA-flechas' },
Orden: 'Tlb-move',
}],
isComponent(el) {
if (el.tagName == 'SPAN' && el.dataset.mergefield == "1") {
return { type: 'mergefield' };
}
},
}),
view: dView.extend({
eventos: {
'click': función (e) { console.log("click"); },
'keydown': función (e) {
if (e.key == 'Retroceso') {
e.objetivo.padreNode.removeChild(e.target);
}
}
},
}),
});Acabo de resolverlo. Tuve que renderizar los DomComponents después de aplicar los cambios. La solución fue:
Primero aplicamos el nuevo texto en la selección
editor.getSelected().set('content', value.trim());
Para actualizar el DOM HTML necesitamos usar la función de renderizado.
editorRTE.DomComponents.render();
No, con este 'editorRTE.DomComponents.render()' estás activando el renderizado de todos los componentes, por favor lee con atención sobre Components, mirando cosas como esta 'editorRTE.getSelected().view.$el[0].innerHTML = value' Creo que simplemente no has entendido cómo funcionan realmente los componentes
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #509
Los span no se pueden editar como texto
Hola Artf, Tengo un problema al importar algunas plantillas HTML. Al principio no podía ver los textos en span. Pero después de ayudar al e...
Issue #1363
Problema al intentar inyectar nuevo contenido HTML en el Editor
Hola @artf, ahora estoy trabajando en hacer contenido en varios idiomas dentro del editor, pero me gustaría saber cómo puedo guardar en el...
Issue #1875
[PREGUNTA] Cambios de ID al importar HTML o pasar HTML en components prop en config.
Hola, He creado un componente y un bloque que puedo arrastrar y soltar en el lienzo. Mi problema es que algunos estilos dependen del ID. Sé...
Issue #1177
[PREGUNTA] Uso de clases idénticas múltiples
Hola @artf, Tengo una pregunta sobre el Style Manager. Supongamos que tenemos varios elementos con clases fila dentro de html, ¿existe algu...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.