💬 Answered: No se puede usar el plugin: grapesjs-cus…

Pregunta

Estoy intentando añadir "custom code plugin" pero aparece un error en consola que "Plugin grapesjs-custom-code no encontrado"

Fragmento de códigoTEXT

- He creado una app de React y esto forma parte de un componente de alcance.  Ten en cuenta que esto funciona bien cuando añado el plugin desde una página html en lugar de un componente de react.
- Este problema es solo con "grapesjs-custom-code".  "gjs-preset-webpage" funciona bien

Puede que esté haciendo algo muy mal en mi componente de React o puede que haya un error. He estado intentando aclarar esto durante horas y necesito ayuda, por favor.

**A continuación está mi código de componente de React**

importar React, { Component } de 'react';
importar 'grapesjs/dist/css/grapes.min.css';
importar 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';
importar uvas de 'uvas';
importar 'grapesjs-custom-code';
importar 'grapesjs-preset-webpage';

export default class grapesjsPresetWebpageWithCustomComponent extends Component {
    Impide que ReactJS trabaje en los mismos elementos DOM que grapesjs. Esto es
    Había que incluir una biblioteca que no fuera de React bajo REACT. Ver referencia en
    https://medium.com/@garrettmac/reactjs-how-to-safely-manipulate-the-dom-when-reactjs-cant-the-right-way-8a20928e8a6
    shouldComponentUpdate() {
        return false;
    }

componentDidMount(){
        var editor = grapesjs.init({
            contenedor: '#gjs',
            
Plugins: ['GJS-preset-webpage', 'grapesjs-custom-code'],
            pluginsOpts: {
              'grapesjs-custom-code': {
                Opciones
              },
              'gjs-preset-webpage': {
                Opciones
                },
            }
        
});

}

render() {
        regreso (
            <div>
                Renderiza Grapesjs aquí*********
                <div id="gjs"></div>
            </div>
        )
    }
}

**Seguir código html funciona bien:**

<HTML>
    <HEAD>
      <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
      <enlace href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="hoja de estilo"/>
      <enlace href="../node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
        
</HEAD>

<CUERPO BGCOLOR="FFFFFF">
        <script src="https://unpkg.com/grapesjs"></script>
        <script src="../node_modules/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>
        <script src="../node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js"></script>
        <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>

<div id="gjs"></div>

<script type="text/javascript">
          
/***/

/***/
          var editor = grapesjs.init({
              contenedor: '#gjs',
              
Plugins: ['GJS-preset-webpage', 'grapesjs-custom-code'],
              pluginsOpts: {
                'grapesjs-custom-code': {
                  Opciones
                },
                'gjs-preset-webpage': {
                Opciones
                }
              }
          
});

/***/
        </script>
   
</BODY>
    
</HTML>

Respuestas (2)

artf• 3 de junio de 2019

Hola @megarg en realidad los nuevos plugins (los 'presets' aún no se han actualizado) usan un nuevo formato de exportación que hace que esta importación 'importar 'grapesjs-custom-code';' no sea utilizable. Puedes ver el ejemplo del uso de nuevos plugins aquí

megarg• 31 de mayo de 2019

Permítanme dar algunos detalles adicionales: -----Configuración----- $ nodo -v v10.15.3

$ npx nodo-sass -v node-sass 4.12.0 (Envoltorio) [JavaScript] libsass 3.5.4 (compilador Sass) [C/C++]

El sistema operativo es: Windows 10

Agradecería mucho cualquier consejo sobre por qué este plugin da este error.

No se puede usar el plugin: grapesjs-custom-code

Pregunta

Respuestas (2)

Preguntas y respuestas relacionadas

¿ERROR / Característica? Aplicar color de fondo al componente del cuerpo no forma parte del HTML exportado.

[BUG] Los tramos consecutivos muestran el espacio en blanco de forma diferente en el editor de uvas que en una ventana normal

ERROR: El plugin de Facebook no funciona en el js de uvas

La superexpresión debe ser nula o una función

Plugins de pago que cumplen con este problema

Explorar categorías de plugins