gdxz/case-data-admin

Fork 0

wucongxing8150 ce5ca666f1 修改了编辑框1

2025-08-13 16:41:26 +08:00

6.2 KiB

Raw Permalink Blame History

UEditor 富文本编辑器使用示例

组件介绍

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

基本用法

1. 导入组件

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

2. 在模板中使用

<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>

文章管理中的使用示例

文章编辑表单

<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>

文章列表中的使用

<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. 文件上传

图片上传
附件上传
支持拖拽上传

配置说明

编辑器配置

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

工具栏配置

工具栏包含以下主要功能组：

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

注意事项

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

常见问题

Q: 编辑器不显示怎么办？

A: 检查是否正确导入了组件，确保ID唯一，检查控制台是否有错误信息。

Q: 图片上传失败怎么办？

A: 检查serverUrl配置是否正确，确保后端接口正常工作。

Q: 如何获取纯文本内容？

A: 可以通过正则表达式去除HTML标签：content.replace(/<[^>]*>/g, '')

Q: 编辑器高度可以调整吗？

A: 可以通过initialFrameHeight配置项调整，也支持动态调整。

6.2 KiB Raw Permalink Blame History Unescape Escape