# UEditor 富文本编辑器使用示例

## 组件介绍

UEditor 是一个基于 vue-ueditor-wrap 的富文本编辑器组件，专门为文章管理、内容编辑等场景设计。

## 基本用法

### 1. 导入组件

```vue
import UEditor from '/@/components/business/ueditor.vue';
```

### 2. 在模板中使用

```vue
<template>
  <div>
    <!-- 基本用法 -->
    <UEditor v-model="content" :id="'editor_id'" />
    
    <!-- 带标签的表单用法 -->
    <a-form-item label="文章内容" name="articleContent">
      <UEditor v-model="form.articleContent" :id="'article_content'" />
    </a-form-item>
    
    <!-- 条件显示 -->
    <UEditor 
      v-if="showEditor" 
      v-model="modalForm.content" 
      :id="'modal_content'" 
    />
  </div>
</template>
```

## 文章管理中的使用示例

### 文章编辑表单

```vue
<template>
  <a-modal title="编辑文章" :open="visible" @cancel="onClose">
    <a-form :model="form" :rules="rules">
      <a-form-item label="标题" name="title">
        <a-input v-model:value="form.title" placeholder="请输入文章标题" />
      </a-form-item>
      
      <a-form-item label="内容" name="content">
        <div class="editor-container">
          <div class="editor-tip">请在此处编辑文章内容，支持富文本格式、图片上传、表格等功能</div>
          <UEditor v-model="form.content" :id="'article_content'" />
        </div>
      </a-form-item>
    </a-form>
    
    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import UEditor from '/@/components/business/ueditor.vue';

const visible = ref(false);
const form = reactive({
  title: '',
  content: ''
});

const rules = {
  title: [{ required: true, message: '请输入文章标题' }],
  content: [{ required: true, message: '请输入文章内容' }]
};

const onSubmit = async () => {
  // 表单验证和提交逻辑
  console.log('文章内容:', form.content);
};

const onClose = () => {
  visible.value = false;
};
</script>

<style scoped>
.editor-container {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
  min-height: 200px;
}

.editor-tip {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #8c8c8c;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
```

### 文章列表中的使用

```vue
<template>
  <div>
    <a-button type="primary" @click="showAddModal">新建文章</a-button>
    
    <a-table :columns="columns" :dataSource="articleList">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="showEditModal(record)">编辑</a-button>
            <a-button type="link" @click="showViewModal(record)">查看</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    
    <!-- 新建/编辑模态框 -->
    <article-form-modal 
      ref="formModalRef"
      @reload="loadArticleList"
    />
    
    <!-- 查看模态框 -->
    <article-view-modal 
      ref="viewModalRef"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ArticleFormModal from './components/article-form-modal.vue';
import ArticleViewModal from './components/article-view-modal.vue';

const formModalRef = ref();
const viewModalRef = ref();
const articleList = ref([]);

const showAddModal = () => {
  formModalRef.value.show();
};

const showEditModal = (record) => {
  formModalRef.value.show(record);
};

const showViewModal = (record) => {
  viewModalRef.value.show(record);
};

const loadArticleList = () => {
  // 加载文章列表
};

onMounted(() => {
  loadArticleList();
});
</script>
```

## 组件特性

### 1. 自动保存
- 支持60秒自动保存
- 防止内容丢失

### 2. 丰富的工具栏
- 文本格式化（加粗、斜体、下划线等）
- 段落样式（对齐、缩进、行距等）
- 图片上传和管理
- 表格插入和编辑
- 链接和锚点
- 代码插入
- 内容导入（支持Word、Markdown）

### 3. 响应式设计
- 自适应宽度
- 可调整高度
- 支持全屏编辑

### 4. 文件上传
- 图片上传
- 附件上传
- 支持拖拽上传

## 配置说明

### 编辑器配置

```javascript
const editorConfig = {
  serverUrl: '/admin/api/admin/system/editor', // 文件上传接口
  initialFrameHeight: 500, // 编辑器高度
  initialFrameWidth: '100%', // 编辑器宽度
  enableAutoSave: true, // 启用自动保存
  autoSaveInterval: 60000, // 自动保存间隔（毫秒）
  enableContextMenu: true, // 启用右键菜单
  catchRemoteImageEnable: false, // 是否抓取远程图片
};
```

### 工具栏配置

工具栏包含以下主要功能组：
- **基础编辑**：撤销、重做、格式刷等
- **文本格式**：字体、字号、颜色、背景色等
- **段落格式**：对齐、缩进、行距等
- **插入功能**：图片、视频、表格、链接等
- **高级功能**：代码、公式、模板等

## 注意事项

1. **ID唯一性**：每个UEditor实例必须有唯一的ID
2. **数据绑定**：使用v-model进行双向数据绑定
3. **表单验证**：在表单验证规则中正确处理富文本内容
4. **内容处理**：提交时注意HTML内容的处理和安全过滤
5. **性能优化**：避免在同一个页面中使用过多编辑器实例

## 常见问题

### Q: 编辑器不显示怎么办？
A: 检查是否正确导入了组件，确保ID唯一，检查控制台是否有错误信息。

### Q: 图片上传失败怎么办？
A: 检查serverUrl配置是否正确，确保后端接口正常工作。

### Q: 如何获取纯文本内容？
A: 可以通过正则表达式去除HTML标签：`content.replace(/<[^>]*>/g, '')`

### Q: 编辑器高度可以调整吗？
A: 可以通过initialFrameHeight配置项调整，也支持动态调整。

## 更多示例

更多使用示例请参考：
- `src/views/business/case-clinical-article/case-clinical-article-form.vue`
- `src/components/business/ueditor.vue`