How to stop css repeatition
Update your grapesjs and next time, please, create a live demo of your issues
Read full answer below ↓Question
hi @artf here is my code of Export-template i make it editable
define(function() {
const juice = require('juice');
return (opt = {}) => {
let editor = opt.editor;
let codeViewer = editor && editor.CodeManager.getViewer('CodeMirror').clone();
let btnImp = document.createElement("button");
let container = document.createElement("div");
var cmdm = editor.Commands;
let pfx = opt.pfx || '';
const juiceOpts = opt.juiceOpts || {};
// Init import button
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(code);
editor.Modal.close();
};
// Init code viewer
codeViewer.set({
codeName: 'htmlmixed',
theme: opt.codeViewerTheme,
readOnly: 0
});
// Set the command which could be used outside
cmdm.add(opt.cmdInlineHtml, {
run(editor, sender, opts = {}) {
const tmpl = editor.getHtml() + `<style>${editor.getCss()}</style>`;
return juice(tmpl, opts);
}
})
return {
run(editor, sender) {
let md = editor.Modal;
let modalContent = md.getContentEl();
let viewer = codeViewer.editor;
md.setTitle(opt.modalTitleImport);
// Init code viewer if not yet instantiated
if(!viewer){
let txtarea = document.createElement('textarea');
if(opt.modalLabelImport){
let labelEl = document.createElement('div');
labelEl.className = pfx + 'import-label';
labelEl.innerHTML = opt.modalLabelImport;
container.appendChild(labelEl);
}
container.appendChild(txtarea);
container.appendChild(btnImp);
codeViewer.init(txtarea);
viewer = codeViewer.editor;
viewer.setOption('lineWrapping', 1);
}
md.setContent(container);
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);
},
}
};
});
Also, i add a media-query to display in view code with this
editor.setComponents(mycss)

when i update something form this button it'll work fine but i am using it in my rails app by including minified version . and when update something in rails all media-query css got repeated Can you please suggest me something to handle this.???
Thanks
Answers (3)
Update your grapesjs and next time, please, create a live demo of your issues
Thanks @artf
yeah definitely :)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1836
How to add !important in all the generated apis
Hello @artf, While i am going to edit some html from editor with the help of css then i need to add !important into all the css which is ch...
Issue #382
Store the html and inline css in Editor.Store()
I am trying to store the html and inline css , can you please in how to pass it to editor.store() function. @artf
Issue #1691
How to use variable/function outside of the script
Hello @artf , How can i access the variable as well functions which is outside of the script. My code is like, I am using angular.js(Angula...
Issue #1631
how to display Css in Code viewer in newsletter plugin?
Hi @artf i want to display my css in replace of protectedCss: '* { box-sizing: border-box; } body {margin: 0;}', how can i achieve in newsl...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.