在项目中开始使用 CKEditor5 富文本编辑器

CKEditor 是新一代的 FCKeditor,是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。


要在项目中引入 CKEditor5,有几种方案可供选择:

  1. 通过 CDN 引入;
  2. 下载 ZIP 压缩包;
  3. 在线构建生成离线静态资源;
  4. 通过 NPM 或 YARN 安装依赖包后,本地自定义构建(推荐);

一、通过 CDN 引入

这种方式可以直接从 CKEditor CDN 加载到页面,该 CDN 针对全球超快速内容交付进行了优化。使用 CDN 时,实际上不需要下载。

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

代码示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CKEditor</title>
	<script src="https://cdn.ckeditor.com/ckeditor5/31.1.0/classic/ckeditor.js"></script>
</head>
<body>
	
	<div id="editor">This is some sample content.</div>

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

</body>
</html>

二、下载 ZIP 压缩包

https://ckeditor.com/ckeditor-5/download 这个网页中选择你需要的构建类型(编辑器类型),例如 CKEditor 5 Classic,然后下载压缩包解压到你的项目中,并在网页中引入 ckeditor.js 和 CSS:

压缩包内包含的文件:

  • ckeditor.js – 即用型编辑器包,包含编辑器和所有插件
  • ckeditor.js.map – 编辑器包的源映射
  • translations/– 编辑器 UI 语言
  • README.md
  • LICENSE.md

三、在线构建生成离线静态资源

CKeditor5 在线构建页面:https://ckeditor.com/ckeditor-5/online-builder

在线构建页面,可以选择自己需要的编辑器款式和所需的插件后,生成自定义后的静态离线资源包:

选择编辑器款式:

选择所需插件后点击下一步:

通过拖拽移动工具图标自定义编辑器工具栏,然后下一步:

选择编辑器显示语言后进入下一步:

开始构建,等待构建完成后下载:

最后,将下载的构建包解压,build 目录为已经通过 webpack 编译好了的,可直接在项目中引入使用,你也可以继续在本地通过 webpack 自定义编译构建!

四、通过 NPM 或 YARN 安装依赖包后,本地自定义构建

推荐在项目中使用这种方式引入 CKEditor,推荐理由:
1. 可通过在终端一行命令构建完成到指定目录下;
2. 和 CKEditor 在线构建一样,可以自定义选择编辑器类型和所需插件;
3. 可编写自定义插件后一同构建;

本地自定义构建依赖 webpack 构建工具,具体的实现方案篇幅较长,将在下一篇文章里详细讲解!

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!