提问人:loopstruct 提问时间:11/4/2023 更新时间:11/4/2023 访问量:24
Next.js 的 React Quill 编辑器中的 HTML 解析和清理问题(使用 javascript 的页面路由器)
HTML Parsing and Sanitization Issue in React Quill Editor for Next.js (pages router using javascript)
问:
我正在开发一个应用程序,该应用程序允许曲棍球俱乐部通过提供带有单个公告页面的俱乐部列表页面来相互联系。公告页面包含与 Next.js 应用程序中的 React Quill 编辑器集成的创建和更新表单。
我的问题是 HTML 解析和清理。即使在使用分析和清理之后,从网页或 Microsoft Word 复制的大多数内容也无法正确分析或清理。即使我清除了粘贴文本的格式,仍然会发布 html 标签。
内容以 HTML 形式存储在 MongoDB 数据库中。下面是一个成功的公告示例,它没有解析问题,以及它在数据库中的显示方式。
{"_id":{"$oid":"654432e404a050404c98192c"},"clubRepId":"65277560edd9c91689669d14","clubListingId":"65383f5f21db9527b5e4d8c3","announcementTitle":"New Jerseys","announcementBody":"<h3>Jerseys for the 2023 Season have arrived!</h3><p>Please come to the first practice with your payment.</p><p>Coach Greg will be at the signup table at the beginning of practice distributing jerseys.</p><p><br></p><p>The coaches are excited for the season to come!</p><p>We look forward to seeing everyone at practice.</p>","announcementDate":{"$date":{"$numberLong":"1698968292584"}},"__v":{"$numberInt":"0"}}
我在下面包含了问题的相关代码/演示,以提供上下文。主要问题是粘贴的内容未正确清理。我尝试使用 DOMPurify 和 Quill Editor 模块来处理这个问题,但我仍然面临问题。
我将不胜感激在解决此问题方面的任何帮助。如果您对如何改进我的 HTML 解析和清理过程有任何建议,或者您在提供的代码中看到任何问题,请告诉我。谢谢!
下面是使用以下代码当前发生的情况的演示。
我所期望的是,当用户粘贴网页或 Microsoft Word 中的任何内容时。发布的公告中不应出现任何 html 标记。
组件/公告内容解析.js
https://codefile.io/f/Tp7mDBPwM3
组件/QuillEditor.js
https://codefile.io/f/24BoYbO5i3
页面/俱乐部列表/公告/[id].js
https://codefile.io/f/ES6v1dRZt5
页面/编辑/公告.js
https://codefile.io/f/jHv5TvUlDe
页面/创建/公告.js
答: 暂无答案
评论