Giter Club home page Giter Club logo

strapi-plugin-ckeditor's Introduction

CKEditor 5 custom field for Strapi

CKEditor 5 used inside Strapi. Article form consisting of a title, excerpt text, and content

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 ๐Ÿ‘‹

โœจ 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:

npm install @ckeditor/strapi-plugin-ckeditor

With yarn:

yarn add @ckeditor/strapi-plugin-ckeditor

Then 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

strapi-plugin-ckeditor's People

Contributors

reinmar avatar mgsy avatar godai78 avatar kbinieda avatar jffernandez avatar lgradzki-cksource avatar remidej avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.