ckeditor5 使用方法 + 上传图片

最新推荐文章于 2025-09-07 04:48:46 发布

原创

最新推荐文章于 2025-09-07 04:48:46 发布 · 6.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何在CKEditor5中实现自定义图片上传功能，包括使用在线生成器下载CKEditor5，初始化编辑器，以及通过适配器实现图片上传至自定义服务器的过程。

最近ckedito 发布了一个版本 ckedito 5，这个版本有一个强大的功能，它可以复制world文档直接粘贴在编辑器里，并且可以保存world里的样式和图片（重点）。这里有一个重点，就是上传图片，ckedito 5上传图片有三种方式，其中最常用的方式有两种：1.使用ckedito官方服务器（不推荐，此方法要收费）、2.自定义上传服务器。
本文章主要写的就是第二种方法。

使用方法

1.下载ckedito 5

此处推荐官方的在线生成器
话不多说上链接：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
1.进入官网点击 builds =》Installation =》 Online builder 进入在线生成器
在这里插入图片描述
2.进入之后选择 Classic 然后一路下一步

2.ckedito 初始化

下载完成之后在自己的项目里引入ckedito. js文件
在这里插入图片描述
html代码：
创建一个容器 class名字自定义（我的是 class=‘comment’）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body >
		<div class='comment'>
			 
		</div>
		<button onClick='clickMe()'>dianji</button>
	</body>
	<script src='./jquery.min.js'></script>
	<script src="./build/ckeditor.js"></script>
	<script src='./demo.js'></scrip

最低0.47元/天解锁文章

5 条评论

略略大魔王丶 2022.11.07
百度了好久，终于看到有用的了

m0_62157475 2022.08.12
麻烦问下作者大大，如果需求是只准用户上传一张图片该如何实现呢
- 雾里桃花回复m0_62157475 2022.08.12
  1.取到当前编辑器中的内容 2.判断该条内容里使用出现过img标签 3.在适配器里做判断，如果img标签出现过，则抛出一个异常警告，并阻止图片上传 [code=javascript] class UploadAdapter { constructor(loader) { this.loader = loader; } upload() { return new Promise((resolve, reject) => { //在此处做判断 let str = window.editor.getData(); let flag = str.indexOf('<img'); if(flag != -1) { reject('只能上传一张图片') return false; } }); } } [/code]

qq1599327 2021.12.24
感谢博主，上传测试已成功。只是最后editer5需要的数据格式有点不一样。官网提示格式是这个：{ default: 'http://example.com/images/image–default-size.png' }
- 雾里桃花回复qq1599327 2021.12.24
  格式无所谓啦，只要能够实现功能就是棒棒的