Reemplazar el icono de dispositivos ASP.net / Javascript
Rápido y feo, llevo menos de 24 horas trabajando con esto ahora mismo, no quería rehacer totalmente los paneles así que hice esto:
Lee la respuesta completa abajo ↓Pregunta
Bonjour,
Quiero un icono de reemplazo para dispositivos seleccionados como en preset-webpage, pero no entiendo por qué este código no funciona y no aparece nada en el panel:
var panelDevices = editor. Panels.addPanel({ id: 'devices-c', visible: 'true' });
var btnresult = editor. Panels.addButton('devices-c', [{
id: 'establecer-dispositivo-escritorio',
comando: 'establecer-dispositivo-escritorio',
NombreClase: 'fa fa-escritorio',
activo: 1,
atributos: { título: 'Escritorio' }
}, {
id: 'establecer-dispositivo-tableta',
comando: 'establecer-dispositivo-tableta',
claseNombre: 'fa fa-tablet',
atributos: { título: 'Tablette' }
},
{
id: 'establecer-dispositivo-móvil',
comando: 'establecer-dispositivo-móvil',
claseNombre: 'fa fa-mobile',
atributos: { título: 'Mobile' }
},
]);
panelDevices.render();
editor. Commands.add('set-device-desktop', {
run: function (editor, sender) {
editor.setDevice('Escritorio');;
}
});
editor. Commands.add('set-device-tablet', {
run: function (editor, sender) {
editor.setDevice('Tablet');;
}
});
editor. Commands.add('set-device-mobile', {
run: function (editor, sender) {
editor.setDevice('Retrato móvil');
}
});
¿Puedes ayudarme?
Merci et bonne journée.
Respuestas (3)
Rápido y feo, llevo menos de 24 horas trabajando con esto ahora mismo, no quería rehacer totalmente los paneles así que hice esto:
Editor.Panels.addPanel({
id: 'Dispositivos-B',
visible: cierto,
botones: [{
id: 'establecer-dispositivo-escritorio',
comando: function (Editor, Model, Options) { Editor.setDevice('Desktop') },
etiqueta: '<SVG xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360degree); -webkit-transform: rotate(360grad); transform: rotate(360grade);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24"><path d="M21 15.998H3v-12h18m0-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2h-2h7a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2z" relleno="#ffffff"/></svg>',
Activo: Verdadero
}, {
id: 'establecer-dispositivo-tableta',
comando: function (Editor, Model, Options) { Editor.setDevice('Tablet') },
etiqueta: '<SVG XMlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360degree); -webkit-transform: rotate(360grad); transform: rotate(360grade);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 408 512"><path d="M352 0q22 0 37.5 15.5T405 53v406q0 22-15.5 37.5T352 512H53q-22 0-37.5-15.5T0 459V53q0-22 15.5-37.5T53 0h299zM202.5 491q13.5 0 23-9.5t9.5-23-9.5-22.5-23-9-22.5 9-9 22.5 9 23 22.5 9.5zM363 405V64H43v341h320z" fill="#ffffff"/></svg>'
}, {
id: 'establecer-dispositivo-móvil',
comando: function (Editor, Model, Options) { Editor.setDevice('Mobile portrait') },
etiqueta: '<SVG XMlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360degree); -webkit-transform: rotate(360degree); transform: rotate(360degree);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 768 1280"><path d="M464 1152q0-33-23.5-56.5T384 1072t-56.5 23.5T304 1152t23.5 56.5T384 1232t56.5-23.5T464 1152zm208-160V288q0-13-9.5-22.5T640 256H128q-13 0-22.5 9.5T96 288v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5T672 992zM480 144q0-16-16-16H304q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h512q52 0 90 38t38 90z" fill="#ffffff"/></svg>'
}]
});
Editor.on('load', function () {
Editor.Panels.removePanel('devices-c');
Editor.Panels.getButton('views', 'open-blocks').set('active', true);
});
@ogousseau evitar 'panelDevices.render()' y revisar tu panel en el inspector, probablemente esté justo detrás de otro
¡Super merci !!!!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1254
addType en domcomponent para condicionales HTML no funciona grapesjs versión 0.10.7
Hola Artur, Antes que nada, gracias por compartir un proyecto tan bueno :) Quiero contaros un problema que he experimentado. Comentaste aba...
Issue #1897
[Pregunta] vista vs código
Hola... ¡Y perdón por mi inglés! Antes que nada, enhorabuena por este marco. Estoy intentando usar GrapeJS para crear mi propio editor de W...
Issue #1212
Llamada Ajax, botón en un panel
Estoy intentando hacer una llamada ajax para un botón dentro del panel, este es mi código: '''js Botones para añadir dispositivos const pan...
Issue #1868
Cómo habilitar funcionalidades solo para componentes específicos de la imagen, no para todos
He activado el icono de fa fa-pencil en mis componentes de imagen, pero quiero que solo esté activado en componentes específicos de la imag...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.