CKEditor 5 [外链图片转存失败(img-5GF1Tsng-1562216716351)(https://img.shields.io/twitter/url/http/shields.io.svg?style=social)]
[外链图片转存失败(img-DmAynX91-1562216716352)(https://badge.fury.io/js/ckeditor5.svg)]
[外链图片转存失败(img-qa1HMt7a-1562216716353)(https://travis-ci.org/ckeditor/ckeditor5.svg?branch=master)]
[外链图片转存失败(img-ltPDfYQ0-1562216716354)(https://automate.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==–c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)]
[外链图片转存失败(img-3GTt2BNW-1562216716355)(https://img.shields.io/david/ckeditor/ckeditor5.svg)]
[外链图片转存失败(img-TiHKy2M3-1562216716356)(https://img.shields.io/david/dev/ckeditor/ckeditor5.svg)]
[外链图片转存失败(img-kZ2Be2gN-1562216716358)(https://img.shields.io/badge/join-newsletter-00cc99.svg)]
[外链图片转存失败(img-UYJrdeOG-1562216716359)(https://img.shields.io/badge/follow-twitter-00cc99.svg)]
A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.
⚠ This package does not contain any source code
CKEditor 5 is distributed as four ready-to-use rich text editor builds which you can install from npm.
You can also customize the existing builds or build your own editors and features by using the CKEditor 5 Framework.
Table of contents
Quick start
CKEditor 5 Builds
CKEditor 5 Builds are a set of ready-to-use rich text editors. Every “build” provides a single type of editor with a set of features and a default configuration.
The following CKEditor 5 Builds are currently available:
Example
Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:
- Load the desired editor via the
<script>
tag. - Call the static
create()
method to create the editor.
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create()
method:
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
You’re ready to go!
To find out how to start with other builds check the Quick start guide in the CKEditor 5 documentation.
CKEditor 5 Framework
CKEditor 5 Builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.
To find out how to start building your own editor from scratch go to CKEditor 5 Framework overview section of CKEditor 5 documentation.
Documentation and FAQ
To find out more see the following CKEditor 5 documentation sections:
- API documentation
- CKEditor 5 Framework documentation
- CKEditor 5 Builds documentation
- CKEditor 5 Features documentation
- CKEditor 5 Examples
The documentation is far from being complete and will be constantly evolving (as will the editor) until it is ready for v1.0.0.
For FAQ please go to the CKEditor Ecosystem help center.
For a high-level overview of the project see the CKEditor Ecosystem website.
Contributing and project organization
Ideas and discussions
The main development repository of CKEditor 5 is located at https://github.com/ckeditor/ckeditor5. This is the best place for bringing opinions and contributions. Letting the core team know if they are going in the right or wrong direction is great feedback and will be much appreciated!
Development
CKEditor 5 is a modular, multi-package, multi-repository project. It consists of several packages that create the editing framework, based on which the feature packages are implemented.
The ckeditor5 repository is the place that centralizes the development of CKEditor 5. It bundles different packages into a single place, adding the necessary helper tools for the development workflow, like the builder and the test runner. Basic information on how to set up the development environment can be found in the documentation.
See the official contributors’ guide to learn how to contribute your code to the project.
Reporting issues and feature requests
Each repository handles its issues independently. However, it is recommended to report issues in this repository unless you know to which specific repository the issue belongs.
Read more on the Support page.
Releases
See CKEditor 5 release blog posts on the CKEditor blog.
Packages
Core libraries
Name | Version | Description |
---|
@ckeditor/ckeditor5-engine
[外链图片转存失败(img-1KPJHgCE-1562216716361)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-engine.svg)] The editing engine.
@ckeditor/ckeditor5-core
[外链图片转存失败(img-U6h3l06u-1562216716362)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-core.svg)] The core editor architecture.
@ckeditor/ckeditor5-ui
[外链图片转存失败(img-L1UM4Yvi-1562216716362)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-ui.svg)] The editor UI library.
@ckeditor/ckeditor5-utils
[外链图片转存失败(img-LyjDxiPW-1562216716363)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-utils.svg)] The editor utilities library.
@ckeditor/ckeditor5-upload
[外链图片转存失败(img-0OMCFCHc-1562216716364)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-upload.svg)] The file upload utilities.
@ckeditor/ckeditor5-widget
[外链图片转存失败(img-dVNVqbpM-1562216716366)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-widget.svg)] The widget API.
@ckeditor/ckeditor5-cloud-services
[外链图片转存失败(img-mLlGdFAC-1562216716367)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-cloud-services.svg)] CKEditor 5's Cloud Services integration layer.
Builds
Name | Version | Description |
---|
@ckeditor/ckeditor5-build-classic
[外链图片转存失败(img-ZXVeYrhs-1562216716368)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-classic.svg)] The classic editor build.
@ckeditor/ckeditor5-build-inline
[外链图片转存失败(img-qSfg5sE1-1562216716369)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-inline.svg)] The inline editor build.
@ckeditor/ckeditor5-build-balloon
[外链图片转存失败(img-ySTYUJuV-1562216716369)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-balloon.svg)] The balloon editor (Medium-like) build.
@ckeditor/ckeditor5-build-balloon-block
[外链图片转存失败(img-nP3S7jnH-1562216716370)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-balloon-block.svg)] The balloon editor with a block toolbar (Slack–like) build.
@ckeditor/ckeditor5-build-decoupled-document
[外链图片转存失败(img-C3SuqZlB-1562216716372)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-build-decoupled-document.svg)] The document editor build, featuring the decoupled UI editor implementation.
Features
Name | Version | Description |
---|
@ckeditor/ckeditor5-adapter-ckfinder
[外链图片转存失败(img-yFEftoIx-1562216716372)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-adapter-ckfinder.svg)] The
CKFinder adapter for features which require upload capabilities (e.g. image upload).
@ckeditor/ckeditor5-alignment
[外链图片转存失败(img-Y71Wn4Kr-1562216716373)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-alignment.svg)] The text alignment feature.
@ckeditor/ckeditor5-autoformat
[外链图片转存失败(img-2NwPxvWj-1562216716374)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-autoformat.svg)] The autoformatting feature. Replaces predefined characters with a corresponding format (e.g.
**foo**
becomes bold
<strong>foo</strong>
).
@ckeditor/ckeditor5-autosave
[外链图片转存失败(img-V3vNDaLO-1562216716375)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-autosave.svg)] The autosave feature. Makes it easy to automatically save the data to the backend.
@ckeditor/ckeditor5-basic-styles
[外链图片转存失败(img-TkY3q5as-1562216716376)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-basic-styles.svg)] The bold, italic, underline and code features.
@ckeditor/ckeditor5-block-quote
[外链图片转存失败(img-BrkrUkmL-1562216716377)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-block-quote.svg)] The block quote feature.
@ckeditor/ckeditor5-ckfinder
[外链图片转存失败(img-KsKEwTTi-1562216716379)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-ckfinder.svg)] The
CKFinder file browser integration.
@ckeditor/ckeditor5-clipboard
[外链图片转存失败(img-H3VdIDkZ-1562216716379)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-clipboard.svg)] The clipboard integration.
@ckeditor/ckeditor5-enter
[外链图片转存失败(img-fzib95g9-1562216716380)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-enter.svg)] The
Enter key feature.
@ckeditor/ckeditor5-easy-image
[外链图片转存失败(img-NsQ1cJEJ-1562216716380)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-easy-image.svg)] Easy Image with CKEditor Cloud Services feature.
@ckeditor/ckeditor5-font
[外链图片转存失败(img-AxYkRb7L-1562216716381)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-font.svg)] The font size and font family features.
@ckeditor/ckeditor5-heading
[外链图片转存失败(img-ZSRkC3JK-1562216716381)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-heading.svg)] The heading feature.
@ckeditor/ckeditor5-highlight
[外链图片转存失败(img-VNwrJcVr-1562216716382)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-highlight.svg)] The highlight feature (markers and pens).
@ckeditor/ckeditor5-image
[外链图片转存失败(img-zoIZgcTu-1562216716382)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-image.svg)] The image feature. Supports image styles and captioning.
@ckeditor/ckeditor5-link
[外链图片转存失败(img-AvbObYdl-1562216716383)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-link.svg)] The link feature.
@ckeditor/ckeditor5-list
[外链图片转存失败(img-9knLKQuO-1562216716384)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-list.svg)] The numbered and bulleted lists feature.
@ckeditor/ckeditor5-markdown-gfm
[外链图片转存失败(img-9D1qjsEQ-1562216716385)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-markdown-gfm.svg)] The GitHub-flavored Markdown data processor.
@ckeditor/ckeditor5-media-embed
[外链图片转存失败(img-3VbhJDw8-1562216716385)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-media-embed.svg)] The media embed feature.
@ckeditor/ckeditor5-mention
[外链图片转存失败(img-I2BnTG80-1562216716386)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-mention.svg)] The mention feature (autocomplete `@mentions`, `#tags`, etc.).
@ckeditor/ckeditor5-paragraph
[外链图片转存失败(img-WOT1zJj4-1562216716388)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-paragraph.svg)] The paragraph feature.
@ckeditor/ckeditor5-paste-from-office
[外链图片转存失败(img-sYeDfN6n-1562216716389)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-paste-from-office.svg)] The Paste from Office (Word, Excel, Google Docs, etc.) plugin.
@ckeditor/ckeditor5-remove-format
[外链图片转存失败(img-FmcA8wn4-1562216716390)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-remove-format.svg)] The remove format feature.
@ckeditor/ckeditor5-table
[外链图片转存失败(img-L8UCAGEn-1562216716391)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-table.svg)] The table feature. Work in progress.
@ckeditor/ckeditor5-typing
[外链图片转存失败(img-s0FPtfLI-1562216716392)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-typing.svg)] The typing and deleting features.
@ckeditor/ckeditor5-undo
[外链图片转存失败(img-FxRVr2hC-1562216716392)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-undo.svg)] The undo feature.
Editors
Name | Version | Description |
---|
@ckeditor/ckeditor5-editor-classic
[外链图片转存失败(img-pf9yRie4-1562216716393)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-editor-classic.svg)] The classic editor implementation.
@ckeditor/ckeditor5-editor-inline
[外链图片转存失败(img-TII1s5YN-1562216716393)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-editor-inline.svg)] The inline editor implementation.
@ckeditor/ckeditor5-editor-balloon
[外链图片转存失败(img-E1I1lfnZ-1562216716394)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-editor-balloon.svg)] The balloon editor (Medium-like) implementation.
@ckeditor/ckeditor5-editor-decoupled
[外链图片转存失败(img-Ov9wH01k-1562216716395)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-editor-decoupled.svg)] The editor implementation with a decoupled UI.
Themes
Name | Version | Description |
---|
@ckeditor/ckeditor5-theme-lark
[外链图片转存失败(img-jkvpZ6lG-1562216716395)(https://img.shields.io/npm/v/@ckeditor/ckeditor5-theme-lark.svg)] The Lark theme.
License
Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md
file or https://ckeditor.com/legal/ckeditor-oss-license.