Ju99ernaut / grapesjs-component-code-editor

Code editor for grapesjs
MIT License
64 stars 21 forks source link

Unable to append Component Code Editor to a container DIV #55

Open protozoo opened 8 months ago

protozoo commented 8 months ago

Hi there,

I'm trying to integrate the component-code-editor plugin in my grapes-based app but I can't get it to be displayed. This is my relevant js code:

// (...)
    plugins: ['grapesjs-component-code-editor'],
    pluginsOpts: {
        'grapesjs-component-code-editor': { appendTo:'#componentCodeEditor' }, 
// (...)

The intended container target is just a div in my page html:

<div id="componentCodeEditor"></div>

And I'm loading the plugin like this:

<link href="https://unpkg.com/grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs-component-code-editor"></script>

I don't have any other additional code related to integrating/using this plugin besides this. Am I missing anything? Maybe I need to call some function or command to get it displayed?

Thank you

flauc commented 3 months ago

@protozoo I had the same problem, for some reason changing this

// (...)
    plugins: ['grapesjs-component-code-editor'],
    pluginsOpts: {
        'grapesjs-component-code-editor': { appendTo:'#componentCodeEditor' }, 
// (...)

to this

// (...)
    plugins: [
        editor => componentCodeEditor(
          editor,
          {
            appendTo: '#componentCodeEditor'
          }
   ]
// (...)

fixed it for me.

protozoo commented 3 months ago

I finally went another route but thanks anyway!