Socket
Socket
Sign inDemoInstall

grapesjs-custom-code

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

grapesjs-custom-code

GrapesJS component for the embed of custom code


Version published
Weekly downloads
4.4K
decreased by-4.84%
Maintainers
1
Weekly downloads
 
Created
Source

GrapesJS Custom Code

This plugin adds the possibility to embed custom code

GrapesJS 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

OptionDescriptionDefault
blockCustomCodeObject to extend the default custom code block, eg. { label: 'Custom Code', category: 'Extra', ... }. Pass a falsy value to avoid adding the block{}
propsCustomCodeObject to extend the default custom code properties, eg. { name: 'Custom Code', components: '<span>Initial content</span>' ... }{}
toolbarBtnCustomCodeObject 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{}
placeholderScriptContent to show when the custom code contains <script>Check the source
modalTitleTitle for the modalInsert your code
codeViewOptionsAdditional options for the code viewer, eg. { theme: 'hopscotch', readOnly: 0 }{}
buttonLabelLabel for the default save buttonSave
commandCustomCodeObject 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

Keywords

FAQs

Package last updated on 07 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc