@ximax/editor

PIT UI 组件编辑器包，提供多种编辑器组件。

功能特性

• JSON 编辑器: 基于 vanilla-jsoneditor 的 JSON 编辑组件
• JSON 查看器: 基于 vue3-json-viewer 的 JSON 展示组件
• Markdown 编辑器: 基于 v-md-editor 的 Markdown 编辑组件
• Monaco 编辑器: 基于 Monaco Editor 的代码编辑组件
• Monaco SQL 编辑器: 支持 SQL 语法高亮的代码编辑器
• Wang 编辑器: 基于 WangEditor 的富文本编辑器
• 简单编辑器: 轻量级文本编辑组件
• Java 对话框: Java 代码编辑对话框组件

安装

npm install @ximax/editor
# 或
yarn add @ximax/editor
# 或
pnpm add @ximax/editor

使用方法

// 导入所有编辑器组件
import { BasicJsonEditor, BasicJsonViewer, BasicMarkdownEditor, BasicMonaco, BasicMonacoSql, BasicWangEditor, BasicSimpleEditor, BasicJavaDialog } from '@ximax/editor'

// 或者按需导入特定组件
import { BasicJsonEditor } from '@ximax/editor/basic-json-editor'

样式导入

// 导入所有样式（传统方式）
import '@ximax/editor/style'

// 按需导入特定组件样式
import '@ximax/editor/basic-json-editor/style'
import '@ximax/editor/basic-markdown-editor/style'
import '@ximax/editor/basic-wang-editor/style'

// 动态导入样式
const loadStyles = async (editorType: string) => {
  switch (editorType) {
    case 'json':
      await import('@ximax/editor/basic-json-editor/style')
      break
    case 'markdown':
      await import('@ximax/editor/basic-markdown-editor/style')
      break
  }
}

💡 提示: 每个组件都有独立的样式文件，支持按需加载和动态导入，可以有效减少包体积。

样式分离

本包支持组件样式分离打包，每个组件都有独立的样式文件：

可用的样式入口点

• @ximax/editor/basic-json-editor/style - JSON 编辑器样式
• @ximax/editor/basic-json-view/style - JSON 视图样式
• @ximax/editor/basic-json-viewer/style - JSON 查看器样式
• @ximax/editor/basic-markdown-editor/style - Markdown 编辑器样式
• @ximax/editor/basic-monaco/style - Monaco 编辑器样式
• @ximax/editor/basic-monaco-sql/style - Monaco SQL 编辑器样式
• @ximax/editor/basic-wang-editor/style - Wang 编辑器样式
• @ximax/editor/basic-simple-editor/style - 简单编辑器样式
• @ximax/editor/basic-java-dialog/style - Java 对话框样式

样式分离的优势

1. 按需加载: 只导入需要的组件样式，减少包体积
2. 性能优化: 避免加载不必要的样式文件
3. 灵活性: 支持动态导入和条件导入
4. 维护性: 每个组件的样式独立管理

详细使用说明请参考 STYLE_USAGE.md 文件。

开发

构建

# 构建生产版本
pnpm build

# 构建类型定义
pnpm build:types

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

构建配置

本项目使用 Vite 进行构建，支持：

• ES 模块 和 CommonJS 格式输出
• TypeScript 类型声明文件自动生成
• Vue 3 和 JSX 支持
• Tree-shaking 优化
• 外部依赖 处理

构建输出

构建完成后，dist 目录将包含：

• index.js / index.cjs - 主入口文件
• index.d.ts - TypeScript 类型声明
• 各个组件的独立构建文件
• 对应的类型声明文件

依赖说明

外部依赖

以下依赖被标记为外部依赖，不会被打包：

• vue - Vue 3 框架
• @ximax/hooks - 内部 hooks 包
• @ximax/types - 内部类型包
• @ximax/ui - 内部 UI 组件包
• @ximax/utils - 内部工具包
• 各种编辑器库（monaco-editor、wang-editor 等）

开发依赖

• vite - 构建工具
• @vitejs/plugin-vue - Vue 3 插件
• @vitejs/plugin-vue-jsx - JSX 支持插件
• vite-plugin-dts - TypeScript 类型声明生成插件

许可证

MIT