@axewo/fin-editor

Fin UI 金融富文本编辑器 - 统一完整包

简介

@axewo/fin-editor 是一个基于 TipTap 的 Vue 3 富文本编辑器，专为金融领域设计。所有功能集成在一个包中，无需安装多个依赖。

本包整合了：

• 核心编辑器逻辑 (原 @axewo/fin-editor-core)
• TipTap 扩展插件集 (原 @axewo/fin-editor-extensions)
• 主题样式库 (原 @axewo/fin-editor-theme)
• Vue 3 组件 (原 @axewo/fin-editor-vue)

安装

# 使用 pnpm
pnpm add @axewo/fin-editor

# 使用 npm
npm install @axewo/fin-editor

# 使用 yarn
yarn add @axewo/fin-editor

Peer Dependencies

确保项目中已安装以下依赖：

pnpm add vue@^3.4.0 @tiptap/vue-3@^2.10.0 element-plus@^2.8.0

使用

基础用法

<script setup lang="ts">
import { FinEditor } from '@axewo/fin-editor'
import '@axewo/fin-editor/dist/style.css'
import '@axewo/fin-editor/dist/theme/light.css'

const content = ref('')
</script>

<template>
  <FinEditor v-model="content" />
</template>

导入样式

// Vue 组件样式（必需）
import '@axewo/fin-editor/dist/style.css'

// 主题样式（按需选择一个）
import '@axewo/fin-editor/dist/theme/light.css'  // 浅色主题
import '@axewo/fin-editor/dist/theme/dark.css'   // 深色主题
import '@axewo/fin-editor/dist/theme/print.css'  // 打印样式
import '@axewo/fin-editor/dist/theme/all.css'    // 所有主题样式

高级用法

自定义配置

<script setup lang="ts">
import { FinEditor } from '@axewo/fin-editor'
import type { EditorConfig } from '@axewo/fin-editor'

const config: Partial<EditorConfig> = {
  mode: 'edit',
  theme: 'light',
  locale: 'zh-CN',
  toolbar: {
    items: ['bold', 'italic', 'underline', 'link', 'image']
  }
}

const content = ref('<p>初始内容</p>')
</script>

<template>
  <FinEditor 
    v-model="content"
    :config="config"
    show-toolbar
    show-word-count
    body-height="500px"
    @save="handleSave"
  />
</template>

使用编辑器实例

<script setup lang="ts">
import { ref } from 'vue'
import { FinEditor, EditorInstance } from '@axewo/fin-editor'

const editorRef = ref<InstanceType<typeof FinEditor>>()

function handleReady(editor: EditorInstance) {
  console.log('Editor ready:', editor)
}

function insertText() {
  editorRef.value?.executeCommand('insertContent', '<p>插入的内容</p>')
}

function getContent() {
  const html = editorRef.value?.getHTML()
  const text = editorRef.value?.getText()
  const json = editorRef.value?.getJSON()
  console.log({ html, text, json })
}
</script>

<template>
  <div>
    <button @click="insertText">插入文本</button>
    <button @click="getContent">获取内容</button>
    <FinEditor ref="editorRef" @ready="handleReady" />
  </div>
</template>

按模块导入

如果你只需要部分功能（如在 Node.js 环境中使用编辑器核心逻辑）：

// 只导入核心功能
import { EditorInstance } from '@axewo/fin-editor/core'

// 只导入扩展
import { BoldExtension, ItalicExtension } from '@axewo/fin-editor/extensions'

// 只导入 Vue 组件
import { FinEditor, useEditor } from '@axewo/fin-editor/vue'

API

FinEditor 组件 Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '' | 编辑器内容（HTML） | | config | Partial<EditorConfig> | {} | 编辑器配置 | | mode | 'edit' \| 'view' | 'edit' | 编辑模式 | | theme | 'light' \| 'dark' | 'light' | 主题 | | locale | 'zh-CN' \| 'en-US' | 'zh-CN' | 语言 | | showToolbar | boolean | true | 显示工具栏 | | showLabels | boolean | false | 工具栏显示文字 | | showStatusBar | boolean | false | 显示状态栏 | | showWordCount | boolean | true | 显示字数统计 | | showFullscreenBtn | boolean | true | 显示全屏按钮 | | showBubble | boolean | true | 显示气泡菜单 | | bodyHeight | string | '400px' | 编辑区域高度 |

FinEditor 组件 Events

| 事件 | 参数 | 说明 | |------|------|------| | update:modelValue | (content: string) | 内容变化 | | save | (content: string) | 保存事件（Ctrl+S） | | ready | (editor: EditorInstance) | 编辑器就绪 | | mode-change | (mode: EditorMode) | 模式切换 |

FinEditor 组件方法

通过 ref 访问：

const editorRef = ref<InstanceType<typeof FinEditor>>()

// 获取内容
editorRef.value?.getHTML()      // 获取 HTML
editorRef.value?.getText()      // 获取纯文本
editorRef.value?.getJSON()      // 获取 JSON
editorRef.value?.getContent()   // 获取 HTML（同 getHTML）

// 设置内容
editorRef.value?.setContent('<p>新内容</p>')

// 执行命令
editorRef.value?.executeCommand('bold')
editorRef.value?.executeCommand('setImage', { src: 'url', alt: 'desc' })

// 检查命令状态
editorRef.value?.isCommandActive('bold')  // 当前是否加粗

// 获取编辑器实例
const editor = editorRef.value?.getEditor()

开发

# 安装依赖
pnpm install

# 构建
pnpm build

# 开发模式（监听变化）
pnpm dev

# 运行测试
pnpm test

# 代码检查
pnpm lint

# 清理构建产物
pnpm clean

项目结构

packages/editor/
├── src/
│   ├── core/          # 编辑器核心逻辑
│   ├── extensions/    # TipTap 扩展插件
│   ├── theme/         # 主题样式（SCSS）
│   ├── vue/           # Vue 3 组件
│   └── index.ts       # 主入口
├── dist/              # 构建产物
├── package.json
├── vite.config.ts
└── README.md

许可证

MIT

作者

AxeWo