How can I get Uncompressed JS code for me to edit?
The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separate js files for your script components and tell the bundler to ignore those files.
Read full answer below ↓Question
Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to display the code in my JSEditor. And I found that the JS code is compressed. How can I get an Uncompressed code? I use editor.CodeManager.getCode(model, 'js') and it's also a compressed one. I read the source code and alse don't understand why CodeManager can display a Uncompressed code. 2、Other thing is : when I set JS code for example document.getElementById("wrapper").style.background = "red", and do the following: const htmlValue = this.htmlEditor.getValu...
Answers (4)
The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separate js files for your script components and tell the bundler t...
@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html: These code are all compressed. I want an uncompressed code like this in https://github.com/Ju99erna...
autoBeautify is an option passed to CodeMirror but in any case, it might beautify the code but it won't uncompress it as the code itself is stored like that in the component
Thanks for reporting this, @xinnai. Great question about How can I get Uncompressed JS code for me to edit?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3688
How to customize a component
I read this document https://grapesjs.com/docs/modules/Components.html#define-custom-component-type and tried to write the following code....
Issue #3631
How to load dynamic content in the final HTML file?
I looked everywhere, including the issues section and tried a few things. But really unsure how to load dynamic content in my components al...
Issue #3116
[HELP WANTED] How to load css that can viewed in code viewer and also exported while saving
Hi :wave: I am trying to load some CSS within the editor as part of the theme, I am able to link stylesheets as part of loading but the pro...
Issue #4455
'panel-devices' and 'panel-switcher' conflicting
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 103.0.5060.114 Reproducible...
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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.