【element-tiptap】实现公式编辑

前言：关于公式编辑这个功能，看了好几个开源的库，花费了挺长的时间，之前有一个做到一半又被否掉了。这次实现的是比较简单的公式编辑，并没有很多的开发量，开源的库已经实现的很好了。
tiptap-math
【tiptap-math】还提供了可以在线体验效果的demo tiptap-math-example
从这个demo中大家也能看到，功能很完备，但是公式会以 block 的形式展示，而不是行内形式。为了可以更加灵活的修改代码，我直接把源码放到了项目里，而不是通过 npm 下载的形式，这样就可以直接修改源码
先简单的描述一下这个项目实现的功能吧
1、当输入类似于 $$1*2=1$$ 的用 $$ 包裹的内容时，会将其中的内容自动转换为公式，并且进入编辑模式
2、当公式失去焦点的时候，会从编辑模式转换为展示模式，使用katex(另一个需要安装的依赖)进行公式展示
3、当点击公式的时候，会重新进入编辑模式

1、下载katex

katex 是用来渲染公式的第三方依赖
npm install katex
并且需要在根组件 src/components/element-tiptap.vue 中引入 katex 提供的样式文件

import 'katex/dist/katex.min.css';

2、下载 tiptap-math

将 tiptap-math 的代码下载到本地

然后将 package/src 文件夹放到编辑器项目的 extensions 目录下

然后需要改造一下代码
src/extensions/mathematics/mathematics/index.ts 将组件设置为行内显示的形式

src/extensions/mathematics/mathematics/nodeView.ts 这个文件中所有的 div 都改成 span 标签，以确保生成的公式元素是行内的。

3、样式

正在编辑的公式区域给一个背景颜色
src/styles/editor.scss

.math-selected {
  background: variables.$lighter-primary-color;
  padding: 0.25rem;
  border-radius: 5px;
}

4、引入扩展

src/extensions/index.ts

export { default as Mathematics } from './mathematics/index';

以及在 根组件 src/components/element-tiptap.vue 中引入，不再赘述

5、输出的内容

在浏览器的控制台，通过 editor.editor.getHTML() 可以获取到文档的内容，获取到的这个内容就是如果将来要将文档存到服务端，需要发送到服务端的内容。一个节点输出的内容是通过 renderHTML 方法规定的，如果我们想让公式和其他的节点有所不同，就可以修改这个方法

renderHTML() {
  return ["latex", { class: NODE_CLASS }, 0];
},

原文地址：https://blog.csdn.net/weixin_45855469/article/details/143676666

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！