在很多业务系统中，有时候需要编辑富文本，就是包括图文消息排版等处理，图片有时候需要结合后端实现图片的上传处理，在本篇随笔中，结合@wangeditor的富文本编辑器和上传文件的处理的封装，来实现系统新闻资讯的管理，可以实现图片上传和图文排版的常规操作。
1、@wangeditor的富文本编辑器
该富文本编辑器控件的官网地址：https://www.wangeditor.com/，官网提供很详尽的使用介绍。
对应Vue版本的编辑器控件是：@wangeditor/editor-for-vue
因此我们可以通过pnpm 、npm等安装管理工具进行组件的安装。
pnpm install @wangeditor/editor-for-vue --save
其他的处理就和常规的组件使用差不多了。我们来大概介绍下使用的案例。
界面代码
<template> <div style="border: 1px solid #ccc;"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" /> </div> </template>
脚本控制代码
<script> import Vue from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default Vue.extend({ components: { Editor, Toolbar }, data() { return { editor: null, html: '<p>hello</p>', toolbarConfig: {}, editorConfig: { placeholder: '请输入内容...' }, mode: 'default', // or 'simple' } }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 }, }, mounted() { // 模拟 ajax 请求，异步渲染编辑器 setTimeout(() => { this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>' }, 1500) }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁编辑器 }, }) </script>
通过官方案例的指引，我们可以对其工具栏、编辑器配置、菜单、以及相应API进行处理即可。
界面效果如下所示。
2、自定义上传文件的处理
一般富文本的编辑器，都会提供相应的图片上传接口处理，该@wangeditor的富文本编辑器也是提供了很弹性化的文件上传接口的处理，以便兼容我们各自五花八门的图片上传接口处理。
通过官网的配置介绍，我们可以适应自己后端的接口和相关的配置信息。
如我的后端上传文件的接口为： /api/fileupload/postupload ，后端接口定义如下所示。
/// <summary> /// 多文件上传处理（自动根据配置文件选择合适的上传方式） /// </summary> /// <returns></returns> [RequestSizeLimit(100000000)] //请求正文最大大小100M [HttpPost] [Route("postupload")] public async Task<List<ResponseFileInfo>> PostUpload() { var httpContext = this.HttpContext; var form = await Request.ReadFormAsync(); string? guid = form["guid"]; string? folder = form["folder"]; var files = form.Files;
其中我们接受的参数包括guid（附件的GUID），folder（图片类别）以及接收Files的集合。返回的集合里面包括有id,文件名称，文件地址等内容，如下所示。
因此根据我的后端接口上传处理，传入相关的参数来处理编辑器控件配置。
// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 editorConfig.MENU_CONF["uploadImage"] = { // 服务端上传地址，根据实际业务改写 server: "/api/fileupload/postupload", // form-data 的 fieldName，根据实际业务改写 fieldName: "file", // 选择文件时的类型限制，根据实际业务改写 allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"], // 单个文件的最大体积限制，默认为 2M maxFileSize: 1 * 1024 * 1024, // 1M // 最多可上传几个文件，默认为 100 maxNumberOfFiles: 10, // 自定义上传参数，参数会被添加到 formData 中，一起上传到服务端。 meta: { folder: props.imageFolder, guid: props.imageGuid, }, // 自定义增加 http headers,如果接口需要令牌头信息，需要带上 headers: { Accept: 'text/x-json', Authorization: 'Bearer ' + getAccessToken(), }, // 将 meta 拼接到 url 参数中，默认 false metaWithUrl: false, // 自定义插入图片 customInsert(res: any, insertFn: InsertFnType) { // console.log("customInsert", res); const result = res.result as Array<ResponseFileInfo>; if (result.length > 0) { const { id, name, url } = result[0]; // res.data.url是后端返回的图片地址，根据实际业务改写 if (url) { setTimeout(() => { // insertFn插入图片进编辑器 insertFn(url, name, url); }, 2000); } } } };
根据返回的结果，我们调用编辑器的接口实现图片的插入。
// 自定义插入图片 customInsert(res: any, insertFn: InsertFnType) { // console.log("customInsert", res); const result = res.result as Array<ResponseFileInfo>; if (result.length > 0) { const { id, name, url } = result[0]; // res.data.url是后端返回的图片地址，根据实际业务改写 if (url) { setTimeout(() => { // insertFn插入图片进编辑器 insertFn(url, name, url); }, 2000); } } } };
3、实现框架中的系统新闻资讯的管理
为了方便使用富文本编辑器，不用每次都配置一次相关的参数，我们把集成好上传图片的功能整合到自定义编辑器控件里面去，因此就可以实现重用了。
因此定义了该控件的几个可以传入来的相关属性参数如下所示。
const props = defineProps({ modelValue: { type: String, required: false }, placeholder: { type: String, default: '请输入内容...', required: false }, imageFolder: { type: String, default: '文章图片', required: false }, imageGuid: { type: String, default: util.guid(), required: false } });
并在内容变化的时候，触发事件通知。
// Emits const emit = defineEmits<{ (e: 'update:modelValue', val: any | any[]): void; }>();
再把前面的编辑器自定义参数处理内容整合进去。
// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 editorConfig.MENU_CONF["uploadImage"] = { // 服务端上传地址，根据实际业务改写 server: "/api/fileupload/postupload", // form-data 的 fieldName，根据实际业务改写 fieldName: "file", // 选择文件时的类型限制，根据实际业务改写 allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"], // 单个文件的最大体积限制，默认为 2M maxFileSize: 1 * 1024 * 1024, // 1M // 最多可上传几个文件，默认为 100 maxNumberOfFiles: 10, // 自定义上传参数，参数会被添加到 formData 中，一起上传到服务端。 meta: { folder: props.imageFolder, guid: props.imageGuid, }, // 自定义增加 http headers,如果接口需要令牌头信息，需要带上 headers: { Accept: 'text/x-json', Authorization: 'Bearer ' + getAccessToken(), }, // 将 meta 拼接到 url 参数中，默认 false metaWithUrl: false, // 自定义插入图片 customInsert(res: any, insertFn: InsertFnType) { // console.log("customInsert", res); const result = res.result as Array<ResponseFileInfo>; if (result.length > 0) { const { id, name, url } = result[0]; // res.data.url是后端返回的图片地址，根据实际业务改写 if (url) { setTimeout(() => { // insertFn插入图片进编辑器 insertFn(url, name, url); }, 2000); } } } };
由于我们后端的接口不是匿名的，需要令牌，因此需要额外增加对应的Token令牌信息的头部。
// 自定义增加 http headers,如果接口需要令牌头信息，需要带上 headers: { Accept: 'text/x-json', Authorization: 'Bearer ' + getAccessToken(), },
然后监控相关的内容处理即可。
// 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) return; editor.destroy(); }); //加载的时候，赋值给编辑器 onMounted(() => { valueHtml.value = props.modelValue ?? ""; // console.log(props.modelValue) }); watch(() => props.modelValue, (val) => { valueHtml.value = val }) watch(() => valueHtml.value, (newVal) => { emit("update:modelValue", newVal) // 使用 nextTick 确保 DOM 更新完成后再更新编辑器内容 nextTick(() => { if (editorRef.value) { editorRef.value.setHtml(newVal); } }); })
完成编辑器的自定义控件，如下所示。
然后我们在具体的页面里面，导入自定义控件，就可以在页面代码中使用自己的富文本编辑控件了。
<my-editor v-model="editForm.content" image-folder="文章图片" />
在我们完成了@wangeditor的富文本编辑器和上传文件的处理的封装后，我们可以用它来实现系统新闻资讯的管理。
然后尝试上传文件处理
测试上传文件，完成后端接口对接处理即可。
这样我们就可以在多端中查看或者处理相关的系统新闻资讯内容了，如以下界面是通过H5对接后端接口，实现新闻资讯内容的管理。
