CKEditor 5 Custom Build - TypeScript Edition

A full-featured CKEditor 5 custom build with complete TypeScript support, compatible with CKEditor 5 v42+. This package provides a production-ready rich text editor with all essential plugins and Vietnamese language support.

📦 Version 0.1.3

What's New

• ✨ Full TypeScript Support: Complete type definitions included
• 🚀 CKEditor 5 v42+: Built with the latest CKEditor 5 architecture
• 📦 Optimized Bundle: CSS and JavaScript bundled together
• 🎯 Type Safety: Auto-generated .d.ts files for perfect IDE integration
• 🇻🇳 Vietnamese Language: Built-in Vietnamese UI support
• 🔧 Production Ready: Minified and optimized for production use

Key Features

• 70+ Plugins included out of the box
• TypeScript definitions for type-safe development
• Zero configuration - works immediately after installation
• Framework agnostic - works with Vue, React, Angular, or vanilla JS
• Fully customizable toolbar and configuration

🚀 Quick Start

Installation

npm install ckeditor5-custom-build-v5-full

Basic Usage (JavaScript)

import Editor from 'ckeditor5-custom-build-v5-full';

Editor
    .create(document.querySelector('#editor'))
    .then(editor => {
        console.log('Editor ready!', editor);
    })
    .catch(error => {
        console.error(error);
    });

Basic Usage (TypeScript)

import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

const config: EditorConfig = {
    toolbar: ['bold', 'italic', 'link'],
    language: 'vi'
};

Editor
    .create(document.querySelector('#editor')!, config)
    .then(editor => {
        console.log('Editor ready!', editor);
    })
    .catch(error => {
        console.error(error);
    });

🎨 Framework Integration

Vue 3

Installation:

npm install ckeditor5-custom-build-v5-full @ckeditor/ckeditor5-vue

Setup (main.js/main.ts):

import { createApp } from 'vue';
import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
import App from './App.vue';

const app = createApp(App);
app.use(CkeditorPlugin);
app.mount('#app');

Component Usage:

<template>
    <div>
        <ckeditor 
            :editor="editor" 
            :config="editorConfig" 
            v-model="editorData"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

const editor = Editor;
const editorData = ref('<p>Hello from Vue!</p>');

const editorConfig: EditorConfig = {
    toolbar: [
        'undo', 'redo', '|',
        'heading', '|',
        'bold', 'italic', 'underline', '|',
        'link', 'imageUpload', 'insertTable', '|',
        'bulletedList', 'numberedList', 'outdent', 'indent'
    ],
    language: 'vi'
};
</script>

React

Installation:

npm install ckeditor5-custom-build-v5-full @ckeditor/ckeditor5-react

Component Usage:

import React, { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

const MyEditor: React.FC = () => {
    const [content, setContent] = useState('<p>Hello from React!</p>');

    const config: EditorConfig = {
        toolbar: [
            'undo', 'redo', '|',
            'heading', '|',
            'bold', 'italic', 'underline', '|',
            'link', 'imageUpload', 'insertTable', '|',
            'bulletedList', 'numberedList'
        ],
        language: 'vi'
    };

    return (
        <CKEditor
            editor={Editor}
            config={config}
            data={content}
            onChange={(event, editor) => {
                const data = editor.getData();
                setContent(data);
            }}
        />
    );
};

export default MyEditor;

Angular

Installation:

npm install ckeditor5-custom-build-v5-full @ckeditor/ckeditor5-angular

Module Setup (app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, CKEditorModule],
    bootstrap: [AppComponent]
})
export class AppModule { }

Component Usage:

import { Component } from '@angular/core';
import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

@Component({
    selector: 'app-root',
    template: `
        <ckeditor 
            [editor]="Editor" 
            [config]="config" 
            [(ngModel)]="content"
        ></ckeditor>
    `
})
export class AppComponent {
    public Editor = Editor;
    public content = '<p>Hello from Angular!</p>';
    
    public config: EditorConfig = {
        toolbar: [
            'undo', 'redo', '|',
            'heading', '|',
            'bold', 'italic', 'underline', '|',
            'link', 'imageUpload', 'insertTable'
        ],
        language: 'vi'
    };
}

⚙️ Configuration

Full Configuration Example

import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

const config: EditorConfig = {
    toolbar: {
        items: [
            'undo', 'redo',
            '|',
            'heading',
            '|',
            'bold', 'italic', 'underline', 'strikethrough',
            '|',
            'link', 'bulletedList', 'numberedList', 'todoList',
            '|',
            'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
            '|',
            'alignment', 'outdent', 'indent',
            '|',
            'imageUpload', 'insertTable', 'blockQuote', 'mediaEmbed',
            '|',
            'code', 'codeBlock', 'htmlEmbed',
            '|',
            'findAndReplace', 'specialCharacters', 'horizontalLine',
            '|',
            'sourceEditing', 'removeFormat'
        ],
        shouldNotGroupWhenFull: true
    },
    language: 'vi',
    image: {
        toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            '|',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'linkImage'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            '|',
            'tableCellProperties',
            'tableProperties'
        ]
    }
};

Editor.create(document.querySelector('#editor')!, config);

Minimal Configuration

const config: EditorConfig = {
    toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
    language: 'vi'
};

🎯 Available Plugins

This build includes 70+ plugins:

Text Formatting

• Bold, Italic, Underline, Strikethrough
• Subscript, Superscript
• Code (inline)
• Remove Format

Styling

• Font Family
• Font Size
• Font Color
• Font Background Color
• Highlight
• Style

Layout & Structure

• Heading
• Paragraph
• Alignment
• Indent / Outdent
• Horizontal Line
• Page Break
• Block Quote

Lists

• Bulleted List
• Numbered List
• Todo List
• List Properties

Links & Media

• Link (with AutoLink)
• Image (Upload, Insert, Resize, Caption, Styles)
• Media Embed
• Base64 Upload Adapter

Tables

• Table
• Table Toolbar
• Table Properties
• Table Cell Properties
• Table Column Resize
• Table Caption

Code

• Code Block
• Source Editing
• HTML Embed
• HTML Support (General HTML Support, Data Filter, Data Schema, HTML Comment)

Tools & Utilities

• Find and Replace
• Special Characters (Arrows, Currency, Essentials, Latin, Mathematical, Text)
• Word Count
• Autosave
• Autoformat
• Show Blocks
• Select All
• Mention
• Text Part Language
• Text Transformation
• Paste from Office
• Cloud Services
• Restricted Editing (Standard Editing Mode)
• Essentials

🧪 Testing & Development

Local Testing

After building, you can test the editor using the included sample:

# Build the editor
npm run build

# Open sample in browser
start sample/index.html  # Windows
open sample/index.html   # macOS
xdg-open sample/index.html  # Linux

Or use a local server:

# Using http-server
npx http-server -p 8080
# Then open: http://localhost:8080/sample/

# Using Python
python -m http.server 8080
# Then open: http://localhost:8080/sample/

Testing in Your Project

Method 1: npm link

# In this package directory
npm link

# In your project directory
npm link ckeditor5-custom-build-v5-full

Method 2: Local install

# In your project directory
npm install /path/to/ckeditor5-custom-build-v5-full

TypeScript Type Checking

Create a test file to verify types:

// test-types.ts
import Editor from 'ckeditor5-custom-build-v5-full';
import type { EditorConfig } from 'ckeditor5';

// Check static properties
const plugins = Editor.builtinPlugins;
const defaultConfig = Editor.defaultConfig;

// Check configuration types
const config: EditorConfig = {
    toolbar: ['bold', 'italic'],
    language: 'vi'
};

console.log('Plugins:', plugins.length);
console.log('Config:', defaultConfig);

Compile and run:

npx tsc test-types.ts --skipLibCheck
node test-types.js

Browser Console Testing

After opening the sample page, open Developer Console (F12) and try:

// Get editor content
editor.getData();

// Set new content
editor.setData('<p>Hello from console!</p>');

// Get a plugin
editor.plugins.get('Bold');

// Check configuration
editor.config.get('language'); // 'vi'

// Get all built-in plugins
Editor.builtinPlugins.length; // 70+

🔧 Building from Source

Prerequisites

• Node.js 16+ and npm
• TypeScript 5.3+

Build Steps

# Install dependencies
npm install

# Build (generates both JS and type definitions)
npm run build

# Build only TypeScript definitions
npm run build:types

# Build only JavaScript bundle
npm run build:js

Build Output

The build process generates:

build/
├── ckeditor.js          # Minified JavaScript bundle with CSS
├── ckeditor.js.map      # Source map for debugging
├── ckeditor.d.ts        # TypeScript type definitions
└── ckeditor.d.ts.map    # Type definitions source map

📚 API Reference

Editor Class

class Editor extends ClassicEditor {
    static builtinPlugins: Plugin[];
    static defaultConfig: EditorConfig;
}

Static Properties

Editor.builtinPlugins

• Type: Plugin[]
• Description: Array of all built-in plugins included in this build

Editor.defaultConfig

• Type: EditorConfig
• Description: Default configuration with Vietnamese language and full toolbar

Methods

Editor.create(element, config?)

• Parameters:
  • element: HTMLElement | string - DOM element or selector
  • config?: EditorConfig - Optional configuration object
• Returns: Promise<Editor>
• Description: Creates a new editor instance

editor.getData()

• Returns: string
• Description: Gets the editor content as HTML

editor.setData(data)

• Parameters:
  • data: string - HTML content to set
• Returns: void
• Description: Sets the editor content

editor.destroy()

• Returns: Promise<void>
• Description: Destroys the editor instance

🌍 Language Support

This build includes Vietnamese language by default, but supports all CKEditor 5 languages through configuration:

const config: EditorConfig = {
    language: 'en', // or 'vi', 'fr', 'de', etc.
};

Available languages: All CKEditor 5 supported languages are included in the build.

📦 Package Information

Package Structure

ckeditor5-custom-build-v5-full/
├── build/
│   ├── ckeditor.js
│   ├── ckeditor.js.map
│   ├── ckeditor.d.ts
│   └── ckeditor.d.ts.map
├── sample/
│   ├── index.html
│   └── styles.css
├── src/
│   └── ckeditor.ts
├── LICENSE.md
├── README.md
├── package.json
├── tsconfig.json
├── tsconfig.build.json
└── webpack.config.js

Package Exports

{
  "main": "./build/ckeditor.js",
  "types": "./build/ckeditor.d.ts",
  "exports": {
    ".": {
      "types": "./build/ckeditor.d.ts",
      "import": "./build/ckeditor.js",
      "require": "./build/ckeditor.js",
      "default": "./build/ckeditor.js"
    }
  }
}

🐛 Troubleshooting

TypeScript Errors

Problem: Cannot find module 'ckeditor5-custom-build-v5-full'

Solution:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

CSS Not Loading

Problem: Editor appears without styling

Solution: The CSS is bundled into the JavaScript file. Make sure you're importing the editor correctly:

import Editor from 'ckeditor5-custom-build-v5-full';
// CSS is automatically included

Build Errors

Problem: Build fails with TypeScript errors

Solution:

# Clean build directory
rm -rf build dist

# Reinstall dependencies
npm install

# Rebuild
npm run build

Module Resolution Issues

Problem: TypeScript can't find types

Solution: Add to your tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "skipLibCheck": true
  }
}

📄 License

See LICENSE.md for licensing information.

🤝 Contributing

This is a custom build package. For CKEditor 5 core contributions, please visit the official CKEditor 5 repository.

📞 Support

• CKEditor 5 Documentation: https://ckeditor.com/docs/ckeditor5/
• CKEditor 5 GitHub: https://github.com/ckeditor/ckeditor5
• TypeScript Documentation: https://www.typescriptlang.org/docs/

🔄 Changelog

Version 0.1.3 (Current)

• ✨ Complete TypeScript support with auto-generated type definitions
• 🎯 Type definitions now correctly placed in build/ directory
• 📦 Optimized build process with separate TypeScript compilation
• 🔧 Fixed CSS bundling for CKEditor 5 v42+
• 📚 Comprehensive documentation with framework examples
• 🧪 Enhanced sample page with interactive testing features

Version 0.1.2

• 🚀 Updated to CKEditor 5 v42+
• 📦 Migrated to unified ckeditor5 package
• 🔧 Fixed module imports for new architecture

Version 0.1.1

• ✨ Initial TypeScript conversion
• 🎯 Added TypeScript configuration
• 📝 Updated documentation

Version 0.1.0

• 🎉 Initial release with JavaScript

Made with ❤️ using CKEditor 5 v42+ and TypeScript 5.3