CKEditor 5 Custom Project

A customized CKEditor 5 build with comprehensive features, packaged as a React component library for easy integration into React applications.

Features

This build includes a comprehensive set of CKEditor 5 plugins:

Text Formatting: Bold, Italic, Underline, Strikethrough, Subscript, Superscript
Font Styling: Font Family, Font Size, Font Color, Font Background Color
Alignment: Text alignment options
Lists: Bulleted Lists, Numbered Lists, Todo Lists
Links: Link insertion and management with external link support
Images: Complete image editing suite with upload, resize, captions, and styling
Tables: Full table support with properties and cell management
Special Features: Code blocks, Block quotes, Horizontal lines, Special characters
Advanced: HTML editing, Source editing, Find and Replace, Full page mode
Markdown: Markdown support for import/export
And many more!

Installation

npm install ckeditor5-custom-project

Usage

Basic Usage

import React from "react";
import { CKEditor5Custom } from "ckeditor5-custom-project";

function MyComponent() {
  const handleEditorChange = (event, editor) => {
    const data = editor.getData();
    console.log("Editor content:", data);
  };

  return (
    <CKEditor5Custom
      initialData="<p>Hello from CKEditor 5!</p>"
      onChange={handleEditorChange}
    />
  );
}

export default MyComponent;

With Custom Configuration

import React from "react";
import {
  CKEditor5Custom,
  createCKEditorConfig,
} from "ckeditor5-custom-project";

function MyComponent() {
  const customConfig = {
    toolbar: {
      items: ["bold", "italic", "link", "bulletedList", "numberedList"],
    },
  };

  return (
    <CKEditor5Custom
      licenseKey="your-license-key-here"
      placeholder="Start typing..."
      initialData="<p>Custom editor configuration</p>"
      config={customConfig}
      showWordCount={true}
      onChange={(event, editor) => {
        console.log("Content changed:", editor.getData());
      }}
      onReady={(editor) => {
        console.log("Editor is ready:", editor);
      }}
    />
  );
}

export default MyComponent;

Using Configuration Factory

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { ClassicEditor, createCKEditorConfig } from "ckeditor5-custom-project";

function MyComponent() {
  const editorConfig = createCKEditorConfig({
    licenseKey: "your-license-key",
    placeholder: "Type your content here...",
    initialData: "<p>Hello World!</p>",
    customConfig: {
      // Override or add custom configuration
      toolbar: {
        items: ["heading", "bold", "italic", "link"],
      },
    },
  });

  return (
    <CKEditor
      editor={ClassicEditor}
      config={editorConfig}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log("Content:", data);
      }}
    />
  );
}

export default MyComponent;

Component Props

CKEditor5Custom Props

Prop	Type	Default	Description
`licenseKey`	string	undefined	CKEditor 5 license key for premium features
`placeholder`	string	"Type or paste your content here!"	Placeholder text
`initialData`	string	""	Initial editor content
`config`	object	{}	Additional editor configuration
`onReady`	function	undefined	Callback when editor is ready
`onChange`	function	undefined	Callback when content changes
`onBlur`	function	undefined	Callback when editor loses focus
`onFocus`	function	undefined	Callback when editor gains focus
`showWordCount`	boolean	true	Whether to show word count
`className`	string	""	CSS class for the container
`style`	object	{}	Inline styles for the container

CSS Styling

The component includes default CKEditor 5 styles. You can customize the appearance by overriding CSS classes:

/* Customize editor container */
.main-container {
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Customize editor content area */
.ck-editor__editable {
  min-height: 200px;
}

/* Customize word count display */
.editor_container__word-count {
  background: #f5f5f5;
  padding: 10px;
  border-top: 1px solid #ddd;
}

Development Setup

If you want to modify this package:

Clone the repository
Install dependencies: npm install
Start development server: npm run dev
Build library: npm run build:lib

License

MIT License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions:

Check the CKEditor 5 documentation
Open an issue in this repository
Contact the CKEditor team for licensing questions

@thuongton98/ckeditor5-custom

Package Exports

Readme