eeed-editor富文本编辑器，实现了latex数学公式渲染、编辑，非常好用！

eeed-editor 是一个基于 Vue 3 + Tiptap 开发的现代化富文本编辑器，专为知识管理、教育场景和复杂内容编辑而设计。

eeed-editor集成了Mathlive，可编辑渲染latex格式公式，并且原生支持大模型生成公式内容复制过来就能渲染。

效果

🚀 快速开始

pnpm add eeed-editor
# 或者
npm install eeed-editor

在 Vue 3 项目中使用：

<template>
  <div >
    <eeedEditor
        :config="defaultConfig"
        :title="title"
        :content="content"
        :onUploadFile="handleUploadFile"
        :onSave="handleSave"
        :onChange="handleChange"/>
  </div>
</template>

<script setup>
import eeedEditor from "eeed-editor";
import "eeed-editor/dist/index.css";
const title = ref("标题") // 编辑器标题
const content = ref("内容"); // 编辑器内容
const defaultConfig = {
  mode: "doc",
  editable: true, // 设置为false表示只读模式，设置为false之后，doc参数中参数可无需设置
  doc: {
    page: {
      mode: "A4",
      style: {
        position: "absolute",
        backgroundColor: "#f5f5f5",
      },
    },
    headerBar: {
      visible: true,
      home: {
        visible: true,
        icon: "back",
        path: "/",
      },
      export: {
        visible: true,
      },
      title: {
        visible: true,
      },
    },
    toolBar: {
      visible: true,
      align: "center",
    },
  },
} as const;

// 上传文件
const handleUploadFile = (file: File) => {
  return new Promise<string>((resolve, reject) => {
    console.log("开始上传文件：", file.name);

    // 模拟异步上传
    setTimeout(() => {
      // 假设上传成功
      const uploadedUrl = `https://xxxxxxxxxxxxxx.png`;
      console.log("上传成功，文件 URL：", uploadedUrl);
      resolve(uploadedUrl);
    }, 1500);
  });
};


// 保存
const handleSave = (title: string, content: string) => {
  console.log(title, content);
};

// 内容改变
const handleChange = (htmlContent: string, textContent: string) => {
  console.log(htmlContent, textContent);
};
<script>