https://github.com/grapesjs/components-custom-code
GrapesJS component for the embed of custom code
https://github.com/grapesjs/components-custom-code
Last synced: about 1 year ago
JSON representation
GrapesJS component for the embed of custom code
- Host: GitHub
- URL: https://github.com/grapesjs/components-custom-code
- Owner: GrapesJS
- License: bsd-3-clause
- Created: 2018-07-26T21:37:00.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T18:32:02.000Z (over 2 years ago)
- Last Synced: 2025-03-30T20:11:56.117Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://grapesjs.com/demo.html
- Size: 336 KB
- Stars: 79
- Watchers: 4
- Forks: 45
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrapesJS Custom Code
This plugin adds the possibility to embed custom code
> Requires GrapesJS v0.14.25 or higher
## Summary
* Plugin name: `grapesjs-custom-code`
* Components
* `custom-code`
* Blocks
* `custom-code`
* Commands
* `custom-code:open-modal`
## Options
|Option|Description|Default|
|-|-|-
| `blockCustomCode` | Object to extend the default custom code block, eg. `{ label: 'Custom Code', category: 'Extra', ... }`. Pass a falsy value to avoid adding the block | `{}` |
| `propsCustomCode` | Object to extend the default custom code properties, eg. `{ name: 'Custom Code', components: 'Initial content' ... }` | `{}` |
| `toolbarBtnCustomCode` | Object to extend the default component's toolbar button for the code, eg. `{ label: '>', attributes: { title: 'Open custom code' } }`. Pass a falsy value to avoid adding the button | `{}` |
| `placeholderScript` | Content to show when the custom code contains `` | [Check the source](https://github.com/GrapesJS/components-custom-code/blob/master/src/index.ts) |
| `modalTitle` | Title for the modal | `Insert your code` |
| `codeViewOptions` | Additional options for the code viewer, eg. `{ theme: 'hopscotch', readOnly: 0 }` | `{}` |
| `buttonLabel` | Label for the default save button | `Save` |
| `commandCustomCode` | Object to extend the default custom code command, eg. `{ getPreContent: () => '<div>Paste here</div>' }` [Check the source](https://github.com/GrapesJS/components-custom-code/blob/master/src/commands.ts) to see all available methods | `{}` |
## Download
* CDN
* `https://unpkg.com/grapesjs-custom-code`
* NPM
* `npm i grapesjs-custom-code`
* GIT
* `git clone https://github.com/GrapesJS/components-custom-code.git`
## Usage
```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs">
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['grapesjs-custom-code'],
pluginsOpts: {
'grapesjs-custom-code': {
// options
}
}
});
```
```jsx
import GrapesJS from 'grapesjs';
import customCodePlugin from 'grapesjs-custom-code';
...
GrapesJS.init({
container : '#gjs',
...
plugins: [
customCodePlugin
],
pluginsOpts: {
[customCodePlugin]: {
// options
}
}
});
```
## Development
Clone the repository
```sh
$ git clone https://github.com/GrapesJS/components-custom-code.git
$ cd grapesjs-custom-code
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
## License
BSD 3-Clause