Issue #1855✓ ResueltoAbierto el 4 de marzo de 2019por ssabrewolfReacciones 9

Copiar y pegar componentes

Respuesta rápidapor japo326

Esta es nuestra implementación de usar localStorage por si alguien necesita la solución. La API del portapapeles habría sido una gran solución para navegadores, pero aún no se usa ampliamente.

Lee la respuesta completa abajo ↓

Pregunta

Hola equipo de Grapesjs He visto que el copiar y pegar normal funciona siempre que esté hecho en la misma página. ¿Es posible implementar un copiar y pegar entre dos páginas diferentes con el editor abierto

Gracias de antemano

Respuestas (3)

👍 Muy útiljapo3223 de septiembre de 2019

Esta es nuestra implementación de usar localStorage por si alguien necesita la solución.

      función newCopy(selected) {
        window.localStorage.setItem('grapesjs_clipboard', JSON.stringify(selected));
      }
      function newPaste(selected) {
        var components = JSON.parse(window.localStorage.getItem('grapesjs_clipboard'));

si (componentes) {
          if (selected & selected.attributes.type !== 'wrapper') {
            var index = selected.index();
            Invierte el orden para que el último elemento se añada primero y se vaya empujando hacia abajo a medida que se añaden los demás.
            components.reverse();
            var currentSelection = selected.collection;
            components.forEach(comp => {
              PENDIENTE: Añadir comprobación de validez de la pasta.
              var added = currentSelection.add(comp, {at: index + 1});
              editor.trigger('component:paste', añadido);
            });
            selected.emitUpdate();
          } else {
            No se seleccionan componentes, así que simplemente inserta al final.
            editor.addComponents(components);
          }
        }
      }

comandos const = editor. Órdenes;
      commands.add('core:copy', editor => {
        const seleccionado = [... editor.getSelectedAll()];
        Filtra los componentes que no se pueden copiar.
        var filteredSelected = selected.filter(item => item.attributes.copyable == true);
        if (filteredSelected.length) {
          newCopy(filteredSelected);
        }
      });
      commands.add('core:paste', editor => {
        const selected = editor.getSelected();
        newPaste (seleccionado);
      });

La API del portapapeles habría sido una gran solución para navegadores, pero aún no se usa ampliamente.

lexoyo23 de mayo de 2022

No lo probé, solo leí el código

No activas el evento de pegar al pegar el cuerpo

Además, el CSS se añade en una etiqueta de estilo después de cada pasta... Debe haber una mejor manera de manejar los estilos, lo miraré pronto

artf10 de marzo de 2019

¿Es posible implementar una copia y pega entre dos páginas diferentes con el editor abierto

Bueno, si para 2 páginas diferentes te refieres a dos pestañas distintas, no lo creo. Obviamente, estás tratando con diferentes instancias del editor, así que tienes que encontrar la manera de que se comuniquen entre sí (por ejemplo, localStorage si estáis en el mismo dominio).

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.