Bug 反馈,HTML 标签下 ir、wysiwyg、sv 三种编辑模式全部错乱

1、SV 分屏模式下输入 HTML 标签,这个是正确渲染的结果:

image.png

2、此时切换到 IR 即时渲染模式,HTML 标签都被过滤了,渲染异常:

image.png

3、继续切换到所见即所得模式,此时原本的 HTML 标签被编码了

image.png

4、更糟糕的是,此时如果再切回最初的 SV 分屏模式,发现原本的正确输入全部被破坏掉了,无法恢复

image.png

同样的问题还发生在表格上:

1、所见即所得模式下,辛辛苦苦编辑好一个表格(注意,单元格里面有《br》换行符)

image.png

2、切换到 IR 即时渲染模式 —— 我的换行符呢??这要是单元格里面文字多一点、换行多一点那不得冲破屏幕十万八千里了。。。

image.png

3、继续切到分屏模式,换行符依然没有

image.png

4、此时再切回最初的所见即所得模式,换行符还是没有,无法还原了,最初辛辛苦苦的排版全部报废

image.png

这会带来什么问题?由于同一段输入内容,在 sv、ir、wysiwyg 三种模式下显示效果完全不同,甚至还有内容损失(特殊字符、编码那些),为此在 post 文章时我还得把客户端的编辑器模式(sv、ir、wysiwyg 其中之一)一起传给后端并存储在数据库中,操作麻烦、浪费存储资源不说,并且在 load 文章时还必须再从后端数据库中取回编辑器模式并用对应的模式在客户端渲染,不然 post 和 load 的渲染模式不一致,会导致发布的内容和看到的内容完全不一致(幸好我的 blog 前后端都在自己的控制范围,如果某位倒霉蛋前端程序员无法控制后端就要哭了)

vditor 作为一个编辑器,至少应该保证同一段输入内容在三种模式下切换时,最终输出效果应该是一致的不能有内容损失,特别是 vditor 主打把三种编辑模式作为特色宣传,更应该保证三种编辑模式的健壮性。

以上问题希望老板可以尽快修复,vditor 是一个优秀的编辑器,希望它可以越来越好用~~

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    187 引用 • 1120 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa
    订阅者

    @88250 麻烦抽空看一下

  • 其他回帖
  • foxfire881
    作者

    经测试,开启 sanitize: false 关闭 XSS 转义后,bug 仍然存在,表现为“即时渲染”模式无法对 HTML 标签渲染。

    例如:

    1、“分屏模式”输入以下代码实现 a 的 2 次方。

    a<sup>2</sup>
    

    切换到“即时渲染”模式后,显示的是 a2,而不是 a 的 2 次方。

    2、“所见即所得”模式下插入表格,在单元格内回车换行,然后把编辑器转换成“即时渲染”模式后,换行符被过滤了,整个单元格变成非常一整行超长文本,顶破了屏幕,“所见即所得”模式下的排版被打乱。

  • foxfire881
    作者

    老板可能是为了防 XSS 攻击所以对 HTML 标签做了一些特殊处理过滤转义之类的,我不太清楚有没有完美的方案既可以防 XSS,又可以完美在三种编辑模式下来回无损切换(原则上应该可以解决这个问题)。

    如果实在搞不定的话,至少应该给用户一个 option 选项是否开启防 XSS、转义这些功能。vditor 如果作为发布在公网论坛上的编辑器,确实要启用转义、过滤那些防 XSS 的功能;但是作为个人用户,我的应用只在单机使用,根本不涉及 XSS 那些问题,相比之下我更关注排版好不好用、能否无损切换这些问题,所以加个选项把选择权交给用户最好了。

    1 回复
  • foxfire881
    作者

    建议无论 ir、sv、wysiwyg 哪种编辑模式,全部统一转换成中间层代码并提交到后端持久化;从后端取回时,也是取回中间层代码到客户端,客户端再根据本地的渲染模式,对中间层代码进行转换并加载到编辑器中。

  • 查看全部回帖