eeed-editor

eeed-editor

eeed-editor 是一个基于 Vue 3 + Tiptap 的极简富文本编辑器，支持：

• 可编辑与只读模式
• 文档参数和自定义样式
• 头部栏、工具栏可定制
• 文件上传、保存回调
• 支持数学公式、Mermaid 图表
• 轻量、可嵌入多种应用场景
• 支持自定义工具栏
• 可导出 word 文档

安装

在你的 Vue 3 项目中使用 pnpm 安装：

pnpm add eeed-editor

或者使用 npm 安装：

npm install eeed-editor

使用

<template>
  <eeedEditor :config="defaultConfig" :title="title" :content="content" :onUploadFile="handleUploadFile" :onSave="handleSave" :onChange="handleChange"/>
</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>