+
+This package provides a custom field for Strapi that lets you use and configure CKEditor in no time.
+
+Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.
+
+This is an official plugin, provided to you by the [CKEditor team](https://ckeditor.com) 👋
+
+## ✨ Features
+
+* **No code field customization:** customize each field for its specific usage scenario – let it be short note, blog article, or a document.
+* **Predefined editor presets:** a couple predefined editor presets (sets of CKEditor 5 plugins and their configuration) to choose from.
+* **Custom max length validation:** Twitter-like length validation with visual indicators, based on the number of characters in the text, not the HTML string.
+* **Dark mode support:** because you like it.
+* **Media library integration:** inserting images directly from Strapi's media library.
+* **More features coming soon:** upload adapter integration, more granular editor toolbar and plugins configuration, and more.
+
+## 🔧 Installation
+
+Inside your Strapi app, add the package:
+
+With `npm`:
+
+```bash
+npm install @ckeditor/strapi-plugin-ckeditor
+```
+
+With `yarn`:
+
+```bash
+yarn add @ckeditor/strapi-plugin-ckeditor
+```
+
+Then run build:
+
+```bash
+npm run build
+```
+
+or:
+
+```bash
+yarn build
+```
+
+## 🛠 Contributing
+
+This section covers the way how to configure your environment if you want to contribute to this package.
+
+### Setting up the environment
+
+In order to start making changes in the plugin you first need to install Strapi infrastructure on top of the plugin repository.
+
+```
+npx create-strapi-app --quickstart strapi
+cd strapi
+```
+
+By default Strapi does not create plugins folder so we need to create it.
+
+```
+mkdir -p src/plugins
+```
+
+Now we should clone this repository so we can work on it.
+
+```
+git clone git@github.com:ckeditor/strapi-plugin-ckeditor.git src/plugins/strapi-plugin-ckeditor
+```
+
+Let's add an entry inside `./package.json` file so, we won't need to use `yarn` inside plugin itself.
+
+```
+"workspaces": ["./src/plugins/strapi-plugin-ckeditor"]
+```
+
+Install dependencies:
+
+```
+yarn install
+```
+
+Now we need to register plugin so strapi can use it. In order to do that we need
+to create (if not already created) `./config/plugins.js` file and add entry to it.
+
+```
+module.exports = ({ env }) => ({
+ ckeditor: {
+ enabled: true,
+ resolve: "./src/plugins/strapi-plugin-ckeditor"
+ },
+});
+```
+
+Rebuild the project and start the server:
+
+```
+yarn build
+yarn develop
+```
diff --git a/src/plugins/strapi-plugin-ckeditor/admin/src/CKEditorIcon.js b/src/plugins/strapi-plugin-ckeditor/admin/src/CKEditorIcon.js
new file mode 100644
index 0000000..85a1e7e
--- /dev/null
+++ b/src/plugins/strapi-plugin-ckeditor/admin/src/CKEditorIcon.js
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const SvgIcon = ( props ) => (
+
+);
+
+export default SvgIcon;
+
diff --git a/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/Configurator.js b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/Configurator.js
new file mode 100644
index 0000000..f152ace
--- /dev/null
+++ b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/Configurator.js
@@ -0,0 +1,389 @@
+import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
+
+import ckeditor5AlignmentDll from "@ckeditor/ckeditor5-alignment/build/alignment.js";
+import ckeditor5AutoformatDll from "@ckeditor/ckeditor5-autoformat/build/autoformat.js";
+import ckeditor5BasicStylesDll from "@ckeditor/ckeditor5-basic-styles/build/basic-styles.js";
+import ckeditor5BlockQuoteDll from "@ckeditor/ckeditor5-block-quote/build/block-quote.js";
+import ckeditor5CodeBlockDll from "@ckeditor/ckeditor5-code-block/build/code-block.js";
+import ckeditor5EssentialsDll from "@ckeditor/ckeditor5-essentials/build/essentials.js";
+import ckeditor5FontDll from "@ckeditor/ckeditor5-font/build/font.js";
+import ckeditor5HeadingDll from "@ckeditor/ckeditor5-heading/build/heading.js";
+import ckeditor5HighlightDll from '@ckeditor/ckeditor5-highlight/build/highlight.js';
+import ckeditor5HtmlEmbedDll from "@ckeditor/ckeditor5-html-embed/build/html-embed.js";
+import ckeditor5HorizontalLineDll from "@ckeditor/ckeditor5-horizontal-line/build/horizontal-line.js";
+import ckeditor5MarkdownDll from '@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm';
+import ckeditor5MediaEmbedDll from "@ckeditor/ckeditor5-media-embed/build/media-embed.js";
+import ckeditor5ImageDll from "@ckeditor/ckeditor5-image/build/image.js";
+import ckeditor5IndentDll from "@ckeditor/ckeditor5-indent/build/indent.js";
+import ckeditor5LinkDll from "@ckeditor/ckeditor5-link/build/link.js";
+import ckeditor5ListDll from "@ckeditor/ckeditor5-list/build/list.js";
+import ckeditor5PasteFromOfficeDll from "@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js";
+import ckeditor5FindAndReplaceDll from "@ckeditor/ckeditor5-find-and-replace/build/find-and-replace.js";
+import ckeditor5RemoveFormatDll from "@ckeditor/ckeditor5-remove-format/build/remove-format.js";
+import ckeditor5SpecialCharactersDll from "@ckeditor/ckeditor5-special-characters/build/special-characters.js";
+import ckeditor5TableDll from "@ckeditor/ckeditor5-table/build/table.js";
+import ckeditor5WordCountDll from "@ckeditor/ckeditor5-word-count/build/word-count.js";
+import ckeditor5MaximumLengthDll from "@reinmar/ckeditor5-maximum-length/build/maximum-length.js";
+import { StrapiMediaLib } from "./plugins/StrapiMediaLib";
+
+const CKEDITOR_BASE_CONFIG_FOR_PRESETS = {
+ light: {
+ plugins: [
+ window.CKEditor5.autoformat.Autoformat,
+ window.CKEditor5.basicStyles.Bold,
+ window.CKEditor5.basicStyles.Italic,
+ window.CKEditor5.essentials.Essentials,
+ window.CKEditor5.heading.Heading,
+ window.CKEditor5.image.Image,
+ window.CKEditor5.image.ImageCaption,
+ window.CKEditor5.image.ImageStyle,
+ window.CKEditor5.image.ImageToolbar,
+ window.CKEditor5.image.ImageUpload,
+ window.CKEditor5.indent.Indent,
+ window.CKEditor5.link.Link,
+ window.CKEditor5.list.List,
+ window.CKEditor5.paragraph.Paragraph,
+ window.CKEditor5.pasteFromOffice.PasteFromOffice,
+ window.CKEditor5.table.Table,
+ window.CKEditor5.table.TableToolbar,
+ window.CKEditor5.table.TableColumnResize,
+ window.CKEditor5.table.TableCaption,
+ window.CKEditor5.wordCount.WordCount,
+ window.CKEditor5.removeFormat.RemoveFormat,
+ StrapiMediaLib
+ ],
+ toolbar: [
+ 'undo', 'redo',
+ '|',
+ 'heading',
+ '|',
+ 'bold', 'italic',
+ '|',
+ 'link', 'strapiMediaLib', 'insertTable',
+ '|',
+ 'bulletedList', 'numberedList',
+ '|',
+ 'removeFormat'
+ ],
+ heading: {
+ options: [
+ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+ { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+ { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+ { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+ ]
+ },
+ image: {
+ toolbar: [
+ 'imageStyle:inline',
+ 'imageStyle:block',
+ 'imageStyle:side',
+ '|',
+ 'toggleImageCaption',
+ 'imageTextAlternative'
+ ]
+ },
+ table: {
+ contentToolbar: [
+ 'tableColumn',
+ 'tableRow',
+ 'mergeTableCells',
+ '|',
+ 'toggleTableCaption'
+ ]
+ },
+ link: {
+ addTargetToExternalLinks: true,
+ }
+ },
+
+ standard: {
+ plugins: [
+ window.CKEditor5.autoformat.Autoformat,
+ window.CKEditor5.basicStyles.Bold,
+ window.CKEditor5.basicStyles.Italic,
+ window.CKEditor5.blockQuote.BlockQuote,
+ window.CKEditor5.codeBlock.CodeBlock,
+ window.CKEditor5.essentials.Essentials,
+ window.CKEditor5.heading.Heading,
+ window.CKEditor5.image.Image,
+ window.CKEditor5.image.ImageCaption,
+ window.CKEditor5.image.ImageStyle,
+ window.CKEditor5.image.ImageToolbar,
+ window.CKEditor5.image.ImageUpload,
+ window.CKEditor5.indent.Indent,
+ window.CKEditor5.link.Link,
+ window.CKEditor5.link.LinkImage,
+ window.CKEditor5.list.List,
+ window.CKEditor5.mediaEmbed.MediaEmbed,
+ window.CKEditor5.paragraph.Paragraph,
+ window.CKEditor5.pasteFromOffice.PasteFromOffice,
+ window.CKEditor5.table.Table,
+ window.CKEditor5.table.TableToolbar,
+ window.CKEditor5.table.TableColumnResize,
+ window.CKEditor5.table.TableCaption,
+ window.CKEditor5.wordCount.WordCount,
+ StrapiMediaLib
+ ],
+ toolbar: [
+ 'undo', 'redo',
+ '|',
+ 'heading',
+ '|',
+ 'bold', 'italic',
+ '|',
+ 'link', 'strapiMediaLib', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock',
+ '|',
+ 'bulletedList', 'numberedList', 'outdent', 'indent'
+ ],
+ heading: {
+ options: [
+ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+ { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+ { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+ { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+ ]
+ },
+ image: {
+ toolbar: [
+ 'imageStyle:inline',
+ 'imageStyle:block',
+ 'imageStyle:side',
+ '|',
+ 'toggleImageCaption',
+ 'imageTextAlternative',
+ '|',
+ 'linkImage'
+ ]
+ },
+ table: {
+ contentToolbar: [
+ 'tableColumn',
+ 'tableRow',
+ 'mergeTableCells',
+ '|',
+ 'toggleTableCaption'
+ ]
+ },
+ link: {
+ addTargetToExternalLinks: true,
+ }
+ },
+
+ rich: {
+ plugins: [
+ window.CKEditor5.alignment.Alignment,
+ window.CKEditor5.autoformat.Autoformat,
+ window.CKEditor5.basicStyles.Bold,
+ window.CKEditor5.basicStyles.Italic,
+ window.CKEditor5.basicStyles.Underline,
+ window.CKEditor5.basicStyles.Strikethrough,
+ window.CKEditor5.basicStyles.Code,
+ window.CKEditor5.basicStyles.Subscript,
+ window.CKEditor5.basicStyles.Superscript,
+ window.CKEditor5.blockQuote.BlockQuote,
+ window.CKEditor5.codeBlock.CodeBlock,
+ window.CKEditor5.essentials.Essentials,
+ window.CKEditor5.font.FontSize,
+ window.CKEditor5.font.FontFamily,
+ window.CKEditor5.font.FontColor,
+ window.CKEditor5.font.FontBackgroundColor,
+ window.CKEditor5.findAndReplace.FindAndReplace,
+ window.CKEditor5.heading.Heading,
+ window.CKEditor5.horizontalLine.HorizontalLine,
+ window.CKEditor5.htmlEmbed.HtmlEmbed,
+ window.CKEditor5.image.Image,
+ window.CKEditor5.image.ImageCaption,
+ window.CKEditor5.image.ImageStyle,
+ window.CKEditor5.image.ImageToolbar,
+ window.CKEditor5.image.ImageUpload,
+ window.CKEditor5.image.ImageResize,
+ window.CKEditor5.indent.Indent,
+ window.CKEditor5.indent.IndentBlock,
+ window.CKEditor5.link.Link,
+ window.CKEditor5.link.LinkImage,
+ window.CKEditor5.list.List,
+ window.CKEditor5.list.ListProperties,
+ window.CKEditor5.list.TodoList,
+ window.CKEditor5.mediaEmbed.MediaEmbed,
+ window.CKEditor5.paragraph.Paragraph,
+ window.CKEditor5.pasteFromOffice.PasteFromOffice,
+ window.CKEditor5.removeFormat.RemoveFormat,
+ window.CKEditor5.specialCharacters.SpecialCharacters,
+ window.CKEditor5.specialCharacters.SpecialCharactersEssentials,
+ window.CKEditor5.table.Table,
+ window.CKEditor5.table.TableToolbar,
+ window.CKEditor5.table.TableProperties,
+ window.CKEditor5.table.TableCellProperties,
+ window.CKEditor5.table.TableColumnResize,
+ window.CKEditor5.table.TableCaption,
+ window.CKEditor5.wordCount.WordCount,
+ window.CKEditor5.highlight.Highlight,
+ StrapiMediaLib
+ ],
+ toolbar: {
+ items: [
+ 'undo', 'redo',
+ '|',
+ 'findAndReplace', 'selectAll',
+ '|',
+ 'heading',
+ '|',
+ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
+ '|',
+ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'code', 'removeFormat',
+ '-',
+ 'link', 'strapiMediaLib', 'mediaEmbed', 'insertTable', 'horizontalLine', 'blockQuote', 'codeBlock', 'htmlEmbed', 'specialCharacters', 'highlight',
+ '|',
+ 'alignment',
+ '|',
+ 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
+ ],
+ shouldNotGroupWhenFull: true
+ },
+ heading: {
+ options: [
+ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+ { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+ { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+ { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+ ]
+ },
+ list: {
+ properties: {
+ styles: true,
+ startIndex: true,
+ reversed: true
+ }
+ },
+ image: {
+ resizeUnit: "%",
+ resizeOptions: [ {
+ name: 'resizeImage:original',
+ value: null,
+ icon: 'original'
+ },
+ {
+ name: 'resizeImage:25',
+ value: '25',
+ icon: 'small'
+ },
+ {
+ name: 'resizeImage:50',
+ value: '50',
+ icon: 'medium'
+ },
+ {
+ name: 'resizeImage:75',
+ value: '75',
+ icon: 'large'
+ } ],
+ toolbar: [
+ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
+ '|',
+ 'toggleImageCaption', 'imageTextAlternative',
+ '|',
+ 'linkImage',
+ '|',
+ 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original'
+ ]
+ },
+ table: {
+ contentToolbar: [
+ 'tableColumn',
+ 'tableRow',
+ 'mergeTableCells',
+ '|',
+ 'tableCellProperties',
+ 'tableProperties',
+ '|',
+ 'toggleTableCaption'
+ ]
+ },
+ fontSize: {
+ options: [
+ 9,
+ 11,
+ 13,
+ 'default',
+ 17,
+ 19,
+ 21,
+ 27,
+ 35,
+ ],
+ supportAllValues: false
+ },
+ fontFamily: {
+ options: [
+ 'default',
+ 'Arial, Helvetica Neue, Helvetica, Source Sans Pro, sans-serif',
+ 'Courier New, Courier, monospace',
+ 'Georgia, serif',
+ 'Lucida Sans Unicode, Lucida Grande, sans-serif',
+ 'Tahoma, Geneva, sans-serif',
+ 'Times New Roman, Times, serif',
+ 'Trebuchet MS, Helvetica, sans-serif',
+ 'Verdana, Geneva, sans-serif',
+ 'Roboto, Roboto Black, Roboto Medium, Roboto Light, sans-serif',
+ ],
+ supportAllValues: true
+ },
+ fontColor: {
+ columns: 5,
+ documentColors: 10,
+ },
+ fontBackgroundColor: {
+ columns: 5,
+ documentColors: 10,
+ },
+ link: {
+ addTargetToExternalLinks: true,
+ }
+ }
+};
+
+export default class Configurator {
+ constructor ( fieldConfig ) {
+ this.fieldConfig = fieldConfig;
+ }
+
+ getEditorConfig() {
+ const config = this._getBaseConfig();
+
+ const maxLength = this.fieldConfig.maxLength;
+ const outputOption = this.fieldConfig.options.output;
+
+ if ( outputOption === 'Markdown' ) {
+ config.plugins.push( window.CKEditor5.markdownGfm.Markdown );
+ }
+
+ if ( maxLength ) {
+ config.plugins.push( window.CKEditor5.maximumLength.MaximumLength );
+
+ config.maximumLength = {
+ characters: maxLength
+ };
+ }
+
+ return config;
+ }
+
+ _getBaseConfig() {
+ const presetName = this.fieldConfig.options.preset;
+
+ switch ( presetName ) {
+ case 'light':
+ return CKEDITOR_BASE_CONFIG_FOR_PRESETS.light;
+ case 'standard':
+ return CKEDITOR_BASE_CONFIG_FOR_PRESETS.standard;
+ case 'rich':
+ return CKEDITOR_BASE_CONFIG_FOR_PRESETS.rich;
+ default:
+ throw new Error('Invalid preset name ' + presetName);
+ }
+ }
+}
diff --git a/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/GlobalStyling.js b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/GlobalStyling.js
new file mode 100644
index 0000000..403453a
--- /dev/null
+++ b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/GlobalStyling.js
@@ -0,0 +1,21 @@
+import {createGlobalStyle} from "styled-components";
+import { style as common } from "./styles/common";
+import { style as light } from "./styles/light";
+import { style as dark } from "./styles/dark";
+
+export const getGlobalStyling = ( theme ) => {
+ let themeStyle = null;
+ switch ( theme ) {
+ case 'dark':
+ themeStyle = dark;
+ break;
+ case 'light':
+ themeStyle = light;
+ break;
+ }
+
+ return createGlobalStyle`
+ ${ common }
+ ${ themeStyle }
+ `;
+};
diff --git a/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js
new file mode 100644
index 0000000..e6e1ee3
--- /dev/null
+++ b/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js
@@ -0,0 +1,134 @@
+import React, { useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Stack } from '@strapi/design-system/Stack';
+import { Field, FieldHint, FieldError, FieldLabel } from '@strapi/design-system/Field';
+import PropTypes from "prop-types";
+
+import { getGlobalStyling } from './GlobalStyling';
+import Configurator from './Configurator';
+import MediaLib from '../MediaLib';
+
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import ckeditor5Dll from 'ckeditor5/build/ckeditor5-dll.js';
+import ckeditor5EditorClassicDll from '@ckeditor/ckeditor5-editor-classic/build/editor-classic.js';
+
+import sanitize from './utils/utils';
+
+const CKEditorInput = ({
+ attribute,
+ onChange,
+ name,
+ value,
+ disabled,
+ labelAction,
+ intlLabel,
+ required,
+ description,
+ error
+}) => {
+ const [ editorInstance, setEditorInstance ] = useState(false);
+ const { formatMessage } = useIntl();
+ const { maxLengthCharacters:maxLength , ...options } = attribute.options;
+ const configurator = new Configurator( { options, maxLength } );
+ const editorConfig = configurator.getEditorConfig();
+
+ const wordCounter = useRef( null );
+
+ const strapiTheme = localStorage.getItem( 'STRAPI_THEME' );
+ const GlobalStyling = getGlobalStyling( strapiTheme );
+
+ const [ mediaLibVisible, setMediaLibVisible ] = useState( false );
+
+ const handleToggleMediaLib = () => setMediaLibVisible( prev => !prev );
+
+ const handleChangeAssets = assets => {
+ let imageHtmlString = '';
+
+ assets.map( asset => {
+ if ( asset.mime.includes('image') ) {
+ const url = sanitize( asset.url );
+ const alt = sanitize( asset.alt );
+
+ imageHtmlString += `