安装

Elegant Editor 提供了多个包，你可以根据项目需求选择合适的包进行安装。

包说明

Elegant Editor 包含以下包：

包名	用途	大小
@frame-flex/core	框架无关的核心编辑器	~59 KB
@frame-flex/vue	Vue 3 适配器和组件	~10 KB
@frame-flex/exporters	导出工具 (HTML/DOCX/XML/JSON)	~12 KB

Vue 3 项目

如果你使用 Vue 3，推荐安装 Vue 包：

pnpm

pnpm add @frame-flex/vue @frame-flex/exporters

npm

npm install @frame-flex/vue @frame-flex/exporters

yarn

yarn add @frame-flex/vue @frame-flex/exporters

提示

@frame-flex/vue 会自动将 @frame-flex/core 作为依赖安装。

原生 JavaScript 项目

如果你使用原生 JavaScript 或其他框架，安装核心包：

pnpm

pnpm add @frame-flex/core @frame-flex/exporters

npm

npm install @frame-flex/core @frame-flex/exporters

yarn

yarn add @frame-flex/core @frame-flex/exporters

可选依赖

某些功能需要额外的依赖：

数学公式支持

如果需要使用数学公式功能，需要安装 KaTeX：

pnpm add katex

代码高亮

如果需要代码块语法高亮，需要安装 lowlight：

pnpm add lowlight

CDN 使用

你也可以通过 CDN 直接在浏览器中使用（不推荐用于生产环境）：

<!-- Vue 3 版本 -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/@frame-flex/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/@frame-flex/vue/dist/vue.css">

<!-- 核心版本 -->
<script src="https://unpkg.com/@frame-flex/core"></script>
<link rel="stylesheet" href="https://unpkg.com/@frame-flex/core/dist/index.css">

构建工具配置

Vite

Elegant Editor 与 Vite 完美配合，无需额外配置：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

Webpack

如果使用 Webpack，需要配置处理 CSS：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Nuxt 3

在 Nuxt 3 中使用需要将组件标记为客户端组件：

<template>
  <ClientOnly>
    <RichTextEditor v-model="content" />
  </ClientOnly>
</template>

<script setup lang="ts">
import { RichTextEditor } from '@frame-flex/vue';
import '@frame-flex/vue/styles';
</script>

TypeScript 配置

Elegant Editor 提供完整的 TypeScript 类型定义。确保你的 tsconfig.json 包含以下配置：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "types": ["vite/client"],
    "strict": true
  }
}

版本要求

确保你的开发环境满足以下要求：

• Node.js: >= 18.0.0
• Vue: >= 3.3.0 (如果使用 Vue 包)
• TypeScript: >= 5.0.0 (可选)

下一步

安装完成后，查看：

• 快速开始 - 开始使用编辑器
• 编辑器实例 - 了解编辑器配置
• Vue 组件 - Vue 组件详解