Cómo editarlo en innerHTML
Encuentro que el problema no es la línea de puntos, el problema es innterHTML!! el innterHtml permite que mi componente no pueda editar. Quiero usar modal para mostrar la entrada y dejar que la vista cambie. Reiniciar Render View, el trabajo es perfecto. pero aún así no sé editar. Ahí está mi código (omitir el modelo,...
Lee la respuesta completa abajo ↓Pregunta
Hola, Quiero usar blockManager para crear un componente. Yo había corrido la línea de puntos, genial y lo veo.
this.editor.runCommand('sw-visibility');
Entonces, este es mi código de componente
blockManager.add('row', {
etiqueta: 'elige',
content:'<div class="chs-row" data-gjs-droppable=".row-cell" >
<div class="chs-column" data-gjs-custom-name="choose">
<div class="chs-row-cell num" data-gjs-draggable=".row">1</div>
<div class="chs-row-cell chs" data-gjs-draggable=".row">
<div class="chsBlock">A○</div>
<div class="chsBlock">B○</div>
<div class="chsBlock">C○</div>
<div class="chsBlock">D○</div>
</div>
</div>
</div>
<style>...</style>`
});
Está ejecutado perfectamente como esta imagen. Puedo editar texto y ver la línea punteada en la clase .chs-row-cell ! 1
hoy quiero añadir un tamaño redimensionable en este componente (solo este componente puede redimensionarse) así que cambio el código como↓
blockManager.add('row', {
etiqueta: 'elige',
contenido:{
Tipo: 'texto',
Content:'
<div class="chs-row" data-gjs-droppable=".row-cell" >
<div class="chs-column" data-gjs-custom-name="choose">
<div class="chs-row-cell num" data-gjs-draggable=".row">1</div>
<div class="chs-row-cell chs" data-gjs-draggable=".row">
<div class="chsBlock">A○</div>
<div class="chsBlock">B○</div>
<div class="chsBlock">C○</div>
<div class="chsBlock">D○</div>
</div>
</div>
</div>
<style>...</style>`,
redimensionable:{tc: 1,cl: 1,cr: 1,bc: 1,},
},
});
Resizeable funciona muy bien, pero los componentes tienen algún problema como Image, Intento añadir tipo: 'texto' para poder editar el texto pero no puedo ver ni usar la línea punteada en clase .chs-row-cell y .chsBlock
! 3
Quiero que este componente pueda hacer algo.
- Veo la línea de puntos
- bloque redimensionable seleccionado
- el texto puede editar
¿cómo puedo hacerlo? ¡Gracias!
Respuestas (3)
Encuentro que el problema no es la línea de puntos, el problema es innterHTML!! el innterHtml permite que mi componente no pueda editar.
Quiero usar modal para mostrar la entrada y dejar que la vista cambie. Reiniciar Render View, el trabajo es perfecto. pero aún así no sé editar.
Ahí está mi código (omitir el modelo, porque funcionan muy bien)
blockManager.add('row2', {
etiqueta: "row2",
Contenido: {
tipo:'fila2',
val3,
},
});
const dc = editor. DomComponents;
const defType = dc.getType('default');
const val3 = '<div class="aa" data-gjs-droppable=".bb" data-gjs-custom-name="AA">
<div class="bb" data-gjs-draggable=".aa">456</div>
<div class="bb" data-gjs-draggable=".aa">789</div>
';</div>
dc.addType('row2', {
model: defType.model.extend({
init() {
console.log('Gancho local: model.init');
},
}),
view:defType.view.extend({
render() {
defType.view.prototype.render.apply(this, arguments);
this.el.innerHTML = this.model.get('val3'); ¡Aquí!
devuelvo esto;
},
})
})
! 1584524335664 Como el GIF, no puedo editar 456 y 789 en Div
Tuve que intentar escribir:'text' y editable: true,
blockManager.add('row2', {
Contenido: {
Escribe:'texto',
},
});
o
dc.addType('row2', {
model: defType.model.extend({
valores predeterminados:{
Editable: Cierto,
atributos: {
Tipo: 'texto',
},
}
})
Pero no funcionan. :(
Si no uso innterHTML, ¿cómo puedo obtener el valor de val3 y mostrarlo? Gracias!!!
Hola, estoy encontrando la respuesta para editable en el #460
const textType = comps.getType('text');
Ahora, el componente puede editar texto. Pero aún así no muestra la línea de puntos. ! 1584587780421
Has publicado muchas preguntas sobre el mismo tema y deberías evitarlo. Crea una demo en directo con el problema. Por cierto, en tu publicación original cometiste un error '''js ... etiqueta: 'elige', contenido:{ Tipo: 'texto', 'content' en la definición de componentes es una cadena estática contenido: '<div class="chs-row" data-gjs-droppable=".row-cell" > Utiliza componentes en su lugar componentes: '<div class="chs-row" data-gjs-droppable=".row-cell" >
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1897
[Pregunta] vista vs código
Hola... ¡Y perdón por mi inglés! Antes que nada, enhorabuena por este marco. Estoy intentando usar GrapeJS para crear mi propio editor de W...
Issue #1831
[Pregunta] ¿Cómo ejecutar comandos para un componente de bloque?
Me gustaría hacer algo así. Así que, una vez que un usuario deja caer el componente de prueba en el lienzo, me gustaría abrir el modal de g...
Issue #2596
[PREGUNTA] Añadir html, css y js a Block Manager
[PREGUNTA] ¡Hola! Estoy recuperando códigos dinámicos html, css y js de la base de datos. ¿Cómo puedo crear bloques con esto? Actualmente,...
Issue #1471
[Pregunta] Gestor de bloques e imagen
¡Hola! Uso este código para añadir un nuevo bloque: blockManager.add("image", { etiqueta: 'Image', categoría: 'Básico', atributos: { clase:...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.