vue 使用wangeditor实现数学公式+富文本编辑器

需求背景

业务需要

使用技术栈及插件

• vue3+vit
• wangEditor编辑器+kityformula函数编辑器

引言

在Web开发中，富文本编辑器是常见的组件之一，它允许用户在网页上编辑并格式化文本。然而，当需要在富文本编辑器中插入数学公式时，就需要借助专门的公式编辑器。wangEditor作为一款轻量、简洁且功能强大的Web富文本编辑器，通过集成kityformula可以很好地满足这一需求。本文将详细介绍如何在wangEditor中集成这款公式编辑器。

wangEditor

• 官网：www.wangEditor.com
• 文档：www.wangEditor.com/doc

wangEditor是一个基于javascript和css开发的Web富文本编辑器，以其轻量、简洁、易用和开源免费的特点受到广大开发者的喜爱。它支持丰富的文本编辑功能，如文字加粗、字号调整、颜色设置、插入图片、表格等。同时，wangEditor也提供了丰富的扩展接口，允许开发者根据需求定制功能。

kityformula

• github：github.com/fex-team/kityformula

kityformula是一款开源的数学公式编辑器，支持LaTeX语法，可以将LaTeX代码渲染成数学公式。它通常用于网页中嵌入数学公式的编辑和显示。

呈现效果

插入数学公式

实现过程

参考一位大佬文章wangEditor公式编辑器kityformula + myscript-math-web - 掘金

一、安装依赖

1. npm install @wangeditor/editor
2. npm install katex
3. npm install jquery

二、注册插件

import {
   Boot, createEditor, createToolbar} from '@wangeditor/editor';
import formulaModule from "@wangeditor/plugin-formula";
// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(formulaModule);

三、配置编辑器

接下来，配置编辑器和工具栏，使其支持插入公式：

/**
 * 工具栏配置
 * @type {
   {excludeKeys: string[], insertKeys: {keys: string[], index: number}}}
 */
const toolbarConfig = {
   
  // 去除不需要的菜单
  excludeKeys: ["fullScreen", "emotion","group-image", "group-video", "insertTable", "|", "insertLink", "codeBlock", "group-more-style", "bulletedList", "todo", "divider", "fontFamily"],
  insertKeys: {
   
    index: 1, // 自定义
    keys: ['kityFormula'],
  }
}

/**
 * 编辑器配置
 * @type {
   {placeholder: string, hoverbarKeys: {formula: {menuKeys: string[]}}}}
 */
const editorConfig = {
   
  // 选中公式时的悬浮菜单
  hoverbarKeys: {
   
    formula: {
   
      menuKeys: ['kityFormula'],
    },
  },
  placeholder: '在此输入笔记内容'
}

// 创建编辑器和工具栏
const editor = createEditor({
   
    selector: '#editor-container',
    config: editorConfig,
    html: ``,
  });

  const toolbar = createToolbar({
   
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig
  });

四、加入数学公式

创建kityformula.js文件，具体代码如下，注意图标引入路径
图标文件内代码

/** 键入公式 */
export const formulaIcon =
    '<svg t="1682415575656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8100" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.383 461.687c6.417-6.417 12.834-12.8 19.217-12.8h89.6c6.383 0 12.8-6.382 12.8-12.765v-102.23c0-6.417-6.417-12.8-12.8-12.8H908.8c-6.417 0-19.183 6.383-19.183 12.8L780.8 448.922c-6.383 6.348-12.8 6.348-12.8 0l-57.583-115.03c-6.417-6.417-12.8-12.8-19.217-12.8H524.8c-6.383 0-12.8 6.383-12.8 12.8v102.23c0 6.383 6.417 12.765 12.8 12.765h102.4c6.417 0 12.8 6.383 19.183 12.8l38.4 83.081v19.149l-115.2 134.178c-6.383 0-12.766 6.417-19.183 6.417h-89.6c-6.383 0-12.8 6.383-12.8 12.766v102.23c0 6.382 6.417 12.8 12.8 12.8h102.4c6.383 0 19.183-6.418 19.183-12.8L729.6 653.38c6.417-6.383 12.8-6.383 12.8 0l83.183 166.127c0 6.383 12.8 12.8 19.217 12.8h102.4a13.756 13.756 0 0 0 12.8-12.8v-102.23a13.756 13.756 0 0 0-12.8-12.765h-38.4c-6.417 0-12.8-6.417-19.183-12.8l-64.034-127.795v-19.149l76.8-83.08zM377.617 65.502C345.6 91.068 313.583 129.399 294.4 193.297l-31.983 127.795H76.8a13.756 13.756 0 0 0-12.8 12.8v102.23c0 6.383 6.383 12.765 12.8 12.765h153.6l-96.017 383.42C115.2 908.971 64 896.205 64 896.205H0V1024h64c51.2 0 102.4-6.383 128-38.332 32.017-31.949 51.2-89.463 64-153.36l96.017-383.42H499.2c6.383 0 12.8-6.383 12.8-12.766v-102.23c0-6.417-6.417-12.8-12.8-12.8H384l32.017-121.412c6.383-19.149 38.4-51.098 57.583-63.898C543.983 84.651