Issue #1632✓ ResueltoAbierto el 5 de diciembre de 2018por cnaa97Reacciones 5

Celda de la tabla de control (añadir fila, columna...)

Respuesta rápidapor shubhd473

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...

  1. No puede detectar la ubicación de la célula. Código arriba, solo añade el lienzo abajo. No dentro de la celda.
  2. 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)

👍 Muy útilshubhd477 de octubre de 2019

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 });
          }
        });
artf7 de diciembre de 2018
  1. 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" ...''
  2. 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 }); } });

cnaa9710 de diciembre de 2018

Gracias por tu amable respuesta.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.