KindEditor 的 html 標籤自動解碼問題
我的部落格是使用 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 會帶來多一點的編碼量,但是可以完全拋開編碼解碼的煩惱。