Cómo detener la repetición de CSS
Actualiza tus grapesjs y la próxima vez, por favor, crea una demo en directo de tus problemas
Lee la respuesta completa abajo ↓Pregunta
Hola @artf aquí está mi código de Export-plantilla que hago editable
'''js define(function() { jugo const = require('juice'); return (opt = {}) => { let editor = opt.editor; deje codeViewer = editor & & editor. CodeManager.getViewer('CodeMirror').clone(); sea btnImp = document.createElement("button"); let container = document.createElement("div"); var cmdm = editor. Órdenes; Sea pfx = opt.pfx || ''; const juiceOpts = opt.juiceOpts || {}; Botón de importación de entrada btnImp.innerHTML = opt.modalBtnImport; btnImp.className = pfx + 'btn-prim' + pfx + 'btn-import'; btnImp.onclick = () => { let code = codeViewer.editor.getValue(); editor. DomComponents.getWrapper().set('content', ''); editor.setComponents (código); editor. Modal.close(); }; Visor de códigos de init codeViewer.set({ Nombre en clave: 'htmlmixed', tema: opt.codeViewerTheme, SoloLectura: 0 });
Establece el comando que podría usarse fuera cmdm.add(opt.cmdInlineHtml, { run(editor, sender, opts = {}) { const tmpl = editor.getHtml() + '<style>${editor.getCss()}</style>'; Devolución de líquido (TMPL, OPTS); } })
return { run(editor, sendero) { Sea MD = editor. modal; sea modalContent = md.getContentEl(); deje viewer = codeViewer.editor; md.setTitle(opt.modalTitleImport); Visualizador de código de init si aún no está instanciado if(!viewer){ let txtarea = document.createElement('textarea'); if(opt.modalLabelImport){ sea labelEl = document.createElement('div'); labelEl.className = pfx + 'import-label'; labelEl.innerHTML = opt.modalLabelImport; container.appendChild(etiquetaEl); } container.appendChild(txtarea); container.appendChild(btnImp); codeViewer.init(txtarea); viewer = codeViewer.editor; viewer.setOption ('lineWrapping', 1); } md.setContent(contenedor); const tmpl = editor.getHtml() + '<style>${editor.getCss()}</style>'; codeViewer.setContent(opt.inlineCss ? juice(tmpl, juiceOpts): tmpl); md.open(); viewer.refresh(); sender & & sender.set('active', 0); }, } }; });
Además, añado una media-query para mostrar el código en vista con esto
'editor.setComponents(mycss)'
! [captura de pantalla 2018-12-07 a las 1:52 07 pm](https://user-images.githubusercontent.com/20657737/49635878-0dfaaa00-fa27-11e8-999e-ac257467062e.png)
Cuando actualizo algo desde este botón funciona bien, pero lo estoy usando en mi app Rails incluyendo la versión minified.
Y cuando actualizaba algo en Rails, todo el CSS de media-query se repetía
¿Podrías sugerirme algo para manejar esto???
Gracias
Respuestas (3)
Actualiza tus grapesjs y la próxima vez, por favor, crea una demo en directo de tus problemas
¡Gracias @artf
Sí, definitivamente :)
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1748
Cómo evitar que los elementos arrastren dentro del editor
Hola @artf Lo estás haciendo muy bien con grapesjs y es extremadamente útil hacer que nuestra funcionalidad sea más fácil de usar. Gracias...
Issue #471
Colisión de estilos de biblioteca de terceros
Hola, Me gustaría incluir estilos de terceros y JavaScript en el editor. Se están añadiendo así: El problema que estoy experimentando con e...
Issue #1691
Cómo usar variables/funciones fuera del script
Hola @artf, ¿Cómo puedo acceder a las funciones de la variable que están fuera del script? Mi código es como, Estoy usando angular.js(Angul...
Issue #1631
¿Cómo mostrar CSS en el visor de código en el plugin de boletín?
Hola @artf Quiero mostrar mi CSS en lugar de ' protectedCss: '* { tamaño de caja: caja de borde; } cuerpo {margen: 0;}',' ¿Cómo puedo logra...
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.