vue.js - vue-quill-editor 改为wangeditor后 ,一些图片无法展示？

Question

项目由vue2升级至vue3，发现vue-quill-editor不支持vue3，就换成了wangeditor编辑器。
一些以前用vue-quill-editor编写的富文本图片不展示.
发现vue-quill-editor插入的图片生成的代码是：

<span style="font-size: 40px;">  <img src="https://www.cabr-fire.com/Web/uploads/allimg/160829/10-160R9130144235.png" alt="表C.1  类别代码"></span>

或者

<strong style=\"font-size: 40px;\"> <img src="https://www.cabr-fire.com/Web/uploads/allimg/160829/10-160R9130144235.png" alt="表C.1  类别代码"></strong>

外面这个span或者strong导致到wangeditor编辑器不展示了,现在还不知道还会被哪些标签包裹,可以正则替换掉前面这些标签吗?或者换哪个富文本插件不会有这个问题?

Answer 1

答案：

确实，不同的富文本编辑器可能对HTML内容的解析和渲染有不同的处理方式。vue-quill-editor 和 wangeditor 在这方面可能存在差异，导致某些格式的图片或其他内容无法正确展示。

针对你提到的图片被 <span> 或 <strong> 标签包裹的问题，你可以使用正则表达式来清理这些标签。但请注意，正则表达式处理HTML可能不是很安全或可靠，因为它容易受到HTML结构复杂性的影响。如果HTML内容简单且结构固定，正则表达式可能是一个可行的选择。

例如，你可以使用以下正则表达式来移除包裹图片的 <span> 和 <strong> 标签：

const cleanedHtml = htmlContent.replace(/<(span|strong)(.*?)>(.*?)<\/(span|strong)>/g, '$3');

这个正则表达式会查找所有的 <span> 或 <strong> 标签（以及它们内部的任何属性），并替换为它们内部的内容（在这个例子中是图片标签）。

然而，更好的方法是使用一个更稳健的HTML解析和操作方法，比如使用像 DOMParser 和 document.createElement 这样的DOM API，或者使用一个库如 cheerio，它可以让你像操作jQuery一样操作HTML字符串。

关于换哪个富文本插件不会有这个问题，这很难给出一个确切的答案，因为每个富文本编辑器都有自己的特点和限制。在选择富文本编辑器时，建议考虑以下几点：

• 兼容性：确保编辑器支持你的项目所使用的技术栈和版本（如Vue 3）。
• 功能需求：根据你的需求选择具有必要功能的编辑器，比如格式化选项、图片上传、表格支持等。
• 社区支持：查看编辑器的文档是否完善，社区是否活跃，以便在遇到问题时能够找到解决方案。

一些流行的Vue富文本编辑器包括 quill、tiptap、ckeditor5 等。你可以查阅这些编辑器的文档和社区，看哪个最适合你的项目需求。

最后，请确保在替换编辑器时充分测试，以确保新编辑器能够正确处理现有的内容，并且满足未来的需求。