1. 你们项目是如何集成 WangEditor 富文本编辑器的？主要用在哪些场景？
答案：
我们在 web-admin 前端项目中集成了 WangEditor，主要用于新闻/文章的内容编辑（如 src/views/news-manage/NewsAdd.vue 和 NewsEdit.vue）。
集成步骤如下：
- 通过 npm 安装 WangEditor：
npm install @wangeditor/editor - 在需要的 Vue 组件中引入 WangEditor，并在
<template>中添加编辑器容器。 - 在
<script setup>或setup()中初始化编辑器实例，设置内容双向绑定。 - 编辑器内容通过 v-model 或事件同步到表单数据，最终随表单提交到后端。
2. WangEditor 编辑器内容是如何和后端数据进行交互的？如何实现内容的保存和回显？
答案：
- 保存：用户在 WangEditor 中编辑内容后，内容会同步到表单的某个字段（如
form.content），提交表单时通过 API（如POST /admin/news或PUT /admin/news/:id）将内容发送到后端，后端存储为 HTML 字符串。 - 回显：编辑新闻时，前端通过新闻 ID 获取详情（如
GET /admin/news/:id），将后端返回的 HTML 内容赋值给 WangEditor 的内容，实现富文本的回显。
3. WangEditor 编辑器的图片上传功能是如何实现的？如何与后端对接？
答案：
- WangEditor 支持自定义图片上传。我们在编辑器配置中设置了
customUploadImg钩子，用户插入图片时会将图片文件通过 API（如POST /admin/upload）上传到后端（如web-server/routes/web/upload.js），后端返回图片 URL，编辑器将图片插入到内容中。 - 后端接口会将图片保存到服务器指定目录（如
public/newsuploads/），并返回可访问的图片地址。
4. WangEditor 富文本内容在前端如何防止 XSS 攻击？你们做了哪些安全处理？
答案：
- WangEditor 默认会对输入内容做一定的过滤，但我们还会在后端（如
controllers/admin/NewsController.js）对接收到的 HTML 内容进行二次过滤或转义，防止恶意脚本注入。 - 前端在展示富文本内容时（如新闻详情页），会使用 v-html 指令，但会配合 DOMPurify 等库进行内容净化，进一步防止 XSS 攻击。
5. WangEditor 编辑器的内容如何适配移动端？你们做了哪些优化？
答案：
- WangEditor 4.x 版本本身对移动端有较好支持。我们在集成时设置编辑器的宽度为 100%，并通过自定义样式（如在
src/styles/common.scss）优化编辑器在小屏设备上的显示。 - 针对图片、表格等内容，设置最大宽度为 100%，防止内容溢出。
- 在移动端页面（如 web-company）如果需要展示富文本内容，也会做响应式适配，保证内容可读性和操作体验。
