编译CKEditor5

最新推荐文章于 2024-10-10 08:31:06 发布

道道道人间道

最新推荐文章于 2024-10-10 08:31:06 发布

阅读量695

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/a812073479/article/details/126070751

版权

本文介绍了如何克隆并自定义CKEditor5代码仓库，特别是如何在经典构建中添加Base64图片上传功能。首先，从GitHub获取源码，然后切换到相关目录并安装依赖。接着，编辑ckeditor.js文件引入Base64UploadAdapter，并更新内置插件列表。完成修改后，运行编译命令。如果遇到包重复问题，可以注释掉CKFinder和EasyImage相关导入。参考链接提供了更多细节。

摘要由CSDN通过智能技术生成

1、克隆代码仓库

https://github.com/ckeditor/ckeditor5

2、切换到目录：\ckeditor5\packages\ckeditor5-build-classic

3、安装依赖包

npm install

4、修改代码以支持图片以Base64的方式本地上传[可选]

打开文件packages\ckeditor5-build-classic\src\ckeditor.js，添加以下代码

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';//添加的
//修改后的
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    CloudServices,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    PictureEditing,
    Table,
    TableToolbar,
    TextTransformation,
    Base64UploadAdapter 添加的
];

5、编译

npm run build

6、如果出现build后Ckedit编译提示包重复，无法使用ckedit。需要在注释CKFinder、EasyImage相关代码，如下：

//import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; 
//import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; 
... ....
//CKFinder,  
//EasyImage,

参考链接：

https://www.10qianwan.com/articledetail/746174.html

Predefined builds - CKEditor 5 Documentation