{"id":22195167,"url":"https://github.com/tomaszpilch/strapi-code-editor-custom-field","last_synced_at":"2026-02-28T20:43:27.380Z","repository":{"id":65122511,"uuid":"582266052","full_name":"TomaszPilch/strapi-code-editor-custom-field","owner":"TomaszPilch","description":"Code editor plugin for strapi CMS. It uses the monaco editor (vscode).","archived":false,"fork":false,"pushed_at":"2023-08-09T13:12:48.000Z","size":1147,"stargazers_count":14,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-13T14:54:07.363Z","etag":null,"topics":["codeeditor","editor","monaco-editor","plugin","strapi"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomaszPilch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-26T09:16:57.000Z","updated_at":"2024-07-06T21:12:50.000Z","dependencies_parsed_at":"2023-02-19T07:15:39.882Z","dependency_job_id":null,"html_url":"https://github.com/TomaszPilch/strapi-code-editor-custom-field","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszPilch%2Fstrapi-code-editor-custom-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszPilch%2Fstrapi-code-editor-custom-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszPilch%2Fstrapi-code-editor-custom-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszPilch%2Fstrapi-code-editor-custom-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomaszPilch","download_url":"https://codeload.github.com/TomaszPilch/strapi-code-editor-custom-field/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227732254,"owners_count":17811372,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codeeditor","editor","monaco-editor","plugin","strapi"],"created_at":"2024-12-02T13:17:04.712Z","updated_at":"2026-02-28T20:43:27.324Z","avatar_url":"https://github.com/TomaszPilch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![strapi-code-editor.png](images/strapi-code-editor.png)\n\n# Strapi plugin strapi-code-editor-custom-field\n\nCode editor plugin for strapi CMS. It uses the monaco editor (vscode).\n\n## Compatibility\n\nThis plugin is compatible with **Strapi v5 from 1.0.0 version**.\n\nIf you are using Strapi v4, please use the 0.6.0 version.\n\n## Installation\n\nYou need install also monaco editor.\n\n```\nyarn add monaco-editor strapi-code-editor-custom-field\n```\n\n```\nnpm install monaco-editor strapi-code-editor-custom-field\n```\n\nStrapi 5 is now using vite for building the admin panel, so you need to install the vite plugin. \n\n```\nyarn add vite-plugin-monaco-editor -D\n```\n\n```\nnpm install --save-dev vite-plugin-monaco-editor\n```\n\nYou must add plugin to `config/plugins.js` file.\n\n```\n{\n  ...\n  'strapi-code-editor-custom-field': {\n    enabled: true,\n  },\n  ...\n}\n```\n\nYou need to update the `config/middlewares.ts` file. Replace `strapi::security` with\n\n```\n{\n  name: 'strapi::security',\n  config: {\n    contentSecurityPolicy: {\n      useDefaults: true,\n      directives: {\n        'script-src-elem': [\"'self'\", \"'unsafe-inline'\", 'cdn.jsdelivr.net'],\n        upgradeInsecureRequests: null,\n      },\n    },\n  },\n},\n```\n\nThis will add the `cdn.jsdelivr.net` to the `script-src-elem` directive for enabling content security policy.\n\nThe the last step is to create/update the vite config file.\n\n`/src/admin/vite.config.ts`\n\n```\nimport { mergeConfig } from 'vite'\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor'\n\nexport default (config) =\u003e {\n  // Important: always return the modified config\n  return mergeConfig(config, {\n    plugins: [monacoEditorPlugin({})],\n  })\n}\n```\n\nNow rebuild the admin panel.\n\n```\nnpm run build\n\nOR\n\nyarn build\n```\n\n### The \"old\" way with webpack (Strapi 4)\n\nAdd the `monaco-editor-webpack-plugin` to the `src/admin/webpack.config.js` file.\n\n```\nyarn add monaco-editor-webpack-plugin\n```\n\n```\nnpm install monaco-editor-webpack-plugin\n```\n\n\n```\n'use strict'\n\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')\n\nmodule.exports = (config) =\u003e {\n  config.plugins.push(new MonacoWebpackPlugin())\n\n  return config\n}\n\n```\n\n## Usage\n\nWhen you add the plugin you will see two new custom fields. One for javascript (and other languages) and one for json.\n\n![Two custom fields](images/img.png)\n\nThe editor then will show up in content-type add/edit page. It can be opened in fullscreen mode.\n\n### JSON editor\n\n![JSON editor](images/img2.png)\n\n### Javascript editor\n\n![Javascript editor](images/img3.png)\n\nYou can select the language in content-type builder options (if you select it, you can not change it in the editor instance).\n\n![Select language options](images/img4.png)\n\n\n## Under the hood\n\nEditor is using two different types for strapi field. When you select JSON editor it will be `json` type.\nWhen you select different language, it will be `text` type.\n\nFor `text` type you can select the language. If you select it, the select will not show up in the editor.\n\nIn case you don't select the language, you can pick it dynamically, but the language is prefixed before the value.\n\nLanguage selector:\n\n```javascript\nconst languageRegExp = new RegExp('__(.+)__;')\nconst languageFromValue = value.match(languageRegExp)[1]\n```\n\nRemove language from value:\n\n```javascript\nconst languageRegExp = new RegExp('__(.+)__;')\nconst valueWithoutLanguage = value.replace(languageRegExp, '')\n```\n\n## Issues\n\nIf you find any issues, please report\nthem [here](https://github.com/TomaszPilch/strapi-code-editor-custom-field/issues).\n\n## Development\n\nIf you want to contribute to this plugin, you can follow this steps:\n\n1. Clone this repository\n2. Install dependencies\n\n```\nyarn install\n```\n\n3. Link the plugin with yalc\n\n```\nyarn watch:link\n```\n\n4. Link the plugin to your strapi project (in the strapi project)\n\n```\nyalc add --link strapi-code-editor-custom-field \u0026\u0026 yarn install\n```\n\n5. Start the strapi project\n\n## Contributing\n\nFeel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome! ❤️\n\nMore info about [contributing](https://github.com/TomaszPilch/strapi-code-editor-custom-field/blob/main/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszpilch%2Fstrapi-code-editor-custom-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomaszpilch%2Fstrapi-code-editor-custom-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszpilch%2Fstrapi-code-editor-custom-field/lists"}