insertValue()在插入html语言出现问题

[eienma]

您好，十分感谢您的工作与贡献，但是我在使用vditor的时候遇到了一个小问题，具体情况如下：

编辑模式

sv 分屏编辑预览模式

描述问题

insertValue()在插入html语言的时候，会产生非预期的效果。

详情：
我在个人博客网站中使用vditor编辑器（前端框架 Vue3），在自定义工具栏的过程中，通过click()我希望点击后，在光标所在的位置插入一段HTML代码，但是似乎insertValue()会将内容自动去掉这些的标签，代码如下所示：

click() {
const htmlString = `<div><label for="${inputId}">请输入</label><input  type="text" id="${inputId}"></div>`;
try {
       console.log(htmlString);  // 此处的输出是正常的
       vditorInstance.insertValue(htmlString + '\n');
       vditorInstance.focus();
       console.log('内容插入成功');
} catch (error) {
       console.error('插入内容时出错:', error); // 并且这里也没有报错
}

但是得到的错误结果为：

同时，后面我在尝试解决问题的时候，发现用setValue()插入的代码的话（vditorInstance.setValue(vditorInstance.getValue() + '\n\n' + htmlString);），这样是没有问题的，但是可惜这样其实不能在光标的位置插入，只能先获取所有的内容，再在这些内容的末尾插入。

期待的结果

理论上应该得到的结果：

截屏或录像

版本信息

• 版本：3.10.5
• 操作系统：Windows 11
• 浏览器：Google chrome （版本 129.0.6668.58）

其他信息

在出现报错后，我尝试寻找问题的来源，发现如果直接复制（CTRL+V），HTML语言会被识别为代码请输入，复制为纯文本（CTRL+SHIFT+V）可以正常显示HTML语言，不过不知道这个性质和我的问题有没有关系~

十分期待您的回复，再次感谢~

[AZCodingAccount]

蹲，分屏预览是正常的，另外两种模式显示不出来

[eienma]

抱歉，正文忘记补充的一点：在解决问题的时候，根据问题 #716 中，我进行了用< 和>对<>进行替换，替换后的使用insertValue()插入的HTML是可以正常识别的，但是我依然想知道是否有更好的解决方法，感谢。

[AZCodingAccount]

抱歉，正文忘记补充的一点：在解决问题的时候，根据问题 #716 中，我进行了用< 和>对<>进行替换，替换后的使用insertValue()插入的HTML是可以正常识别的，但是我依然想知道是否有更好的解决方法，感谢。

      const encodedHtml =
        '<span style="color: red">Hello, Vditor!</span>'
      // vditor.value.setValue(vditor.value.getValue() + '\n\n' + htmlString)
      vditor.value.setValue(encodedHtml)
      
      请问为啥我的不生效

[eienma]

抱歉，正文忘记补充的一点：在解决问题的时候，根据问题#716中，我进行了用< 和>对<>进行替换，替换后的使用insertValue()插入的HTML是可以正常识别的，但是我仍然想知道是否有更好的解决方法，谢谢。

      const encodedHtml =
        '<span style="color: red">Hello, Vditor!</span>'
      // vditor.value.setValue(vditor.value.getValue() + '\n\n' + htmlString)
      vditor.value.setValue(encodedHtml)
      
      请问为啥我的不生效

您好，您的问题与 #1674 问题类似，另外两种模式下似乎HTML语言不能正确渲染，对于这个问题作者也还没有回复，但是，在 #1640 中，作者新增加了一个方法insertMD，不知道对您来说是否有用~

[Vanessa219]

使用 vditor.insertMD(<div><label for="test">请输入</label><input type="text" id="test"></div>)

[vCloudSail]

使用 vditor.insertMD(<div><label for="test">请输入</label><input type="text" id="test"></div>)

所见即所得这样使用还是不行啊