npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ckeditor/strapi-plugin-ckeditor

v1.1.0

Published

CKEditor 5 - Official Integration for Strapi

Downloads

27,604

Readme

CKEditor 5 - Official Integration for Strapi

[!IMPORTANT]
Starting from version 1.0.0, the CKEditor 5 custom field plugin is compatible with Strapi 5 and can’t be used in Strapi 4.4+. We decided to maintain integrations for both Strapi versions to ensure that you can still use our custom field before migrating to Strapi 5. Below is the compatibility table showing which plugin version should be used with your Strapi version.

This package provides a custom field for Strapi 5 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 👋

✨ 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

[!IMPORTANT]
Before installation, make sure that you own a valid CKEditor 5 license key. Start a commitment-free trial to get instant access to the license key. You can also refer to our license key and activation guide to learn more.

Inside your Strapi app, add the package:

With npm:

npm install @ckeditor/strapi-plugin-ckeditor

With yarn:

yarn add @ckeditor/strapi-plugin-ckeditor

Then, add the Content Security Policy configuration to allow loading CKEditor 5 from https://cdn.ckeditor.com origin and sending the editor usage information to https://proxy-event.ckeditor.com, by adding the rule to config/middlewares.ts in your Strapi project root:

export default [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'script-src': ['https://cdn.ckeditor.com'],
          'connect-src': ['https://proxy-event.ckeditor.com']
        },
      },
    },
  },
  // ...

Finally run build:

npm run build

or:

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 [email protected]: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

🧩 Compatibility with Strapi versions

Starting from version 1.0.0, the CKEditor 5 custom field plugin is compatible with Strapi 5 and can't be used in Strapi 4.4+. We decided to maintain integrations for both Strapi versions to make sure that you still be able to use our custom field before migrating to Strapi 5. Below, you can find the compatibility table that shows which plugin version should be used with your Strapi version.

⚖️ Licensing

The plugin "CKEditor 5 - Official Integration for Strapi" is licensed under MIT. Please note that CKEditor 5 itself is licensed under GPL v2+ or a commercial license.