grapesjs-component-code-editor icon indicating copy to clipboard operation
grapesjs-component-code-editor copied to clipboard

Unable to append Component Code Editor to a container DIV

Open protozoo opened this issue 1 year ago • 2 comments

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

protozoo avatar Jan 22 '24 19:01 protozoo

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

flauc avatar May 27 '24 18:05 flauc

I finally went another route but thanks anyway!

protozoo avatar May 27 '24 20:05 protozoo