Copiar y pegar componentes
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)
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.
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
¿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.
Issue #2462
[PREGUNTA] ¿Es posible guardar el encabezado, el pie de página y el cuerpo por separado para varias páginas?
Hola, Estoy intentando implementar varias páginas. Con varias páginas, me gustaría compartir el encabezado y el pie de página entre todas l...
Issue #2637
[Bug]: Modo de vista previa y desactivación automática de bordes de componentes
Hola de nuevo, :) Nuestro equipo empezó recientemente a personalizar el editor y a eliminar el preajuste de la página web, y puede que haya...
Issue #1683
¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?
Hola @artf, Espero que estés bien. Tengo dos preguntas sobre la suma de bloques dinámicos, 1) ¿Es posible renderizar el bloque con id dinám...
Issue #1853
Posición de arrastre y solta
Hola, Intento que el ratón esté en la posición cuando arrastro y suelto un bloque. ¿Es posible tener la posición X y la posición Y con este...
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.