ckeditor5富文本数学化学方程式

最新推荐文章于 2025-05-11 20:08:47 发布

原创

最新推荐文章于 2025-05-11 20:08:47 发布 · 3.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#ckeditor #前端 #javascript

本文介绍了在使用CKEditor 5时配置化学数学方程式的方法。通过CKEditor 5在线生成器，按步骤选择编辑器类型、插件等并下载文件。还说明了如何将其应用到demo事例和Vue项目中，不过该方法打包慢且图片按钮有bug，作者正修正。

我们使用ckeditor5的时候会用到化学数学方程式的业务，如何构成呢？
官方文档：https://ckeditor.com/docs/ckeditor5/latest/features/math-equations.html 在这里插入图片描述
其实官方文档我看了看配置这种数学和化学方程需要自定义配置编辑器，能力有限没看懂。
但是找到了一个快捷的方法：https://ckeditor.com/ckeditor-5/online-builder/，这是CKEditor 5在线生成器

进入步骤了：1.打开https://ckeditor.com/ckeditor-5/online-builder/选择编辑器类型（我选择的经典）
2.进入了选择编辑器插件页面，我们在插件中寻找数学类型点击加按钮
在这里插入图片描述

3.选择完毕点击下一步，此时别忘记把化学和数学方程式的图表放到工具栏的项目里

4.点击下一步：选择语言
5.点击下一步，下载
以上这部完成之后我们要应用到demo事例中和Vue项目中
首先把下载的文件解压放在一个文件夹里
一.demon事例中
在文件夹中新建一个页面（guker.html）
qingshi

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./build/ckeditor.js"></script>

<body>
  <div id="ed