KindEditor 的 html 标签自动解码问题

转载 2017年06月29日 18:08:39

我的博客是使用 KindEditor 编辑的。我经常会使用代码模式在<pre>标签里面写一些 html 标记,我是在输入的时候,已经使用编辑器进行了编码的,比如<p>,我输入的是&lt;p&gt;

如果文章只编辑一次,是没有问题的。但是在第二次打开,想要修改一点东西的时候,发现我输入的编码后的 html 标签被自动解码了,这样显示的文章内容就和预期不符了。

开始我以为这是 KindEditor 的 bug,在 GitHub 上 fork 了这个项目,打算修改一下。在查看源码的时候,我发现 KindEditor 在初始化的时候,会获取绑定的 textarea 标签的值。我没有查看所有的调用栈,不过我猜获取的是 value 属性,而这个属性获取到的值,就是会对 html 标签进行解码的。

既然 value 属性不能使用,那么其他属性呢?我查看了 innerText 和 innerHTML 的值,发现 innerText 获取到的值是和 value 一样的,而 innerHTML 的值刚好相反,它会把所有的 html 标签都进行编码。这样的话,这种使用 textarea 标签初始化编辑器的方式就不能使用了。

我看了一下自己写的代码,发现我提交编辑器内容的时候,使用的是 editor.html() 方法,而这个方法只要传入参数,就是设置编辑器的内容,用法和 jQuery 是一样的。于是我在服务器端没有给 textarea 赋值,而是写了一个获取文章内容的 api,ajax 请求 api,把返回的内容传给 editor.html() 方法,这样问题就解决了。不需要修改 KindEditor 的代码。

其实无论编辑器的初始化,和编辑器内容的提交,都应该使用 editor.html() 方法。因为把一个 html 文档设置为一个标签的属性也好,或者设置为子节点也好,都会带来无法解开的编码和解码的问题。为获取编辑器初始化需要的内容写一个 api 会带来多一点的编码量,但是可以完全抛开编码解码的烦恼。

原文链接:http://bibaoke.com/post/80

相关文章推荐

kindeditor html代码过滤(丢失某些HTML标签)

kindeditor html代码过滤(丢失某些HTML标签)  (2014-04-26 11:23:30) 转载▼   分类: html ...

KindEditor保留htmltag,以及关闭html过滤

KindEditor.ready(function (K) { editor = K.create('textarea[name="content"]', { ...

Android HTML5 Video视频标签自动播放与自动全屏问题解决

为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我...

HTML中P标签自动换行,浏览器补全P标签时的问题

在HTML5中p是块级元素。代表一个段落,段落里面的文字在达到右边界的时候会自动换行; 在页面中如果没有设置,会强制换行; 正确的书写:我是一个p标签如果书写的过程中没有加结束标签”/p”,浏览器...

javascript处理HTML的Encode(转码)和Decode(解码)总结,避免js脚本注入问题

HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一、用浏览器...

关于IE和火狐,谷歌,Safari对Html标签Object和Embed的支持问题

====================================================== 注:本文源代码点此下载 =============================...

HTML标签中li的用法 IE6,7,8和FF没有问题

1。 标签定义无序列表。2。 标签定义列表项目。      标签可用在有序列表 () 和无序列表 () 中。           其头部分: ,可以在li里...

struts2标签遍历时,显示内容忽略<html>代码问题

在使用struts标签时,希望通过iterator遍历内容,在输出的内容中含有代码,显示的结果不是我希望得到的,如下: 该代码为: 。 我希望得到的结果是将长期,在页面中显示为...

HTML5 video 标签浏览器兼容问题

HTML5 video 标签浏览器兼容问题 小示例代码地址:https://github.com/danhuan/video-demo IE8、火狐、谷歌测试通过。使用需要注意的问题:1.多种格式视...

关于使用Html <audio>标签播放视频文件的问题

Html 标签路径设置正确,但播放不了mp4文件
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)