Package Exports

grapesjs-custom-code
grapesjs-custom-code/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grapesjs-custom-code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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