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

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

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。

    364 引用 • 1839 回帖

相关帖子

欢迎来到这里!

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

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

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

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

    1 回复
  • foxfire881
    作者

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

  • @88250 麻烦抽空看一下

  • 88250

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

    1 回复
  • foxfire881
    作者

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

    例如:

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

    a<sup>2</sup>

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

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

推荐标签 标签

  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    584 引用 • 3537 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 389 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 639 关注
  • OpenCV
    15 引用 • 36 回帖 • 2 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    409 引用 • 3585 回帖 • 1 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 3 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    493 引用 • 928 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 631 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 664 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 116 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    152 引用 • 279 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 588 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 299 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 2 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 397 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 73 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 390 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 684 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 10 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 493 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 546 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 90 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 2 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1707 回帖