nshenderovnshenderov
143

Strapi Plugin Ckeditor

screenshot of Strapi Plugin Ckeditor
react
styled-components
strapi

Integrates CKEditor 5 into your Strapi project as a fully customizable custom field.

GithubDemo

Overview

The document provides information about a Strapi plugin called CKEditor that integrates a rich text editor into Strapi apps. It mentions the features, installation process, configuration, and requirements of the plugin.

Features

  • Media library integration: The plugin supports integration with the media library in Strapi.
  • Supports responsive images: It provides support for responsive images in the editor.
  • Supports Strapi's theme switching: The plugin allows users to switch between different themes and even define their own theme.
  • Supports i18n: It supports internationalization for both content and the user interface.
  • Few predefined editor configs: The plugin comes with a few predefined editor configurations, but users can also add their own.
  • Possible to add new plugins: Users can add new plugins to extend the functionality of the CKEditor.

Configuration

The plugin is based on Strapi's custom fields and requires the CKEditor DLL build. The configuration should be defined in the /config/ckeditor.txt file. It is recommended to explore the official CKEditor documentation for detailed configuration options. The content from ckeditor.txt will be passed into a script tag during the initialization process.

Default configurations can be found in the admin/src/components/Input/CKEditor/configs directory. The default theme can be found in the admin/src/components/Input/CKEditor/theme directory.

To specify a URL for uploaded files when using the default upload provider, add a url property to the config/server.js file.

To display content from an external source on the admin side, configure the middlewares.js file.

To add plugins, follow these steps:

  1. Inside your app, install the desired plugin:
npm install plugin-name

or

yarn add plugin-name
  1. In your app's config/ckeditor.txt file, add the plugin.
  2. Rebuild your app:
npm run build

or

yarn build

Contributing

If you want to contribute to this package, follow these steps to configure your environment:

  1. Install Strapi infrastructure on top of the plugin repository by creating a plugins folder in your Strapi project.
  2. Clone the plugin repository into the plugins folder.
  3. Add an entry in the ./package.json file of the plugin repository.
  4. Install dependencies:
npm install

or

yarn install
  1. Register the plugin in the ./config/plugins.js file.
  2. Rebuild the project and start the server.

Requirements

  • Strapi v4.4.0+
  • Node >=14.19.1 <=18.x.x

The build of this plugin includes some useful plugins based on the following repositories:

  • https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5
  • https://github.com/leknoppix/ckeditor5-fullscreen
  • https://github.com/gtomato/ckeditor5-strapi-upload-plugin
  • https://github.com/pshurygin/ckeditor5-font-color

Summary

The document provides an overview of the CKEditor plugin for Strapi, highlighting its features, installation process, configuration options, and requirements. It also includes instructions for contributing to the plugin's development.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

strapi
Strapi

Strapi is an open source headless CMS that provides a customizable content management system and API for your projects. It allows you to manage content in a visual interface and use a REST or GraphQL API to retrieve the data.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

Yup

Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.