1. 安装依赖 确保项目已安装 vue3、element-plus 及富文本编辑器依赖（以 @wangeditor/editor 为例）：

npm install @wangeditor/editor @wangeditor/editor-for-vue
npm install axios  # 用于文件上传

2. 富文本编辑器封装 创建 RichTextEditor.vue 组件naua.kk-gov.cn：

<template>
  <div class="editor-container">
    <toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      mode="default"
    />
    <editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup>
import { ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const props = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])

const editorRef = shallowRef()
const valueHtml = ref(props.modelValue || '')

const toolbarConfig = { excludeKeys: ['fullScreen'] }
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }

// 上传图片配置
editorConfig.MENU_CONF['uploadImage'] = {
  server: '/api/upload/image',
  fieldName: 'file',
  maxFileSize: 10 * 1024 * 1024 // 10M
}

const handleCreated = (editor) => {
  editorRef.value = editor
}

const handleChange = (editor) => {
  emit('update:modelValue', valueHtml.value)
}

watch(() => props.modelValue, (newVal) => {
  if (newVal !== valueHtml.value) {
    valueHtml.value = newVal
  }
})

// 销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value == null) return
  editorRef.value.destroy()
})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

3. 文件上传封装 创建 FileUpload.vue 组件idvi.tiyu-gov.cn：

<template>
  <el-upload
    v-model:file-list="fileList"
    :action="uploadUrl"
    :limit="limit"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    list-type="picture-card"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: { type: [String, Array], default: '' },
  limit: { type: Number, default: 1 }
})

const emit = defineEmits(['update:modelValue'])
const uploadUrl = ref('/api/upload/file')
const fileList = ref([])

// 初始化文件列表
watch(() => props.modelValue, (val) => {
  if (!val) return
  if (typeof val === 'string') {
    fileList.value = [{ url: val }]
  } else if (Array.isArray(val)) {
    fileList.value = val.map(url => ({ url }))
  }
}, { immediate: true })

const handleSuccess = (response, file) => {
  const url = response.data.url
  if (props.limit === 1) {
    emit('update:modelValue', url)
  } else {
    const urls = fileList.value.map(item => item.url || item.response?.data.url).filter(Boolean)
    emit('update:modelValue', urls)
  }
}

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过10MB!')
  }
  return isImage && isLt10M
}
</script>

4. 新闻资讯管理页面集成 ijth.zqw-gov.cn创建 NewsManagement.vue：

<template>
  <el-card>
    <el-form :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      
      <el-form-item label="封面图">
        <FileUpload v-model="form.cover" />
      </el-form-item>
      
      <el-form-item label="内容">
        <RichTextEditor v-model="form.content" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import RichTextEditor from '@/components/RichTextEditor.vue'
import FileUpload from '@/components/FileUpload.vue'
import { createNews } from '@/api/news'

const form = ref({
  title: '',
  cover: '',
  content: ''
})

const handleSubmit = async () => {
  try {
    await createNews(form.value)
    ElMessage.success('创建成功')
  } catch (error) {
    ElMessage.error(error.message)
  }
}
</script>

5. API接口示例 创建 src/api/news.js：

import request from '@/utils/request'

export function createNews(data) {
  return request({
    url: '/news',
    method: 'post',
    data
  })
}

关键配置说明

富文本编辑器

• 通过 v-model 实现双向绑定
• 图片上传配置在 editorConfig.MENU_CONF
• 自动销毁编辑器ugsj.kk-gov.cn避免内存泄漏

文件上传组件

• 支持单文件/多文件上传
• 自动将Element Upload组件返回格式转换为纯URL数组
• 包含文件类型和大小验证

注意事项

1. 后端接口需实现文件上传功能（返回格式需包含 url 字段）
2. 富文本内容存储建议使用HTML格式
3. 生产环境需添加更严格的安全过滤（如XSS防护）