Code editor custom field
Code editor plugin for strapi CMS. It uses the monaco editor (vscode). You can use it for JSON, JavaScript and a lot more languages.
Strapi plugin strapi-code-editor-custom-field
Code editor plugin for strapi CMS. It uses the monaco editor (vscode).
Compatibility
This plugin is compatible with Strapi v5 from 1.0.0 version.
If you are using Strapi v4, please use the 0.6.0 version.
Installation
You need install also monaco editor.
1yarn add monaco-editor strapi-code-editor-custom-field
1npm install monaco-editor strapi-code-editor-custom-field
Strapi 5 is now using vite for building the admin panel, so you need to install the vite plugin.
1yarn add vite-plugin-monaco-editor -D
1npm install --save-dev vite-plugin-monaco-editor
You must add plugin to config/plugins.js
file.
1{
2 ...
3 'strapi-code-editor-custom-field': {
4 enabled: true,
5 },
6 ...
7}
You need to update the config/middlewares.ts
file. Replace strapi::security
with
1{
2 name: 'strapi::security',
3 config: {
4 contentSecurityPolicy: {
5 useDefaults: true,
6 directives: {
7 'script-src-elem': ["'self'", "'unsafe-inline'", 'cdn.jsdelivr.net'],
8 upgradeInsecureRequests: null,
9 },
10 },
11 },
12},
This will add the cdn.jsdelivr.net
to the script-src-elem
directive for enabling content security policy.
The the last step is to create/update the vite config file.
/src/admin/vite.config.ts
1import { mergeConfig } from 'vite'
2import monacoEditorPlugin from 'vite-plugin-monaco-editor'
3
4export default (config) => {
5 // Important: always return the modified config
6 return mergeConfig(config, {
7 plugins: [monacoEditorPlugin({})],
8 })
9}
Now rebuild the admin panel.
1npm run build
2
3OR
4
5yarn build
The "old" way with webpack (Strapi 4)
Add the monaco-editor-webpack-plugin
to the src/admin/webpack.config.js
file.
1yarn add monaco-editor-webpack-plugin
1npm install monaco-editor-webpack-plugin
1'use strict'
2
3const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
4
5module.exports = (config) => {
6 config.plugins.push(new MonacoWebpackPlugin())
7
8 return config
9}
Usage
When you add the plugin you will see two new custom fields. One for javascript (and other languages) and one for json.
The editor then will show up in content-type add/edit page. It can be opened in fullscreen mode.
JSON editor
Javascript editor
You can select the language in content-type builder options (if you select it, you can not change it in the editor instance).
Under the hood
Editor is using two different types for strapi field. When you select JSON editor it will be json
type.
When you select different language, it will be text
type.
For text
type you can select the language. If you select it, the select will not show up in the editor.
In case you don't select the language, you can pick it dynamically, but the language is prefixed before the value.
Language selector:
1const languageRegExp = new RegExp('__(.+)__;')
2const languageFromValue = value.match(languageRegExp)[1]
Remove language from value:
1const languageRegExp = new RegExp('__(.+)__;')
2const valueWithoutLanguage = value.replace(languageRegExp, '')
Issues
If you find any issues, please report them here.
Development
If you want to contribute to this plugin, you can follow this steps:
- Clone this repository
- Install dependencies
1yarn install
- Link the plugin with yalc
1yarn watch:link
- Link the plugin to your strapi project (in the strapi project)
1yalc add --link strapi-code-editor-custom-field && yarn install
- Start the strapi project
Contributing
Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome! ❤️
More info about contributing.
Install now
npm install strapi-code-editor-custom-field
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.