💬 Answered: Why dashed lines do not show around comp…

Question

After long time I am trying again with GrapesJS.

I am following the Getting Started page and I am stuck to this step https://github.com/artf/grapesjs/wiki#components In fact, I am trying to "highlight" the components with a dashed line, pressing the "eye" button, as explained in the tutorial, but it does not work.

GrapesJS version is 0.14.17. I am using Mac OS X. I tested on both Safari and Chrome. The Web Demo works correctly.

Actually, when I press the "eye" button it changes the CSS of the components (as you can see in the attached image) but the modification is not visible in the canvas.

Here is the code of index.html:

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

  <title>My GrapesJS</title>


  <link type="text/css" rel="stylesheet" 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>

  <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
  <div id="gjs"></div>

  <script type="text/javascript">
    var editor = grapesjs.init({
      container: '#gjs',
      //components: '<div class="txt-red">Hello world!</div>',
      //style: '.txt-red{color: red}',
      height: '100%',
      storageManager: {
        type: 'none'
      },
      components: '<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>',
      panels: {
        defaults: [
          {
            id: 'commands',
            buttons: [
              {
                id: 'smile',
                className: 'fa fa-smile-o',
                attributes: {
                  title: 'Smile'
                },
                command: 'helloWorld'
              },
              {
                id        : 'vis',
                className : 'fa fa-eye',
                command   : 'sw-visibility',
                context   : 'some-random-context', // For grouping context of buttons in the same panel
                active    : true,
              }
            ]
          }
        ]
      },
      commands: {
        defaults: [
          {
            id: 'helloWorld',
            run: function(editor, senderBtn){
              alert('Hello world!');

              // Deactivate the button.
              senderBtn.set('active', false);
            },
            stop: function(editor, senderBtn){

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

main.css

body {
  margin: 0;
}

Answers (3)

ssabrewolf• June 10, 2018

To show the dashed lines you need to run in on editor load event editor.runCommand('sw-visibility');

endersaka• June 11, 2018

Thanks.

Maybe I don't remember well but I am almost sure that it is not explained in the documentation tutorial.

artf• June 14, 2018

I think it's just because you need to indicate the height for your document

html,
body {
	height: 100%;
}

Why dashed lines do not show around components?

Question

Answers (3)

Related Questions and Answers

[QUESTION] Change location of command panel

Script property using function don't work with blocks

QUESTION The name entered in the Traits for checkbox label is not getting updated to my html custom components.

local2 example for storage not working

Paid Plugins That Match This Issue

Related tutorials

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

Browse Plugin Categories