博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CKEditor5基本使用
阅读量:5833 次
发布时间:2019-06-18

本文共 3343 字,大约阅读时间需要 11 分钟。

1. CKEditor5基本介绍

  1. CKEditor5的用法和CKEditor4.0版本完全不同,而网上几乎没有比较完整的教程,而又都是英语,比较难入门,所以在使用CKEditor5的时候踩了许多坑,把自己踩坑过程简单写一下。

2. 基本使用

1. 下载CKEditor5库

官方教程有CDN,npm, Zip download三种,但这三种方式获取的都是打包精简之后的版本,有一些文本编辑特性并没有,如对齐方式、字体大小等。如要更灵活的根据自己的需求添加或删减编辑器的特性,建议从下载。CKEditor5有多个版本,我使用的是从github下载的版本。

2. 开始使用

目录ckeditor5-build-classic-master\build下的ckeditor.js是打包好的库,可以直接引用去使用。 新建一个editor.html,基本使用代码如下:

3. 定制自己的CKEditor5: 增删特性

虽然build目录下的ckeditor.js可以直接使用,但是特性较少。下面开始定制自己的CKEditor5(注:本人对webpack打包不是很熟悉,本章节可能有问题,在打包使用过程遇到了问题,但用一些方法解决了)。

首先需要的工具: npm,webpack;
了解文件:webpack.config.js,package.json,build-config.js,src/ckeditor.js;

 
ckeditor5-build-classic目录结构.png

webpack.config.js文件定义了打包的规则,package.json定义了用的包;build-config.js定义CKEditor5特性,src/ckeditor.js也是定义定义CKEditor5特性,似乎build-config.js和src/ckeditor.js只有一个就够了,我使用的是src/ckeditor.js。

打包之后的工程上传的Github,工程地址:。

3. 上传图片

1. 三种方法概述

官方教程中上传图片有三种方法(1):使用CKEditor自带云服务,图片上传到CKEditor服务器;(2):使用ckfinder框架,在初始化CKEditor时,需要定义 ckfinder的uploadUrl参数,参数为上传到自己服务器的地址;(3)自己写上传功能,定义UploadAdapter,实现upload()和 abort() 方法,并对UploadAdapter进行调用。

方法1大家几乎不用,方法3要自己写上传功能,网上有个教程写得不是很清楚,我也没有很看懂,还存在疑问。代码如下:

class UploadAdapter {        constructor(loader) { this.loader = loader; } upload() { return new Promise((resolve, reject) => { const data = new FormData(); data.append('upload', this.loader.file); data.append('allowSize', 10);//允许图片上传的大小/兆 $.ajax({ url: '/QingXiao/Article/uploadArticleImage4', type: 'POST', data: data, dataType: 'json', processData: false, contentType: false, success: function (data) { if (data.res) { resolve({ default: data.url }); } else { reject(data.msg); } } }); }); } abort() { } } // 加载了适配器 editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{ return new UploadAdapter(loader); };
2. 上传图片方法2详解

网上有网友遇到用方法2上传图片,遇到一个奇葩问题:图片明明已经上传到服务器,返回数据也是按照所谓教程的{"default":"url"}格式。可是依然会报错。报错如下:

 
上传图片报错.png

我也遇到了这个问题,迟迟没有解决,直到今天看了CKEditor中ckfinder的源码才发现问题。阅读ckeditor5-adapter-ckfinder发现,ckfinder也定义了UploadAdapter,同样实现了upload()和 abort() 方法。而问题就出现在upload()方法中。下面贴出upload()方法的源码:

upload() {        return new Promise( ( resolve, reject ) => { this._initRequest(); this._initListeners( resolve, reject ); this._sendRequest(); } ); } _initListeners( resolve, reject ) { const xhr = this.xhr; const loader = this.loader; const t = this.t; const genericError = t( 'Cannot upload file:' ) + ` ${ loader.file.name }.`; xhr.addEventListener( 'error', () => reject( genericError ) ); xhr.addEventListener( 'abort', () => reject() ); xhr.addEventListener( 'load', () => { const response = xhr.response; if ( !response || !response.uploaded ) { return reject( response && response.error && response.error.message ? response.error.message : genericError ); } resolve( { default: response.url } ); } ); // Upload progress when it's supported. /* istanbul ignore else */ if ( xhr.upload ) { xhr.upload.addEventListener( 'progress', evt => { if ( evt.lengthComputable ) { loader.uploadTotal = evt.total; loader.uploaded = evt.loaded; } } ); } }

从上面源码中可以发现,ckfinder请求之后的返回体response应该不为空,且还要包括uploaded和url字段,所以返回数据实际格式应该是{"uploaded":1,"url":"/"},如此就不会出错了。所以,返回的数据并不是按照“教程“”说的那样。

4. 总结

因本人也是前端初学者,如果教程有错误和不足之处,还请海涵并帮忙指出改正,谢谢!

作者:续袁
链接:https://www.jianshu.com/p/47e25447b771
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

因本人也是前端初学者,如果教程有错误和不足之处,还请海涵并帮忙指出改正,谢谢!

转载于:https://www.cnblogs.com/xylic1128/p/9263808.html

你可能感兴趣的文章
react中将px转化为rem或者vw
查看>>
8816
查看>>
avcodec_open2()分析
查看>>
何如获取单选框中某一个选中的值
查看>>
paip.输入法编程----删除双字词简拼
查看>>
Django的Form(二)
查看>>
BZOJ1237 [SCOI2008]配对
查看>>
直接插入排序
查看>>
MySQL 备份错误日志
查看>>
tcp状态
查看>>
sass入门篇
查看>>
QQ悬浮返回顶部
查看>>
weblogic 9.2部署CXF Service应用
查看>>
MySQL建表语句的一些特殊字段
查看>>
DeDe调用指定栏目ID下的文章
查看>>
《Unix环境高级编程》读书笔记 第8章-进程控制
查看>>
腾讯前端二面题目详解
查看>>
RNA-seq标准化
查看>>
mascara-1
查看>>
C#中Time
查看>>