# editor

**Repository Path**: Rain_2022/editor

## Basic Information

- **Project Name**: editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Notion 风格块编辑器

基于 Tiptap 构建的现代化块编辑器，提供类似 Notion 的编辑体验。

## 功能特性

### 🎯 块类型支持
- **标题**: H1、H2、H3 三级标题
- **段落**: 标准文本段落
- **列表**: 无序列表、有序列表、任务列表
- **引用**: 美观的引用块
- **代码**: 代码块和内联代码
- **表格**: 可调整大小的表格
- **分割线**: 水平分割线

### ⚡ 快捷操作
- **斜杠命令**: 输入 `/` 快速选择块类型
- **工具栏**: 直观的工具栏操作
- **键盘快捷键**: 支持撤销、重做等常用操作
- **字数统计**: 实时显示字数和字符数

### 🎨 界面特性
- **Notion 风格**: 现代化的界面设计
- **响应式**: 适配移动端和桌面端
- **自定义主题**: 可扩展的样式系统
- **实时预览**: 内容实时预览功能

## 快速开始

### 安装依赖
```bash
pnpm install
```

### 开发环境运行
```bash
pnpm serve
```

### 构建生产版本
```bash
pnpm build
```

### 代码检查和修复
```bash
pnpm run lint
pnpm run lint:fix
```

### 自定义配置
可以在项目根目录创建 `vue.config.js` 进行自定义配置：

```javascript
// vue.config.js
module.exports = {
  // 开发服务器配置
  devServer: {
    port: 3000,
    open: true,
  },
  
  // 构建优化
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
  
  // 资源处理
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'Notion 风格块编辑器';
      return args;
    });
  },
};
```

## 使用方法

### 基本使用
```vue
<template>
  <NotionEditor 
    v-model="content"
    placeholder="开始输入..."
    @input="handleContentChange"
  />
</template>

<script>
import NotionEditor from "@/components/Editor/index.vue";

export default {
  components: {
    NotionEditor,
  },
  data() {
    return {
      content: '',
    };
  },
  methods: {
    handleContentChange(newContent) {
      console.log('内容变化:', newContent);
      this.content = newContent;
    },
  },
};
</script>
```

### Props 配置

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | String | '' | 编辑器内容 |
| placeholder | String | '输入 / 来选择块类型...' | 占位符文本 |

### 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| input | String (HTML内容) | 内容变化时触发 |

## 操作指南

### 斜杠命令
1. 在空行输入 `/`
2. 会弹出块类型选择器
3. 点击选择需要的块类型

### 工具栏操作
- 使用顶部工具栏快速切换块类型
- 支持撤销、重做操作
- 实时查看当前块类型状态

### 键盘快捷键
- `Ctrl/Cmd + Z`: 撤销
- `Ctrl/Cmd + Shift + Z`: 重做
- `Esc`: 关闭块选择器

## 技术栈

- **Vue 2.x**: 前端框架
- **Tiptap 2.x**: 富文本编辑器
- **SCSS**: 样式预处理
- **Vue CLI**: 项目脚手架

## 项目结构

```
src/
├── components/
│   └── Editor/
│       └── index.vue          # 编辑器主组件
├── App.vue                    # 应用主组件
├── main.js                    # 应用入口
└── store/
    └── index.js               # Vuex 状态管理
```

## 自定义扩展

编辑器基于 Tiptap 构建，可以轻松扩展新的功能：

### 添加新的块类型
```javascript
// 在编辑器配置中添加新的扩展
import CustomExtension from '@tiptap/extension-custom'

this.editor = new Editor({
  extensions: [
    // ... 现有扩展
    CustomExtension,
  ],
})
```

### 自定义样式
编辑器的样式使用 SCSS 编写，可以通过修改相应的类名来自定义外观。

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！