Celda de la tabla de control (añadir fila, columna...)
Hola, @cnaa97 No te preocupes, he añadido los comandos predeterminados en la barra de herramientas. Conseguí lo que quería. Gracias por ayudar. A continuación se muestra el código
Lee la respuesta completa abajo ↓Pregunta
Hola. Quiero desarrollar algunas funciones para controlar la tabla.
Hay muchas funciones para el otro editor de tablas como añadir columnas, filas, establecer color, restablecer ancho de columna para cada celda...
Solo tengo un plan de desarrollo para implementar abajo...
1. Añadir un botón en el gestor de bloques
'''js bm.add('table-block', { id: 'mesa', etiqueta: 'Mesa', categoría: 'Básico', atributos: { clase: 'fa fa-table' }, Contenido: ' <table class="table-striped table-bordered table-ressizeable"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> `, });
Esta es una mesa ficticia 3x3. cada celda tiene un componente de texto.
! [2018-12-05 17-11-35 2018-12-05 17_12_04](https://user-images.githubusercontent.com/7259107/49499505-95bea800-f8b1-11e8-8791-1f55d890e490.gif)
### 2. Personalizar barra de herramientas en la celda
{ Predeterminados: { ... Component.prototype.defaults, Tipo: 'Célula', etiquetaNombre: 'td', arrastrable: ['tr'], Barra de herramientas: [ { Atributos: { Clase: "FA FA-flechas" }, Orden: "tlb-move" }, { Atributos: { Clase: "FA FA-Flag" }, comando: "table-insert-row-above" } ] }, },
Añade un comando personalizado para insertar la fila superior.
### 3. Añadir un comando para insertar una fila
'''js
run(editor, sender, opts) {
var domComponents = editor. DomComponents;
domComponents.addComponent({
etiquetaNombre: 'mesa',
removible: cierto, // No se puede quitar
arrastrable: cierto, // No se puede mover
copiable: true, // Desactivar copiar/pegar
estilo: { fondo: 'rojo'},
atributos: { título: 'aquí' },
contenido: '<tr data-gjs-type="row" data-highlightable="1">
<td data-gjs-type="cell" data-highlightable="1" style="min-width: 100px;"><div data-gjs-type="text" data-highlightable="1"></div></td>
});
}
! 2018-12-05 17-14-10 2018-12-05 17_16_29
Pero el problema es...
- No puede detectar la ubicación de la célula. Código arriba, solo añade el lienzo abajo. No dentro de la celda.
- No puede añadir varios componentes a la celda. Solo añadía una profundidad. Pero hay que añadir más profundidad. (traducción > TD * 3)
¿Alguien tiene alguna buena idea? No encuentro un plugin genial.
Que tengas un buen día.
Respuestas (3)
Hola, @cnaa97 No te preocupes, he añadido los comandos predeterminados en la barra de herramientas. Conseguí lo que quería. Gracias por ayudar.
A continuación se muestra el código
bloque const Manager = this._editor. Jefe de bloque;
blockManager.add('table-block', {
id: 'mesa',
etiqueta: 'Mesa',
categoría: 'Básico',
atributos: { clase: 'fa fa-table' },
Contenido: '
<table class="table-bordered table-ressizeable">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
`,
});
const TOOLBAR_CELL = [
{
Atributos: { Clase: "FA FA-flechas" },
Orden: "tlb-move"
},
{
Atributos: { Clase: "FA FA-Flag" },
comando: "table-insert-row-above"
},
{
Atributos: {Clase: 'FA Fa-Clon'},
Orden: 'TLB-clon',
},
{
Atributos: {Clase: 'Fa Fa-Trash-O'},
Orden: 'tlb-delete',
}
];
const getCellToolbar = () => TOOLBAR_CELL;
componentes const = this._editor. DomComponents;
const text = components.getType('text');
components.addType('cell', {
modelo: text.model.extend({
valores predeterminados: Object.assign({}, text.model.prototype.defaults, {
Tipo: 'Célula',
etiquetaNombre: 'td',
arrastrable: ['tr'],
}),
},
{
isComponent(el) {
Sea resultado;
etiqueta const = el.etiquetaNombre;
if (tag == 'TD' || tag == 'TH') {
resultado = {
Tipo: 'Célula',
etiquetaNombre: etiqueta.toLowerCase()
};
}
resultado de retorno;
}
}),
Ver: text.view,
});
this._editor.on('component:selected', m => {
const compType = m.get('type');
switch (compType) {
Caso 'celda':
m.set('toolbar', getCellToolbar()); Establecer una barra de herramientas
}
});
this._editor. Commands.add('table-insert-row-above', editor => {
const selected = editor.getSelected();
si (selected.is('celda')) {
const rowComponent = selected.parent();
const rowIndex = rowComponent.collection.indexOf(rowComponent);
celdas const = rowComponent.components().length;
const rowContainer = rowComponent.parent();
rowContainer.components().add({
Tipo: 'Row',
Componentes: [... Array(cells).keys()].map(i => ({
Tipo: 'Célula',
contenido: 'Nueva Celda',
}))
}, { at: rowIndex });
}
});
- El 'contenido' dentro de la definición de componentes es para texto estático (por ejemplo, el contenido se usa para editar con el Editor de Texto Enriquecido), por lo que no puedes seleccionar su elemento una vez añadido, en su lugar deberías usar 'components: '<tr data-gjs-type="row" ...''
- Siempre puedes obtener el Componente seleccionado y usar su API, así que tu 'table-insert-row-above' podría ser: '''js editor. Commands.add('table-insert-row-above', editor => { const selected = editor.getSelected();
si (selected.is('celda')) { const rowComponent = selected.parent(); const rowIndex = rowComponent.collection.indexOf(rowComponent); celdas const = rowComponent.components().length; const rowContainer = rowComponent.parent();
rowContainer.components().add({ Tipo: 'Row', Componentes: [ ... Array(cells).keys() ].map(i => ({ Tipo: 'Célula', contenido: 'Nueva Celda', })) }, { at: rowIndex }); } });
Gracias por tu amable respuesta.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2012
[pregunta] cómo añadir un script para todos los widgets (como protectedCss)
Quiero añadir algunas funciones para todos los componentes accesibles. al inicializar el editor, hay una opción como protectedCss. ¿No hay...
Issue #599
Establecer la altura del dispositivo junto con el ancho del dispositivo
Hola, quiero añadir nuevos dispositivos tanto de ancho como de altura, ¿hay alguna forma de hacerlo? Otro problema es que cuando doy el anc...
Issue #684
Añadir columnas una al lado de la otra
¿Hay alguna forma de permitir arrastrar y soltar espacios de una sola columna para que estén uno al lado del otro dentro del editor? Tal y...
Issue #2278
[PREGUNTA]: Simplificar la eliminación de columnas/filas
Lo que necesito es simplificar la eliminación de elementos para acelerar la creación de páginas. Así que si dejo caer una columna y no hay...
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.