我的博客是使用 KindEditor 编辑的。我经常会使用代码模式在<pre>标签里面写一些 html 标记,我是在输入的时候,已经使用编辑器进行了编码的,比如<p>,我输入的是<p>
如果文章只编辑一次,是没有问题的。但是在第二次打开,想要修改一点东西的时候,发现我输入的编码后的 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 会带来多一点的编码量,但是可以完全抛开编码解码的烦恼。