GrapesJS Script Editor with Monaco Editor Integration
npm install grapesjs-script-monaco-editor
javascript
// That's it! Monaco Editor loads automatically
grapesjs.init({
container: '#gjs',
plugins: ['grapesjs-script-monaco-editor']
});
`
$3
`html
`
$3
`js
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-script-monaco-editor'],
pluginsOpts: {
'grapesjs-script-monaco-editor': {
// Monaco Editor loads automatically with these options
monacoOptions: {
theme: 'vs-dark', // 'vs', 'vs-dark', 'hc-black'
fontSize: 14,
wordWrap: 'on',
minimap: { enabled: false },
folding: true,
lineNumbers: 'on'
},
// Monaco Loader configuration (optional)
monacoLoaderOptions: {
version: '0.54.0' // Specify Monaco Editor version
}
}
}
});
`
$3
`css
body, html {
margin: 0;
height: 100%;
}
`
Summary
* Plugin name: grapesjs-script-monaco-editor
* Integrates Monaco Editor with automatic CDN loading
* Commands
* edit-script
Features
⨠Monaco Editor Integration: Full-featured code editor with syntax highlighting, IntelliSense, and error detection
šØ Multiple Themes: Support for VS Code themes (vs, vs-dark, hc-black)
š Smart Features: Code completion, bracket matching, folding, and find/replace
ā” Real-time Validation: JavaScript syntax validation with inline error highlighting
š± Responsive: Automatic layout adjustment and mobile-friendly design
š CDN Loading: Automatic Monaco Editor loading from CDN without manual setup
Options
| Option | Description | Default |
|-|-|-
| starter | Starter code | let el = this |
| toolbarIcon | Toolbar icon for opening script modal | |
| scriptTypesSupport | Component types to allow script editing | ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'] |
| toolbarBtnCustomScript | Options to pass when extending toolbar | {} |
| onRun | Logic to run if debug is successful | () => console.log('valid syntax') |
| onError | Logic to run if debug finds errors | err => console.log('error:',err) |
| modalTitle | Title for script modal | Script |
| monacoOptions | New: Monaco Editor specific options (see below) | { theme: 'vs-dark', language: 'javascript', ... } |
| monacoLoaderOptions | New: Monaco Editor loading configuration | { version: '0.54.0' } |
| buttonLabel | Label for the default save button | Save |
| commandAttachScript | Object to extend the default edit-script command | {} |
$3
| Option | Description | Default |
|-|-|-
| theme | Editor theme: 'vs', 'vs-dark', 'hc-black' | 'vs-dark' |
| fontSize | Font size in pixels | 14 |
| wordWrap | Word wrap: 'on', 'off', 'wordWrapColumn', 'bounded' | 'on' |
| minimap.enabled | Show/hide minimap | false |
| folding | Enable code folding | true |
| lineNumbers | Show line numbers: 'on', 'off', 'relative', 'interval' | 'on' |
| automaticLayout | Automatically adjust layout | true |
| scrollBeyondLastLine | Allow scrolling beyond last line | false |
| tabSize | Tab size | 2 |
$3
| Option | Description | Default |
|-|-|-
| version | Monaco Editor version to load from CDN | '0.54.0' |
| baseUrl | Custom base URL for Monaco Editor | https://unpkg.com/monaco-editor@{version}/min/vs |
Development
$3
`bash
npm run build
`
$3
`bash
npm start
`
$3
This plugin now uses grapesjs-cli` for building and development, following the same pattern as other modern GrapesJS plugins. Monaco Editor is loaded automatically from CDN, eliminating the need for webpack configuration or monaco-editor-webpack-plugin.