百度編輯器從Json對象中取值，完成初次渲染，在編輯器內畫表格

2024-09-06 19:16:54

字體：大中小

來源：轉載

供稿：網友

第一次做企業級應用，感覺一點：對邏輯必須要非常明確，而且有了很多與之前不一樣的概念。
在百度編輯器中，如何完成從服務器取值，來渲染出表格？這里需要先console.log(editor);在官方API中已經告訴我們寫入的方法是setContent()，這里只要能傳入我們最終拼好的的字符串，即可以在初始化中，繪制出我們想要的任何節點。
再send()完成之后，onreadystatechange = function(){},先上一段AJAX的代碼。這段AJAX是消除游覽器兼容，從尼古拉斯的書中學到。

復制代碼代碼如下:

 
function AJAX() { 
if (typeof XMLHttpRequest != "undefined") { 
return new XMLHttpRequest(); 
} else if (typeof ActiveXObject != "undefined") { 
if (typeof arguments.callee.activeXString != "string") { 
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"]; 
for (var i = 0, len = versions.length; i < len; i++) { 
try { 
var xhr = new ActiveXObject(versions[i]); 
arguments.callee.activeXString = versions[i]; 
return xhr; 
} catch (ex) { 
} 
} 
} 
return new ActiveXObject(arguments.callee.activeXString); 
} else { 
throw new Error("錯誤"); 
} 
} 

在JSON數據集中，我們知道，這是一對key value的數據集。在我們從服務器端取到Json對象時，我們就要開始解析它，然后再生成，我們需要的DOM節點。比如，如下一對JSON數據集。

復制代碼代碼如下:

 
{ 
"head":{ 
　　　　"rows":3, 
"cells":2 　　　　 
　}, 
"body":{ 
　　　　"rows":3, 
"cells":2 　　　　 
　} 
} 

接下來，我們取得的數據是存儲在responseText中的，所以，還需要設置一個變量接受一下，如此var a = eval("("+xhr.responseText+")");到了這一步，我們整個Json對象，就從服務端取了出來。接著for in它，就可以取到在Json對象中存儲的數據。

復制代碼代碼如下:

 
for (var b in a) { 
console.log(a[b].rows); 
} 
//for in遍歷Json對象，b就是已經取到了key值了。 

再得到具體的JSON數據集后，就可以通過+= 來拼寫節點的字符串，用+=來拼寫，從上到下，判斷，循環，都可以，只需要在最開始設置一個空變量，來接收這一切。
最后一步，editor.setContent(Json);即可以完成編輯器可以編輯區域的初始化，從服務端取值，來渲染節點。
業精于勤，荒于嬉。行成于思，毀于隨。新人的成長，在于總結。所有文章與例子，僅是自我總結，都僅供學習交流。

上一篇：fckeditor編輯器在php中的配置方法

下一篇：fckeditor 防止上傳非法文件增加登錄判斷