RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Ju99ernaut/grapesjs-blockly below:

Ju99ernaut/grapesjs-blockly: Blockly intergration for grapesjs

Attach code generated from google blockly to a component

Requires Blockly and @blockly/block-plus-minus plugin recommended. Try adding after all components

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

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

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-blockly'],
});

body, html {
  margin: 0;
  height: 100%;
}

Plugin name: grapesjs-blockly
Commands
- blockly-script

Option Description Default blocklyOptions Options to pass to blockly on init, toolbox defines blockly toolbox, workspaceOptions defines blockly injection options, toolbox will overwrite the default and toolboxPush will add to default {toolbox: '', toolboxPush: '', workspaceOptions: {}} starter Canvas starter blocks, defaulf setting generates let el = this <xml xmlns=...>...</xml> toolbarIcon Toolbar icon for opening blockly modal <i class="fa fa-puzzle-piece"></i> blocklyTypesSupport Component types to allow script editing from blockly, avoid components with predefined scripts or scripts set elsewhere ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'] toolbarBtnBlockly Options to pass when extending toolbar {} onRun Logic to run if debug is successful () => console.log('valid syntax') onError Logic to run if debug finds errors err => console.log('error:',err) modalTitle Title for blockly modal Blockly codeViewOptions Additional options for the code viewer {} buttonLabel Label for the default save button save commandBlocklyScript Object to extend the default blockly-script command {}

CDN
- https://unpkg.com/grapesjs-blockly
NPM
- npm i grapesjs-blockly
GIT
- git clone https://github.com/Ju99ernaut/grapesjs-blockly.git

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/blockly"></script>
<script src="path/to/grapesjs-blockly.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-blockly'],
      pluginsOpts: {
        'grapesjs-blockly': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-blockly';
import Blockly from 'blockly';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-blockly.git
$ cd grapesjs-blockly

Install dependencies

Start the dev server

Build the source

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4