💬 Answered: ¿por qué las líneas discontinuas no se m…

Pregunta

Después de mucho tiempo estoy intentando de nuevo con GrapesJS.

Estoy siguiendo la página de Empezar y estoy atascado a este paso https://github.com/artf/grapesjs/wiki#components De hecho, estoy intentando "resaltar" los componentes con una línea discontinua, pulsando el botón "ojo", como se explica en el tutorial, pero no funciona.

La versión de GrapesJS es 0.14.17. Estoy usando Mac OS X. Probé tanto en Safari como en Chrome. La Web Demo funciona correctamente.

De hecho, cuando pulso el botón "eye" cambia el CSS de los componentes (como puedes ver en la imagen adjunta), pero la modificación no es visible en el lienzo.

Aquí está el código de index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">

<title>My GrapesJS</title>

<tipo de enlace="texto/css" rel="hoja de estilo" href="../grapesjs/dist/css/grapes.min.css">
  <script type="text/javascript" src="../grapesjs/dist/grapes.min.js"></script>

<script type="text/javascript" src="dist/js/bundle.js"></script>

<tipo de enlace="texto/css" rel="hoja de estilo" href="css/main.css">
</head>
<body>
  <div id="gjs"></div>

<script type="text/javascript">
    var editor = grapesjs.init({
      Contenedor: '#gjs',
      componentes: '<div class="txt-red">¡Hola mundo!</div>',
      Estilo: '.txt-rojo{color: rojo}',
      Altura: '100%',
      storageManager: {
        Tipo: 'Ninguno'
      },
      componentes: '<div style="width:300px; min-height:100px; margin: 0 auto"></div>' +
              '<div style="width:400px; min-height:100px; margin: 0 auto"></div>' +
              '<div style="width:500px; min-height:100px; margin: 0 auto"></div>',
      Paneles: {
        Valores por defecto: [
          {
            id: 'órdenes',
            botones: [
              {
                id: 'sonríe',
                claseNombre: 'fa fa-smile-o',
                atributos: {
                  título: 'Sonríe'
                },
                comando: 'holaWorld'
              },
              {
                id : 'vis',
                claseNombre: 'fa fa-eye',
                comando: 'SW-visibility',
                contexto : 'alguno-random-context', // Para agrupar el contexto de botones en el mismo panel
                Activo: Cierto,
              }
            ]
          }
        ]
      },
      comandos: {
        Valores por defecto: [
          {
            id: 'helloWorld',
            run: function(editor, senderBtn){
              alerta ('¡Hola mundo!');

Desactiva el botón.
              senderBtn.set('active', false);
            },
            stop: function(editor, senderBtn){

}
          }
        ]
      }
    });
  </script>
</body>
</html>

main.css

cuerpo {
  marje: 0;
}

! Disparo de Screeoff 2018-06-09 alle 19 37

Respuestas (3)

ssabrewolf• 10 de junio de 2018

Para mostrar las líneas discontinuas tienes que correr en editor y cargar eventos editor.runCommand('sw-visibility');

endersaka• 11 de junio de 2018

Gracias.

Quizá no lo recuerde bien, pero estoy casi seguro de que no está explicado en el tutorial de documentación.

artf• 14 de junio de 2018

Creo que es simplemente porque necesitas indicar la altura de tu documento '''css html, cuerpo { altura: 100%; }

¿por qué las líneas discontinuas no se muestran alrededor de los componentes?

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Eventos relacionados con los componentes de lectura

La propiedad de script usando función no funciona con bloques

[PREGUNTA] Cómo usar grapesjs con variables twig y actualizar datos añadidos en el CMS backend en la página construida sin editar en grapesjs

Cambia solo el cuerpo de los componentes, no el cuerpo de toda la página.

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins