@jhoward1994/strapi-plugin-ckeditor
Advanced tools
Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration). Forked from https://github.com/nshenderov/strapi-plugin-ckeditor as a refactor for Strapi V5 compatibility
Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)
npm install @jhoward1994/strapi-plugin-ckeditor
or
yarn add @jhoward1994/strapi-plugin-ckeditor
npm run build
or
yarn build
The plugin uses Strapi custom fields API and CKEditor dll build
The plugin configuration should be defined in the /config/ckeditor.txt file.
It's highly recommended to explore the official ckeditor documentation
Content of ckeditor.txt will be passed into the script tag during the initialization process.
📂 Default configs: admin/src/components/Wysiwyg/CKEditor/configs
📂 Default theme: admin/src/components/Wysiwyg/CKEditor/theme
ckeditor.txt example:
globalThis.CKEditorConfig = {
/* By default custom configs and theme
defined in this file are going to be spread into
default configs and theme these two properties below
allow you to redefine default objects completely: */
//configsOverwrite:true,
//themeOverwrite:true,
/* Here you can redefine default configs
or add completely new ones.
Each config includes:
"styles", "field" and "editorConfig" properties.
Property "field" is required. */
configs: {
toolbar: {
// styles:``,
// field:{},
// editorConfig:{}
},
custom: {
/* Styles for this specific editor version.
This will be passed into the editor's parent container. */
styles: `
// --ck-focus-ring:3px dashed #5CB176;
// .ck.ck-content.ck-editor__editable {
// &.ck-focused:not(.ck-editor__nested-editable) {
// border: var(--ck-focus-ring) !important;
// }
// }
// .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
// min-height: 400px;
// max-height: 400px;
// }
// .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
// min-height: 400px;
// max-height: 1700px;
// }
`,
/* Custom field option */
field: {
key: 'custom',
value: 'custom',
metadatas: {
intlLabel: {
id: 'ckeditor5.preset.custom.label',
defaultMessage: 'Custom version',
},
},
},
/* CKEditor configuration */
editorConfig: {
/* You can find all available built-in plugins
in the admin/src/components/Wysiwyg/CKEditor/configs/base.js */
plugins: [
CKEditor5.autoformat.Autoformat,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.essentials.Essentials,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.paragraph.Paragraph,
CKEditor5.pasteFromOffice.PasteFromOffice,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,
CKEditor5.table.TableColumnResize,
CKEditor5.table.TableCaption,
CKEditor5.strapiPlugins.StrapiMediaLib,
CKEditor5.strapiPlugins.StrapiUploadAdapter,
],
/* By default, the language of the plugin's UI will be chosen
based on the language defined in this config file
or on the preferred language from the strapi's user config
and if both of them are not set then 'en' will be used as a fallback.
( language.ui -> preferred language -> 'en' ) */
/* For content it will chose the language based on i18n (if! ignorei18n)
or on language.content property defined here
and it will use UI language as a fallback.
ignorei18n ? language.content : i18n; -> language.ui */
language: {
// ignorei18n: true,
// ui:'he',
// content:'he'
},
toolbar: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'strapiMediaLib',
'insertTable',
'|',
'undo',
'redo',
],
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'],
},
},
},
},
/* Here you can customize the plugin's theme.
This will be passed as "createGlobalStyle". */
theme: {
// common:``,
// light:``,
// dark:``,
// additional:``
},
};
If you use the default (local) upload provider you should specify the
urlproperty in theconfig/server.jsin order to get the full URL on uploaded files eg:
module.exports = ({ env }) => ({
url: env('PUBLIC_URL', 'http://localhost:1337'),
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
app: {
keys: env.array('APP_KEYS'),
},
});
In order to display a content from an external source in your
adminyou should configure your middlewares.js check the docs about this
Markdown plugin example
yarn add @ckeditor/ckeditor5-markdown-gfm
or
npm install @ckeditor/ckeditor5-markdown-gfm
import ckeditor5Dll from 'ckeditor5/build/ckeditor5-dll.js';
import ckeditor5MrkdownDll from '@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js';
const config = {};
const bootstrap = (app) => {};
export default {
config,
bootstrap,
};
globalThis.CKEditorConfig = {
configs: {
markdown: {
field: {
key: 'markdown',
value: 'markdown',
metadatas: {
intlLabel: {
id: 'ckeditor.preset.markdown.label',
defaultMessage: 'Markdown version',
},
},
},
editorConfig: {
placeholder: 'Markdown editor',
plugins: [
CKEditor5.essentials.Essentials,
CKEditor5.autoformat.Autoformat,
CKEditor5.blockQuote.BlockQuote,
CKEditor5.basicStyles.Bold,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.basicStyles.Italic,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.mediaEmbed.MediaEmbed,
CKEditor5.paragraph.Paragraph,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,
CKEditor5.sourceEditing.SourceEditing,
CKEditor5.strapiPlugins.StrapiMediaLib,
CKEditor5.strapiPlugins.StrapiUploadAdapter,
CKEditor5.markdownGfm.Markdown,
CKEditor5.basicStyles.Code,
CKEditor5.codeBlock.CodeBlock,
CKEditor5.list.TodoList,
CKEditor5.basicStyles.Strikethrough,
CKEditor5.horizontalLine.HorizontalLine,
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'strikethrough',
'link',
'|',
'bulletedList',
'numberedList',
'todoList',
'|',
'code',
'codeBlock',
'|',
'uploadImage',
'strapiMediaLib',
'blockQuote',
'horizontalLine',
'-',
'sourceEditing',
'|',
'outdent',
'indent',
'|',
'undo',
'redo',
],
shouldNotGroupWhenFull: true,
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative',
],
},
codeBlock: {
languages: [
{ language: 'css', label: 'CSS' },
{ language: 'html', label: 'HTML' },
{ language: 'javascript', label: 'JavaScript' },
{ language: 'php', label: 'PHP' },
],
},
},
},
},
};
npm run build
or
yarn build
This section covers the way how to configure your environment if you want to contribute to this package.
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:nshenderov/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 }) => ({
ckeditor5: {
enabled: true,
resolve: "./src/plugins/strapi-plugin-ckeditor"
},
});
Rebuild the project and start the server:
yarn build
yarn develop
Strapi v5.0.0+
Node >=18.0.0 <=20.x.x
FAQs
Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration). Forked from https://github.com/nshenderov/strapi-plugin-ckeditor as a refactor for Strapi V5 compatibility
We found that @jhoward1994/strapi-plugin-ckeditor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.