前后端页面分离如何 JSON 传输富文本？

[sugarkeek]

基于 Flask 和 Vue 的前后端分离页面，后端使用富文本编辑器后保存的包含富文本的数据如何通过 JSON 接口传输。

目前想到的方案：

1. JSON 转义，前端在转义回去解析。=>感觉比较麻烦；
2. 富文本编辑器换成 Markdown 语法。=>对于没接触 Markdown 的人来说不友好，而且 Markdown 语法中也涉及到特殊字符，也需要转义，还不如直接用富文本转义。

一个疑问：

1. 学长之前和我讲 JS 对象保持习惯用单引号 '', Html 标记语言习惯用双引号 "", 这样就不会引起歧义了。可是 JSON 文件中不都是双引号 "":""; 的形式吗？

[jinksw]

不是很懂
你自己手动拼接的 json 吗？ 那样才涉及你自己去转义吧？

[Mutoo]

A1：JSON 是一种跨语言的协议，所以规范里规定 key 以及 string 都用双引号包围。以更好的兼容不同语言的解释器。

至于你的问题，应该是如何正确将 HTML 文档存到字符串中。可以参考这篇文章：
https://www.thorntech.com/2012/07/4-things-you-must-do-when-putting-html-in-json/

前端 vue 可以用 v-html 直接引用这个字符串即可。但还需要考虑安全问题，防止 XSS。
https://github.com/vuejs/vue/issues/6333

[zjyl1994]

嗯？你的 json 是手拼的？我们 json 都会自动处理转义啊？

[icy37785]

json 的转义不都是自的么。你手拼的话容易出错呀，还是让他自动转吧。

[mnssbe]

这时候可以用到“加密算法” base64 来解决你的烦恼

[sugarkeek]

@zjyl1994 #3 还有这种操作吗？我试试。

[est]

富文本有多富？

一般空格换行直接 <pre> 梭哈就行了。

[sugarkeek]

@icy37785 #4 不知道原来能自动转义，我一直以为 json 里传特殊符号会可能会引起歧义，一直都是没敢加。我试试吧。

[sugarkeek]

@Mutoo #2 感谢您的理解，确实是这个意思。我试试。

[IsaacYoung]

{
html: "<div></div>"
}

[sugarkeek]

@est #7 哈哈，没想到那么多，目前能想到的就是富文本里双引号、空格、换行

[sugarkeek]

@mnssbe #5 高级的玩法，复盘的时候试试。

[zjyl1994]

@chenkeyan1 正常的 json 处理库都会自动转义的，不需要你自己操心

[Asice]

感觉要发明个三引号，引号不够用

[doublleft]

js 处理可以 split 一下 \r \n 这种的，起码换行就搞定了

[est]

@chenkeyan1 那就<pre> 就行了。