grapesjs-custom-code
v1.0.2
Published
GrapesJS component for the embed of custom code
Downloads
20,423
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: '<span>Initial content</span>' ... }
| {}
|
| 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 <script>
| Check the source |
| 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 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
<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-custom-code.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['grapesjs-custom-code'],
pluginsOpts: {
'grapesjs-custom-code': {
// options
}
}
});
</script>
import GrapesJS from 'grapesjs';
import customCodePlugin from 'grapesjs-custom-code';
...
GrapesJS.init({
container : '#gjs',
...
plugins: [
customCodePlugin
],
pluginsOpts: {
[customCodePlugin]: {
// options
}
}
});
Development
Clone the repository
$ git clone https://github.com/GrapesJS/components-custom-code.git
$ cd grapesjs-custom-code
Install dependencies
$ npm i
Start the dev server
$ npm start
License
BSD 3-Clause