【Bug修复】记录@wangeditor无法直接显示文本加标签内容

前言

因为我们有多个系统的编辑器，之前的编辑器不是@wangeditor，然后它保存的格式是普通文本加标签的格式，导致@wangeditor 无法正确显示，本篇文章简单记录一下如何解决这个问题。

项目配置

这里我就不多说了，我用的是人家 vue3 的编辑器，具体的大家可以参考人家的文档

bug 描述

我这里的文案是这样的测试&nbsp;<p><br/></p>测试1&nbsp;
我使用了setHtml进行赋值

const data = `测试&nbsp;<p><br/></p>测试1&nbsp;`;
editorRef.value.setHtml(data);

很明显，我丢了很多内容。

问题原因

然后我就去看了人家文档，看到了这段话

尝试解决

然后我去找了一下，文档说可以使用dangerouslyInsertHtml属性,于是我尝试了一下

const data = `测试&nbsp;<p><br/></p>测试1&nbsp;`;
editorRef.value.dangerouslyInsertHtml(data);

然后问题更大了，数据直接没了

正当我一筹莫展的时候，我在想是不是要匹配文字，然后给文字加标签的逻辑了，比如我这段文案就要修改成

const data = `<p>测试&nbsp;</p><p><br/></p><p>测试1&nbsp;</p>`;

这样虽然也可以实现，但是写代码很麻烦。于是我另辟途径

最终解决

然后我把这段文案放到人家的 demo 里面，奇怪的是，人家可以正常显示。

然后，我就取扒拉人家的源代码了

我想着就试一下

import { IEditorConfig, Boot, SlateTransforms } from "@wangeditor/editor";

if (!editorRef.value.isFocused()) editorRef.value.focus();
editorRef.value.select([]);
editorRef.value.deleteFragment();
SlateTransforms.setNodes(
  editorRef.value,
  { type: "paragraph" },
  { mode: "highest" }
);
editorRef.value.dangerouslyInsertHtml(data);
editorRef.value.focus();

哎，果然，这么一处理，果然正确显示了

结语

本篇文章就到这里了，更多内容敬请期待，债见~