Issue #1638💬 RespondidoAbierto el 7 de diciembre de 2018por Abhisheknanda1344463Reacciones 1

Cómo detener la repetición de CSS

Respuesta rápidapor artf1

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)

artf7 de diciembre de 2018

Actualiza tus grapesjs y la próxima vez, por favor, crea una demo en directo de tus problemas

Abhisheknanda134446310 de diciembre de 2018

¡Gracias @artf
Sí, definitivamente :)

lock[bot]10 de diciembre de 2019

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.

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.