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

本贴最后更新于 851 天前,其中的信息可能已经时移俗易

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。

    312 引用 • 1666 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • foxfire881
    作者

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

    例如:

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

    a<sup>2</sup>
    

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

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

  • 其他回帖
  • 88250

    我记得有不开启 XSS 过滤的选项。

    1 回复
  • foxfire881
    作者

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

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

    1 回复
  • @88250 麻烦抽空看一下

  • 查看全部回帖

推荐标签 标签

  • 旅游

    希望你我能在旅途中找到人生的下一站。

    85 引用 • 895 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 42 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    116 引用 • 99 回帖 • 267 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 550 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 173 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 152 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 422 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 222 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • 安装

    你若安好,便是晴天。

    128 引用 • 1184 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 38 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 44 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    523 引用 • 4581 回帖 • 690 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注
  • 自由行
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 451 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18660 引用 • 69551 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 295 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 319 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖 • 1 关注