什么是 CKEditor 5

CKEditor 5 是一款超现代的 JavaScript 富文本编辑器，具有 MVC 架构、自定义数据模型和虚拟 DOM。

ckeditor开源吗,ckeditor点不动

CKEditor 5 是用 TypeScript 从头开始编写，并具有出色的 webpack 和 Vite 支持，提供了各种类型的所见即所得编辑解决方案以及广泛的协作支持。从类似于 Google Docs 和 Medium 的编辑器到 Slack 或类似 Twitter 的应用程序，一切都可以在单个编辑框架内实现。作为市场领导者，它不断扩展和更新。

CKEditor 5 的典型特征可以概括为以下几点：

精心设计的用户界面和完美的用户体验：编辑器配备了精心设计的 UI 和完美的 UX，因此用户可以轻松管理媒体和表格，并使用高级功能，例如：自动格式化、提及、从 Word 粘贴或 Markdown 支持。
现代且最先进：CKEditor 5 可以与 Angular、React 和 Vue.js 进行本机集成。 CKEditor 5 还与 Electron 和移动设备（Android、iOS）兼容。
多人协作：借助协作功能，多个用户可以编写、评论、跟踪更改并查看其内容的修订历史记录，全部都是实时进行。
人工智能助手：将强大的 AI 模型添加到富文本编辑器中。通过预制和自由格式的提示选项，开发者可以编写、改写、解释、翻译和总结内容，而无需离开编辑器。

目前 CKEditor 5 在 Github 通过 MIT 协议开源，有超过 7.8k 的 star、3.5k 的 fork、27.5k 的项目依赖量、代码贡献者 120+，妥妥的前端优质开源项目。

开始使用 CKEditor 5

CKEditor 5 在线生成器

开始使用 CKEditor 5 及其所有功能的最简单方法是使用在线构建器准备自定义构建。开发者所需要做的就是选择首选的预定义构建作为基础，添加所有必需的插件，然后*载下**即用型软件包。

CKEditor 5 预定义版本

CKEditor 5 预定义版本是一组即用型富文本编辑器。每个版本都提供单一类型的编辑器，具有一组功能和默认配置。

目前可以使用以下 CKEditor 5 预定义版本：

Classic editor
Inline editor
Balloon editor
Balloon block editor
Document editor

使用 CKEditor 5 版本创建编辑器非常简单，可以通过两个步骤进行描述：

通过 <script> 标签加载所需的编辑器。
调用静态 create() 方法来创建编辑器。

在 HTML 页面中，添加 CKEditor 应替换的元素：

<div id="editor"></div>

加载经典编辑器版本（可以在 CDN、npm 和 zip *载下**之间进行选择）

<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>

接着调用 ClassicEditor.create()方法：

<script>
	ClassicEditor
		.create( document.querySelector( '#editor' ) )
		.catch( error => {
			console.error( error );
		} );
</script>

上述示例嵌入 CKEditor 5 的完整网页代码示例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

对于更高级的用户或需要将 CKEditor 5 与其应用程序集成的用户，官方还准备了几种其他高级方法来实现此目的。

使用 webpack 或 Vite 从源代码集成编辑器，比如下面的 Vite 的配置示例：

// vite.config.js
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig({
  plugins: [
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
  ],
});

使用 DLL 构建
使用一些与流行 JavaScript 框架的预制集成，比如：Angular、React、Vue2.x、Vue3.x、Next.js、Laravel、 .NET、Drupal 等等。比如下面是 CKEditor 5 与 React 的集成示例：

// App.jsx / App.tsx
import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// 安装适用于 React 的 CKEditor 5 WYSIWYG 编辑器组件以及选择的编辑器版本
class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event) => {
            console.log(event);
          }}
          onBlur={(event, editor) => {
            console.log('Blur.', editor);
          }}
          onFocus={(event, editor) => {
            console.log('Focus.', editor);
          }}
        />
      </div>
    );
  }
}

export default App;

CKEditor 5 版本允许开发者快速轻松地初始化应用程序中多种类型的编辑器之一。同时，CKEditor 5 也是一个用于创建定制富文本编辑解决方案的框架。

更多关于 CKEditor 5 的用法和内容可以参考文末的资料，本文不再过多展开。

参考资料

https://github.com/ckeditor/ckeditor5

https://ckeditor.com/ckeditor-5/

https://ckeditor.com/docs/

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html

https://ckeditor.com/blog/ckeditor-5-v32.0.0-with-new-list-properties-support-for-the-script-tag-and-enhanced-mentions/

ckeditor数据 (ckeditor开源吗)

什么是 CKEditor 5

开始使用 CKEditor 5

CKEditor 5 在线生成器

CKEditor 5 预定义版本

参考资料