Skip to content
Snippets Groups Projects
Select Git revision
  • c94728feda23aaafce8260ffe159d85573a83c2e
  • master default protected
2 results

grapesjs-blocks-basic

  • Clone with SSH
  • Clone with HTTPS
  • Volker Schukai's avatar
    1180a55b
    History

    GrapesJS Basic Blocks

    This plugin contains some basic blocks for the GrapesJS editor

    Demo

    Summary

    • Plugin name: gjs-blocks-basic
    • Blocks: column1, column2, column3, column3-7, text, link, image, video, map

    Options

    Option Description Default
    blocks Which blocks to add ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map'] (all)
    category Category name Basic
    flexGrid Make use of flexbox for the grid false
    stylePrefix Classes prefix gjs-
    addBasicStyle Use basic CSS for blocks true
    labelColumn1 1 Column label 1 Column
    labelColumn2 2 Columns label 2 Columns
    labelColumn3 3 Columns label 3 Columns
    labelColumn37 3/7 Columns label 2 Columns 3/7
    labelText Text label Text
    labelLink Link label Link
    labelImage Image label Image
    labelVideo Video label Video
    labelMap Map label Map

    Download

    • npm i grapesjs-blocks-basic

    Usage

    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
    <script src="https://unpkg.com/grapesjs"></script>
    <script src="path/to/grapesjs-blocks-basic.min.js"></script>
    
    <div id="gjs"></div>
    
    <script type="text/javascript">
      var editor = grapesjs.init({
          fromElement: 1,
          container : '#gjs',
          plugins: ['gjs-blocks-basic'],
          pluginsOpts: {
            'gjs-blocks-basic': {/* ...options */}
          }
      });
    </script>

    Development

    Clone the repository

    $ git clone https://github.com/artf/grapesjs-blocks-basic.git
    $ cd grapesjs-blocks-basic

    Install it

    $ npm i

    The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

    $ npm i grapesjs --no-save

    Start the dev server

    $ npm start

    License

    BSD 3-Clause