How can I get Uncompressed JS code for me to edit?

Question

Code SnippetTEXT

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.getValue();
      const cssValue = this.cssEditor.getValue();
      const jsValue = this.jsEditor.getValue();
      
      let newHtml = htmlValue + "<script>" + jsValue + "<" + "/script>";
      
      this.editor.setComponents(newHtml);
      this.editor.setStyle(cssValue);`

The html and css code works fine but the js code don't work... Can you help?

Answers (3)

artf• March 21, 20210 reactions

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.

xinnai• March 25, 20210 reactions

@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:

Code SnippetTEXT

![1444126130](https://user-images.githubusercontent.com/23135336/112428513-3b91cb80-8d76-11eb-91de-ce51a8500203.jpg)

These code are all compressed. I want an uncompressed code like this in [https://github.com/Ju99ernaut/grapesjs-script-editor](url)
![1811563111](https://user-images.githubusercontent.com/23135336/112428360-008f9800-8d76-11eb-9abb-b8451649b390.jpg)

For this purpose I read the source code in `grapesjs-script-editor` to learn how to get uncompressed js code. But I only found this code bellow:
`
getCodeViewer() {
            const { editor } = this;

            if (!this.codeViewer) {
                this.codeViewer = editor.CodeManager.createViewer({
                    codeName: 'javascript',
                    theme: 'hopscotch',
                    readOnly: 0,
                    autoBeautify: 1,
                    ...codeViewOptions,
                });
            }

            return this.codeViewer;
        },
`

I notice that maybe `autoBeautify` make this work but I can't find this property in the source code in `grapesjs`. So I am confused how `CodeManager` get the uncompressed js code?

artf• April 7, 20210 reactions

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

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

How can I get Uncompressed JS code for me to edit?

Question

Answers (3)

Related Questions and Answers

Compressed getJs issue

How to get the external plugin CSS, JS and HTML through GrapesJS export feature?

css issue in getCss

[Question] Losing the component information on saving the code from Code Editor

Paid Plugins That Match This Issue

Browse Plugin Categories