Skip to content

propulse-lab/grapesjs-click

 
 

Repository files navigation

GrapesJS click plugin (no more drag-and-drop)

Installation

npm install grapesjs grapesjs-click

Usage

JavaScript

import grapesjs from 'grapesjs'
import grapesjsClick from 'grapesjs-click'

const pluginOptions = {
  hasAutoDropped: boolean // optional, default to true
}
const editor = grapesjs.init({
  // ...
  plugins: [
    grapesjsClick
  ],
  pluginOpts: {
    [grapesjsClick]: pluginOptions
  }
  // ...
})

TypeScript

import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsClick from 'grapesjs-click'

const pluginOptions = {
  hasAutoDropped: boolean // default to true
}
const editor = grapesjs.init({
  // ...
  plugins: [
    usePlugin(grapesjsClick, pluginOptions)
  ]
  // ...
})

Commands

Grab a block

const commandOptions = {
  id: string // required, grapesjs block identifier
}
editor.run('click:grab-block', commandOptions)

Drop a block

const commandOptions = {
  id: string // optional, grapesjs block identifier
}
editor.run('click:drop-block', commandOptions)

Grab a component

const commandOptions = {
  id: string // required, grapesjs component identifier
}
editor.run('click:grab-component', commandOptions)

Drop a component

const commandOptions = {
  id: string // optional, grapesjs component identifier
}
editor.run('click:drop-component', commandOptions)

Options

{
  // Drop the grabbed block or component when a component is selected in the canvas.
  hasAutoDropped: boolean // optional, default to true
}

Question? Idea?

If you have a question about how grapesjs-click works or an idea to improve it, the Discussions tab in GitHub is the place to be.

However, if you get an error, you should open an issue.

License

Distributed under the BSD 3-Clause License. See LICENSE for more information.

Contact

Benjamin Grand @bgrand_ch

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 76.7%
  • Vue 13.3%
  • HTML 7.6%
  • JavaScript 2.4%