Cómo cambiar el dispositivo de un desplegable a un icono
Los ejemplos anteriores no me funcionaron en la versión 0.17.28 (supongo que la API ha cambiado). Esto funcionó:
Lee la respuesta completa abajo ↓Pregunta
Estoy intentando reemplazar el desplegable por un icono para los dispositivos siguiendo el ejemplo de la plantilla del boletín, pero no funciona.
Comandos personalizados
Desactiva los dispositivos por defecto, selecciona y crea uno nuevo
Sea pnm = editor. Paneles;
editor.getConfig().showDevices = false;
let devicePanel = pnm.addPanel({
ID: 'Dispositivos-C'
});
let deviceBtns = devicePanel.get('buttons');
devicePanel.get('buttons').add([{
id: 'deviceDesktop',
comando: 'establecer-dispositivo-escritorio',
NombreClase: 'fa fa-escritorio',
atributos: {título: 'Escritorio'},
activo: 1,
}, {
id: 'tabletDevice',
comando: 'establecer-dispositivo-tableta',
claseNombre: 'fa fa-tablet',
atributos: {título:'Tablet'},
}, {
id: 'deviceMobile',
comando: 'establecer-dispositivo-móvil',
claseNombre: 'fa fa-mobile',
atributos: {título: 'Móvil'},
}])
Respuestas (3)
Los ejemplos anteriores no me funcionaron en la versión 0.17.28 (supongo que la API ha cambiado). Esto funcionó:
editor.getConfig().showDevices = 0;
editor. Panels.addPanel({
ID: 'Dispositivos', Botones: [
{ id: "set-device-desktop", comando: function (e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1 },
{ id: "set-device-tablet", comando: function (e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
{ id: "set-device-mobile", comando: function (e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" }
]
});
@petervandeput https://github.com/artf/grapesjs/issues/1507#issuecomment-496280105 Después de uvapesjs init. '''/ Añadir iconos de dispositivo en la barra de paneles editor.getConfig().showDevices = 0; editor. Panels.addPanel({ id: "devices-c" }).get("buttons").add([ { id: "set-device-desktop", comando: function(e) { return e.setDevice("Escritorio") }, className: "fa fa-desktop", active: 1}, { id: "set-device-tablet", comando: function(e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" }, { id: "set-device-mobile", comando: function(e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" }, ]);
El panel debería volver a renderizarse de lo contrario El botón nuevo no aparecerá en el panel del dispositivo editor. Panels.render();
También deberías crear esos comandos https://github.com/artf/grapesjs-preset-newsletter/blob/04f1eb21c1ae45f8d2b2912323e79354d8e72f18/src/commands.js#L30-L44
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3663
Las propiedades de estilo predeterminadas no se vuelven a seleccionar al deslizar dispositivos
Hola, No se seleccionan las propiedades de estilo predeterminadas al cambiar de dispositivo. Pasos para reproducirse: Abrir [http://grapesj...
Issue #2312
[PREGUNTA] - Más control sobre los botones del panel, botones dinámicos del panel
Hola, Estoy intentando implementar varios botones dinámicos más para el panel, por ejemplo, un botón de guardado que, dependiendo de alguna...
Issue #974
[Pregunta] Eliminar los botones del Administrador de dispositivos y ViewCode
Estoy probando con el init por defecto para intentar eliminar los botones DeviceManager y ViewCode... ' var editor = grapesjs.init({ Offset...
Issue #2759
Cambiar el lenguaje de los edito
Hola Estoy intentando cambiar el idioma del editor, he añadido estas líneas en grapesjs.init: Pero esto no me funciona. Gracias de antemano
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.