{"id":21830783,"url":"https://github.com/nshenderov/strapi-plugin-ckeditor","last_synced_at":"2026-01-27T00:26:37.034Z","repository":{"id":37481432,"uuid":"486442331","full_name":"nshenderov/strapi-plugin-ckeditor","owner":"nshenderov","description":"Integrates CKEditor 5 into your Strapi project as a fully customizable custom field.","archived":false,"fork":false,"pushed_at":"2025-08-24T19:31:54.000Z","size":19144,"stargazers_count":141,"open_issues_count":4,"forks_count":72,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-12-07T05:06:25.679Z","etag":null,"topics":["ckeditor","ckeditor5","strapi","strapi-cms","strapi-plugin","wysiwyg","wysiwyg-html-editor"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@_sh/strapi-plugin-ckeditor","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/nshenderov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://boosty.to/nkshenderov/donate"]}},"created_at":"2022-04-28T04:14:04.000Z","updated_at":"2025-11-14T13:11:01.000Z","dependencies_parsed_at":"2024-11-05T22:26:06.276Z","dependency_job_id":"bcbcb158-1b0e-4d33-86a7-cd30b3c0c061","html_url":"https://github.com/nshenderov/strapi-plugin-ckeditor","commit_stats":{"total_commits":55,"total_committers":11,"mean_commits":5.0,"dds":0.4727272727272728,"last_synced_commit":"90a25f7dafc3663a334dba23175801d700c75e5e"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/nshenderov/strapi-plugin-ckeditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nshenderov%2Fstrapi-plugin-ckeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nshenderov%2Fstrapi-plugin-ckeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nshenderov%2Fstrapi-plugin-ckeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nshenderov%2Fstrapi-plugin-ckeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nshenderov","download_url":"https://codeload.github.com/nshenderov/strapi-plugin-ckeditor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nshenderov%2Fstrapi-plugin-ckeditor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28792997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ckeditor","ckeditor5","strapi","strapi-cms","strapi-plugin","wysiwyg","wysiwyg-html-editor"],"created_at":"2024-11-27T19:02:10.461Z","updated_at":"2026-01-27T00:26:37.023Z","avatar_url":"https://github.com/nshenderov.png","language":"TypeScript","funding_links":["https://boosty.to/nkshenderov/donate"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-head.png\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eStrapi ➕ CKEditor\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eIntegrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Community edition)\u003c/p\u003e\n\n## 👋 Get Started\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Configuration](#configuration)\n- [Contributing](#contributing)\n- [Migration](#migration)\n- [Requirements](#requirements)\n\n## \u003ca id=\"features\"\u003e\u003c/a\u003e✨ Features\n\n- **Extensive configuration**\n- **Media Library integration**\n- **Dark theme support**\n- **Fullscreen expansion**\n- **Responsive images support**\n- **Automatic UI translations**\n- **i18n support**\n- **Self-Hosted**\n\n\u003cp align=\"right\"\u003e\n    \u003ca href=\"https://boosty.to/nkshenderov/donate\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px; width: 217px;\" \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## \u003ca id=\"installation\"\u003e\u003c/a\u003e🔧 Installation\n\n**Strapi v5:**\n\nAdd the package to your Strapi application:\n\n```bash\nyarn add @_sh/strapi-plugin-ckeditor\n```\n\nThen, build the app:\n\n```bash\nyarn build\n```\n\n**Strapi v4:**\n\nVersion 3 of the plugin will remain available for Strapi v4 until March 2026.\nRefer to the [**v3 installation guide**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/README.md#installation)\nfor setup instructions.\n\n\u003e Note: Version 3 receives only essential bug fixes. The configuration process and available\n\u003e features in version 3 differ significantly from the latest plugin versions.\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003e✍️ Usage\n\nThe field can be found in the Content-Type Builder under the `CUSTOM` tab:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-usage-guide-2.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n**Presets**\n\nA preset is a set of settings that define the editor's features and appearance. You\ncan specify a dedicated preset for each field. The available presets can be customized through the\n[configuration](#configuration).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-usage-guide-3.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\nThe plugin provides two presets out of the box: `Default HTML editor` and `Default Markdown editor`,\neach has different output format: HTML and Markdown, respectively. Both presets include\nan extensive set of non-premium CKEditor plugins.\n\n\u003cdetails\u003e\n  \u003csummary\u003eDefault HTML editor:\u003c/summary\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-dark.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-light.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-html-light-full.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eDefault Markdown editor:\u003c/summary\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-mrk-dark.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/v5-def-mrk-light.png\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003c/details\u003e\n\n**Responsive images**\n\nThe plugin generates `srcset` attribute for inserted images if the image has any `formats` other than `thumbnail`.\n\n**UI language**: If you don't specify the UI language in the editor configuration, the plugin will\ndefault to the Strapi admin's preferred language. If no preference is set, English will be used as a fallback.\n\n**Content language**: i18n for the editor's content language can be enabled by checking the\n`Enable localization for this field` option in the Advanced Settings tab.\n\n\u003e 💡 It is important to use the content styles on the publishing side of your application. Otherwise, the content will look different in the editor and for your end users. [Follow the documentation](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/css.html#styling-the-published-content).\n\n\u003e To display content from external sources, such as images or videos, in your admin panel,\n\u003e you need to configure your `middlewares.js` file.\n\u003e [**Check the documentation for details.**](https://docs.strapi.io/dev-docs/configurations/middlewares#security)\n\n## \u003ca id=\"configuration\"\u003e\u003c/a\u003e⚙️ Configuration\n\nThe plugin configuration must be defined on the front-end.\n\nThe plugin provides a set of functions that allow you to modify the plugin's configuration:\n\n```ts\nsetPluginConfig(config);\ngetPluginPresets();\ngetPluginTheme();\n```\n\n**setPluginConfig**\n\nThe function, accepts a plugin configuration (`PluginConfig`) that can include an array of presets\nand a theme object:\n\n```ts\nimport { setPluginConfig } from '@_sh/strapi-plugin-ckeditor';\n\nfunction setPluginConfig(pluginConfig: {\n  presets: Preset[] | undefined;\n  theme: Theme | undefined;\n}): void;\n```\n\n**Key points:**\n\n- The function must be invoked before the admin panel's bootstrap lifecycle function. The general recommendation is to call it inside the admin panel's register lifecycle function.\n- Provided properties will overwrite the default configuration values.\n- The configuration becomes immutable after the first invocation, preventing further modifications.\n\n**Plugin configuration object** includes optional `presets` and `theme` properties:\n\n```ts\ntype PluginConfig = {\n  /**\n   * Presets are sets of settings that define the editor's features and appearance.\n   */\n  presets?: Preset[];\n  /**\n   * Styles applied globally to every editor instance.\n   */\n  theme?: Theme;\n};\n```\n\n`presets` is an array of objects of type `Preset`. Each preset includes the following properties:\n\n```ts\ntype Preset = {\n  /**\n   * Preset name, displayed in the schema.\n   */\n  name: string;\n  /**\n   * Preset description, displayed in the Content-Type Builder.\n   */\n  description: string;\n  /**\n   * CKEditor configuration object.\n   *\n   * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}\n   */\n  editorConfig: EditorConfig;\n  /**\n   * Additional styles applied to the editor instance after the theme styles.\n   */\n  styles?: EditorStyles;\n};\n```\n\n`theme` object defines a plugin CSS styles applied to every editor instance. It includes the\nfollowing properties:\n\n```ts\n/**\n * The `common` styles are applied first, followed by `light` or `dark` styles\n * according to user preferences, and finally `additional` styles.\n */\ntype Theme = {\n  /**\n   * Core styles.\n   */\n  common?: EditorStyles;\n  /**\n   * Styles applied in light mode.\n   */\n  light?: EditorStyles;\n  /**\n   * Styles applied in dark mode.\n   */\n  dark?: EditorStyles;\n  /**\n   * Additional styles that complement the theme.\n   */\n  additional?: EditorStyles;\n};\n```\n\n```ts\n/**\n * Represents styles that can be applied to an editor instance.\n * Can be a plain CSS string or an array of interpolations for dynamic styling.\n */\nexport type EditorStyles = string | Interpolation\u003cobject\u003e[];\n```\n\n**getPluginPresets**\n\n```ts\nfunction getPluginPresets(): {\n  [key: string]: Preset;\n};\n```\n\nReturns `presets` object.\n\n- Each property name must match the corresponding preset's name.\n- To extend or modify the options visible in the admin panel's content manager,\n  changes must be made before the admin panel's bootstrap lifecycle function.\n\n**getPluginTheme**\n\n```ts\nfunction getPluginTheme(): Theme;\n```\n\nReturns `theme` object.\n\n**Default presets and theme**\n\nTo simplify the process of defining a new preset, the plugin exports default presets and\na default theme, which can be used as a base in custom configurations:\n\n```ts\nimport {\n  defaultTheme,\n  defaultHtmlPreset,\n  defaultMarkdownPreset,\n} from '@_sh/strapi-plugin-ckeditor';\n```\n\n**Integration with Strapi's Media Library**\n\nTo integrate CKEditor with the Strapi's Media Library, the plugin provides two CKEditor plugins\nthat can be included in your presets without additional configuration:\n\n```ts\nimport { StrapiMediaLib, StrapiUploadAdapter } from '@_sh/strapi-plugin-ckeditor';\n```\n\n**Available type definitions**\n\nThe following type definitions are available for use:\n\n```ts\nimport type {\n  PluginConfig,\n  Preset,\n  EditorConfig,\n  Theme,\n  EditorStyles,\n} from '@_sh/strapi-plugin-ckeditor';\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eType definitions\u003c/summary\u003e\n\n```ts\n/**\n * Plugin configuration object.\n */\nexport type PluginConfig = {\n  /**\n   * Presets are sets of settings that define the editor's features and appearance.\n   */\n  presets?: Preset[];\n  /**\n   * Styles applied globally to every editor instance.\n   */\n  theme?: Theme;\n};\n```\n\n```ts\n/**\n * Preset is a set of settings that define the editor's features and appearance.\n */\nexport type Preset = {\n  /**\n   * Preset name, displayed in the schema.\n   */\n  name: string;\n  /**\n   * Preset description, displayed in the Content-Type Builder.\n   */\n  description: string;\n  /**\n   * Additional styles applied to the editor instance after the theme styles.\n   */\n  styles?: EditorStyles;\n  /**\n   * CKEditor configuration object.\n   *\n   * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}\n   */\n  editorConfig: EditorConfig;\n};\n```\n\n```ts\n/**\n * CKEditor configuration object.\n *\n * @see {@link https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html | CKEditor documentation}\n */\nexport type EditorConfig = CKE5EditorConfig;\n```\n\n```ts\n/**\n * Styles applied globally to every editor instance.\n *\n * @remarks\n *\n * The `common` styles are applied first, followed by `light` or `dark` styles\n * according to the preferences, and finally `additional` styles.\n */\nexport type Theme = {\n  /**\n   * Core styles.\n   */\n  common?: EditorStyles;\n  /**\n   * Styles applied in light mode.\n   */\n  light?: EditorStyles;\n  /**\n   * Styles applied in dark mode.\n   */\n  dark?: EditorStyles;\n  /**\n   * Additional styles that complement the theme.\n   */\n  additional?: EditorStyles;\n};\n```\n\n```ts\n/**\n * Represents styles that can be applied to an editor instance.\n * Can be a plain CSS string or an array of interpolations for dynamic styling.\n */\nexport type EditorStyles = string | Interpolation\u003cobject\u003e[];\n```\n\n\u003c/details\u003e\n\n### Configuration examples:\n\n\u003cdetails\u003e\n  \u003csummary\u003eSetting a new set of presets [JS]\u003c/summary\u003e\n\n```js\n// src/admin/app.js\n\nimport {\n  Bold,\n  Italic,\n  Essentials,\n  Heading,\n  Image,\n  ImageCaption,\n  ImageStyle,\n  ImageToolbar,\n  ImageUpload,\n  Link,\n  List,\n  Paragraph,\n} from 'ckeditor5';\n\nimport { setPluginConfig, StrapiMediaLib, StrapiUploadAdapter } from '@_sh/strapi-plugin-ckeditor';\n\nconst myCustomPreset = {\n  name: 'myCustomPreset',\n  description: 'myCustomPreset description',\n  editorConfig: {\n    licenseKey: 'GPL',\n    plugins: [\n      Bold,\n      Italic,\n      Essentials,\n      Heading,\n      Image,\n      ImageCaption,\n      ImageStyle,\n      ImageToolbar,\n      ImageUpload,\n      Link,\n      List,\n      Paragraph,\n      StrapiMediaLib,\n      StrapiUploadAdapter,\n    ],\n    toolbar: [\n      'heading',\n      '|',\n      'bold',\n      'italic',\n      'link',\n      'bulletedList',\n      'numberedList',\n      '|',\n      'strapiMediaLib',\n      '|',\n      'undo',\n      'redo',\n    ],\n  },\n};\n\nconst myConfig = {\n  /**\n   * Note: Since the provided `presets` include only `myCustomPreset`\n   * this configuration will overwrite default presets.\n   */\n  presets: [myCustomPreset],\n};\n\nexport default {\n  register() {\n    setPluginConfig(myConfig);\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eSetting a new set of presets [TS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.ts\n\nimport {\n  Bold,\n  Italic,\n  Essentials,\n  Heading,\n  Image,\n  ImageCaption,\n  ImageStyle,\n  ImageToolbar,\n  ImageUpload,\n  Link,\n  List,\n  Paragraph,\n} from 'ckeditor5';\n\nimport {\n  type PluginConfig,\n  type Preset,\n  setPluginConfig,\n  StrapiMediaLib,\n  StrapiUploadAdapter,\n} from '@_sh/strapi-plugin-ckeditor';\n\nconst myCustomPreset: Preset = {\n  name: 'myCustomPreset',\n  description: 'myCustomPreset description',\n  editorConfig: {\n    licenseKey: 'GPL',\n    plugins: [\n      Bold,\n      Italic,\n      Essentials,\n      Heading,\n      Image,\n      ImageCaption,\n      ImageStyle,\n      ImageToolbar,\n      ImageUpload,\n      Link,\n      List,\n      Paragraph,\n      StrapiMediaLib,\n      StrapiUploadAdapter,\n    ],\n    toolbar: [\n      'heading',\n      '|',\n      'bold',\n      'italic',\n      'link',\n      'bulletedList',\n      'numberedList',\n      '|',\n      'strapiMediaLib',\n      '|',\n      'undo',\n      'redo',\n    ],\n  },\n};\n\nconst myConfig: PluginConfig = {\n  /**\n   * Note that since provided `presets` includes only `myCustomPreset`\n   * this configuration will overwrite default presets.\n   */\n  presets: [myCustomPreset],\n};\n\nexport default {\n  register() {\n    setPluginConfig(myConfig);\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eDefault presets modification using setPluginConfig [TS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.ts\n\nimport { css } from 'styled-components';\n\nimport {\n  type PluginConfig,\n  type Preset,\n  setPluginConfig,\n  defaultHtmlPreset,\n  defaultMarkdownPreset,\n} from '@_sh/strapi-plugin-ckeditor';\n\nconst defaultHtml: Preset = {\n  ...defaultHtmlPreset,\n  description: 'Modified default HTML editor',\n  styles: `\n    .ck { \n      color: red; \n    }\n  `,\n  editorConfig: {\n    ...defaultHtmlPreset.editorConfig,\n    placeholder: 'Modified default HTML editor',\n    toolbar: [\n      'heading',\n      '|',\n      'bold',\n      'italic',\n      'link',\n      'bulletedList',\n      'numberedList',\n      '|',\n      'strapiMediaLib',\n      'insertTable',\n      '|',\n      'undo',\n      'redo',\n    ],\n  },\n};\n\nconst defaultMarkdown: Preset = {\n  ...defaultMarkdownPreset,\n  description: 'Modified default Markdown editor',\n  styles: css`\n    .ck {\n      --ck-editor-max-width: 1500px;\n      --ck-editor-min-height: 700px;\n      --ck-editor-max-height: 700px;\n    }\n\n    .ck.ck-editor__main {\n      border: 3px dashed ${({ theme }) =\u003e theme.colors.warning500};\n    }\n  `,\n};\n\nconst myConfig: PluginConfig = {\n  presets: [defaultHtml, defaultMarkdown],\n};\n\nexport default {\n  register() {\n    setPluginConfig(myConfig);\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eDefault presets modification using getPluginPresets [TS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.ts\n\nimport { css } from 'styled-components';\nimport { getPluginPresets } from '@_sh/strapi-plugin-ckeditor';\n\nexport default {\n  register() {\n    const presets = getPluginPresets();\n\n    presets.defaultHtml.styles = css`\n      .ck {\n        color: red;\n      }\n    `;\n\n    presets.defaultHtml.editorConfig = {\n      ...presets.defaultHtml.editorConfig,\n      placeholder: 'Modified default HTML editor',\n      toolbar: [\n        'heading',\n        '|',\n        'bold',\n        'italic',\n        'link',\n        'bulletedList',\n        'numberedList',\n        '|',\n        'strapiMediaLib',\n        'insertTable',\n        '|',\n        'undo',\n        'redo',\n      ],\n    };\n\n    presets.defaultMarkdown = {\n      ...presets.defaultMarkdown,\n      description: 'Modified default Markdown editor',\n      styles: css`\n        .ck {\n          --ck-editor-max-width: 1500px;\n          --ck-editor-min-height: 700px;\n          --ck-editor-max-height: 700px;\n        }\n\n        .ck.ck-editor__main {\n          border: 3px dashed ${({ theme }) =\u003e theme.colors.warning500};\n        }\n      `,\n    };\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eModifying theme using setPluginConfig [TS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.ts\n\nimport { css } from 'styled-components';\n\nimport { type PluginConfig, setPluginConfig, defaultTheme } from '@_sh/strapi-plugin-ckeditor';\n\nconst myConfig: PluginConfig = {\n  theme: {\n    ...defaultTheme,\n    additional: css`\n      .ck {\n        --ck-editor-max-width: 1500px;\n        --ck-editor-min-height: 700px;\n        --ck-editor-max-height: 700px;\n      }\n\n      .ck.ck-editor__main {\n        border: 3px dashed ${({ theme }) =\u003e theme.colors.warning500};\n      }\n    `,\n  },\n};\n\nexport default {\n  register() {\n    setPluginConfig(myConfig);\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eModifying theme using getPluginTheme [TS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.ts\n\nimport { css } from 'styled-components';\nimport { getPluginTheme } from '@_sh/strapi-plugin-ckeditor';\n\nexport default {\n  register() {\n    const theme = getPluginTheme();\n\n    theme.additional = css`\n      .ck {\n        --ck-editor-max-width: 1500px;\n        --ck-editor-min-height: 700px;\n        --ck-editor-max-height: 700px;\n      }\n\n      .ck.ck-editor__main {\n        border: 3px dashed ${({ theme }) =\u003e theme.colors.warning500};\n      }\n    `;\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eAdding Timestamp plugin [JS]\u003c/summary\u003e\n\n```ts\n// src/admin/app.js\n\nimport { Plugin, ButtonView } from 'ckeditor5';\n\nimport { setPluginConfig, defaultHtmlPreset } from '@_sh/strapi-plugin-ckeditor';\n\nclass Timestamp extends Plugin {\n  init() {\n    const editor = this.editor;\n    editor.ui.componentFactory.add('timestamp', () =\u003e {\n      const button = new ButtonView();\n      button.set({\n        label: 'timestamp',\n        withText: true,\n      });\n      button.on('execute', () =\u003e {\n        const now = new Date();\n        editor.model.change(writer =\u003e {\n          editor.model.insertContent(writer.createText(now.toString()));\n        });\n      });\n      return button;\n    });\n  }\n}\n\nexport default {\n  register() {\n    defaultHtmlPreset.editorConfig.plugins.push(Timestamp);\n    defaultHtmlPreset.editorConfig.toolbar.unshift('timestamp');\n    setPluginConfig({ presets: [defaultHtmlPreset] });\n  },\n};\n```\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n📂 Default HTML preset: [**admin/src/config/htmlPreset.ts**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/config/htmlPreset.ts)\n\n📂 Default Markdown preset: [**admin/src/config/markdownPreset.ts**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/config/markdownPreset.ts)\n\n📂 Default theme: [**admin/src/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/theme)\n\n\u003e 📌 It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html).\n\n## \u003ca id=\"contributing\"\u003e\u003c/a\u003e🛠 Contributing\n\nFeel free to [fork the repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo)\nand open a pull request, any help is appreciated.\n\nFollow these steps to set up a plugin development environment:\n\n1. Clone the repository.\n\n2. Read [the Strapi Plugin SDK documentation](https://docs.strapi.io/dev-docs/plugins/development/create-a-plugin#linking-the-plugin-to-your-project).\n\n3. Navigate to the cloned plugin folder and install dependencies, run:\n\n```bash\nyarn install\n```\n\n4. Link the plugin to your project:\n\n   - In the plugin folder, run:\n\n   ```bash\n   yarn watch:link\n   ```\n\n   - Open a new terminal, navigate to your Strapi project directory, and run:\n\n   ```bash\n   yarn dlx yalc add --link @_sh/strapi-plugin-ckeditor \u0026\u0026 yarn install\n   ```\n\n5. Rebuild the project and start the server:\n\n```bash\nyarn build\nyarn develop\n```\n\n## \u003ca id=\"migration\"\u003e\u003c/a\u003e✈️ Migration\n\nTo upgrade to the latest version, follow the dedicated [migration guide](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/MIGRATION.md)\nfor detailed instructions.\n\n## \u003ca id=\"requirements\"\u003e\u003c/a\u003e⚠️ Requirements\n\n**v5.x.x**\n\nStrapi **\u003e= 5.0.0**\n\nNode **\u003e= 20.0.0 \u003c= 24.x.x**\n\n---\n\n**v3.x.x**\n\nStrapi **\u003e= 4.13.0 \u003c 5.0.0**\n\nNode **\u003e= 18.0.0 \u003c= 20.x.x**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnshenderov%2Fstrapi-plugin-ckeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnshenderov%2Fstrapi-plugin-ckeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnshenderov%2Fstrapi-plugin-ckeditor/lists"}