How to integrate the code editor?

[marcus-at-localhost]

Hi, I'm trying to integrate the code editor into a standard GrapesJS instance.

https://jsfiddle.net/t21m0do3/

I show the button on the right panel and the code editor opens there. But, it doesn't fit, and leaves the panel and the rest of the GrapesJS editor messed up. I guess it's up to me how to integrate the editor and deal with the CSS and resetting the panel etc., but I'm stuck there (since I just started with the GrapesJS framework and try to understand what's possible).

My question is, could you setup a working example to start from there? Would it be even possible to open the editor in a modal (since I can't find a way to choose a target)? Thank you so much in advance.

[russ1985]

Thank you for reaching out. The plugin was created by a colleague that is no longer working on the project. We will take a look and see if we can help as soon as we can.

Thanks,

Russell

On Feb 14, 2019, at 4:12 AM, marcus-at-localhorst notifications@github.com wrote:

Hi, I'm trying to integrate the code editor into a standard GrapesJS instance.

https://jsfiddle.net/t21m0do3/ https://jsfiddle.net/t21m0do3/ I show the button on the right panel and the code editor opens there. But, it doesn't fit, and leaves the panel and the rest of the GrapesJS editor messed up. I guess it's up to me how to integrate the editor and deal with the CSS and resetting the panel etc., but I'm stuck there (since I just started with the GrapesJS framework and try to understand what's possible).

My question is, could you setup a working example to start from there? Would it be even possible to open the editor in a modal (since I can't find a way to choose a target)? Thank you so much in advance.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/portablemind/grapesjs-code-editor/issues/3, or mute the thread https://github.com/notifications/unsubscribe-auth/AAce5f91YSUkf4Tm5I57q8VnOHEcE4ikks5vNSh1gaJpZM4a7JJo.

[kernelhacks]

Hey Hi, I have the same issue, with these plugin.

[kernelhacks]

Hi I work around some temporary solution, these are what I did for to see all the menus.

First Load the grapejs.mim.css from your local directory end edit this class in the same file

.gjs-pn-views-container { height: 100%; padding: 42px 0 0; right: 0; width: 15%; overflow: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

Just add these line "z-index: 1;" at the end, your code should look like the one below

.gjs-pn-views-container { height: 100%; padding: 42px 0 0; right: 0; width: 15%; overflow: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); z-index: 1; }

Then look for this class

.gjs-pn-panel { display: inline-block; position: absolute; box-sizing: border-box; text-align: center; padding: 5px; z-index: 3; }

and comment the "text-align: center" attribute, it's should look like the one bellow

.gjs-pn-panel { display: inline-block; position: absolute; box-sizing: border-box; / text-align: center; / padding: 5px; z-index: 3; }

and to conclude, edit grapesjs-code-editor.min.js line 6702

the code look like this { key: "showCodePanel", value: function() { this.isShowing = !0, this.updateEditorContents(), this.codePanel.style.display = "flex", setTimeout(this.refreshEditors.bind(this), 320), this.findWithinEditor(".gjs-pn-views-container").get(0).style.width = "35%", this.findWithinEditor(".gjs-cv-canvas").get(0).style.width = "65%" } }

Just change the "flex" word, with "block"

I hope these can help you, this plugin is a good tool

[russ1985]

Hey Guys,

I just merged in a pull request that removes a static width that was being set when closing the code editor which was making the east panel not resize correctly.

There is also an option for inlinecss that will take the full width of the view to give you more area to work.

codeCommandFactory({ inlineCss: true }),

I updated the jsfiddle here

https://jsfiddle.net/rnjsxhaz/

[marcus-at-localhost]

Thank you so much!