Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
eienma opened this issue Sep 20, 2024 · 6 comments
Open

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

eienma opened this issue Sep 20, 2024 · 6 comments

Comments

@eienma
Copy link

eienma commented Sep 20, 2024

您好,十分感谢您的工作与贡献,但是我在使用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); // 并且这里也没有报错
}

但是得到的错误结果为:

微信图片编辑_20240920144949

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

期待的结果

理论上应该得到的结果:
a49b77a6b99f0a1182497b2b3ecf856

截屏或录像

动画

版本信息

  • 版本:3.10.5
  • 操作系统:Windows 11
  • 浏览器:Google chrome (版本 129.0.6668.58)

其他信息

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

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

@AZCodingAccount
Copy link

AZCodingAccount commented Sep 20, 2024

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

@eienma
Copy link
Author

eienma commented Sep 20, 2024

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

@AZCodingAccount
Copy link

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

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

@eienma
Copy link
Author

eienma commented Sep 20, 2024

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

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

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

@Vanessa219
Copy link
Owner

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

@vCloudSail
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants