昨天突然興起，准備完善秋色園后台的編輯器關於Chrome、FireFox下的選擇內容的HTML兼容處理。
JS編輯器獲取選擇內容的HTML兼容性寫法問題描述：
對於如何獲取選擇的文本（包括Html標簽），通常網絡上的答案是：
var deditor=document.getElementById('iframe名稱').contentWindow;
IE：deditor.pos.htmlText，獲得html內容。
其它瀏覽器：deditor.window.getSelection().toString(); 僅獲取不包括html標簽的文本。
問題：假充你給一段選擇的文字（包括換行、段落格式化的），加一個背影或邊框等操作時，如果html標簽都失蹤了，僅剩下文字，那就不是您想要的效果了。
既然知道了問題，如何解決JS兼容性？
解決問題步驟一：網絡搜索
本人並不善長js，深夜中，只能靠程序員的本能，百度或Google現搜現處理了。
然而這個互聯網，稍為有點細活的代碼，網絡上總是難以搜尋，偶爾搜出來的，除了沒有答案，另外就是通用性：
deditor.window.getSelection().toString()或deditor.window.getSelection().getRangeAt(0)。
類似的只能獲取文字，可是，我要的是包括Html標簽的文本，你本應該懂的。
解決問題步驟二：代碼調試
在指定相關符合關鍵字不多的網頁中， 找到一個特殊的功能：“Chrome“的腳本調試。
調試方法：工具 - 開發人員工具 - scripts - 選擇要調試的js文件。
接下來就是左側設置斷點，右邊的設置監控變量和控制下一步等。
很遺憾的是，雖然能調試，試了很多屬性和方法，可是還是沒發現Chorme下能獲取 選擇的內容的Html方式。
調試截圖如下：
解決問題步驟三：重復網絡搜索
一般比較有價值的代碼，網上很少會直接出現，一方是開發人員比較舍不得，另一方面是大伙不太愛寫文章。
因此，繼續搜索，從各類不同的文章中，提取出可能有用的代碼。
最后，不知在哪了，看到了一個：selection.getRangeAt(0).cloneContents().childNodes。
從正常的思維中，clone后再取子節點，和直接取子節點，有啥區別呢？可是就是有區別。
解決問題步驟四：重復的代碼調試
繼續調試，斷點，監控變量及值，最后發現，通過克隆后取的子節點，可以取到outerHTML屬性，於是問題比較明朗化，寫個方法for一下組合。
{
var result='';
}
由於在Chorme下每次回車都產生"<div><br></div>“，於是去掉多余的標識。
瀏覽器兼容，不會讓你太輕松
本來以為問題解決了，於是在firefox下試了一下，靠，這B的firefox，竟然不行。
於是使用Firfox，進行腳本調試，發現firefox下獲得到子節點，根本沒有outerHTML屬性，太悲劇了，連這個都沒有，問題又卡住了。
解決問題步驟五：持續的網絡搜索
關鍵換成了firefox下的js選擇html的相關內容及兼容寫法，可惜，網絡上都是迷惑人標題+沒有答案的內容。
在經過N小時的頭腦風暴和搜索體驗之后，冷靜了一下，B的，回去繼續調試，看能不能發現新大陸。
解決問題步驟六：持續的調試代碼
在Firfox下，調試各屬性可能產生的值，及出來的值，明顯的沒有直接的答案。
最后發現，由於是節點，節點就是屬性，標簽名、內容文本夠成的。
調試如下圖：
解決問題步驟七：創新思維：無招剩有招，沒有現成的，不要怕麻煩，一切從頭組裝
在發揮不怕麻煩的精神下，自己重新組合節點的outerHTML，再把所有節點的outerHTML拼接起來。
{
var result='';
var node;
for ( var i = 0; i < nodes.length; i++)
{
node=nodes[i];
if(node.nodeValue) //純文本節點 還原。
{
result+=node.nodeValue;
}
else if(node.tagName)
{
result+="<"+node.tagName;
if(node.innerHTML)
{
// 屬性還原。
if(node.attributes && node.attributes.length>1)
{
for( var j=0;j<node.attributes.length-1;j++) // 忽略最后一個，最后一個是FirFox自己的節點。
{
result+=' '+node.attributes[j].name+"='"+node.attributes[j].value+"'";
}
}
result+=">"+node.innerHTML+"</"+node.tagName+">";
}
else
{
result+=" />";
}
}
}
return result;
}
步驟八：花點時間，記錄在案，分享成果，后續可查。
其它：
這兩三天，花了點功能，給秋色園的博客增加了論壇模式，簡單切換皮膚就變成了論壇，省去了部署論壇的麻煩，還省了點服務器費用。
博客論壇模式示例：微博粉絲精靈 官網論壇示例，后續再考慮是否綁定BBS二級域名的SEO問題。