jQuery讀取和設(shè)定KindEditor值的方法
在使用Kindeditor的時(shí)候，想要利用Ajax傳值，但是通過(guò)editor封裝的方法是行不通的，原因在于編輯器我們是放在另一個(gè)jsp頁(yè)面，通過(guò)iframe來(lái)加載的，同時(shí)這個(gè)iframe的display="none"的，要通過(guò)一個(gè)事件來(lái)觸發(fā)。
<iframe src="../common/editor.jsp" frameborder="0" scrolling="no" style="margin: 0"
width="100%" height="300" name="zwFrame" id="zwFrameId"></iframe>
既然原本方法行不通，那我就只好通過(guò)jQuery來(lái)獲取了。首先我想到的是讀取內(nèi)容“textarea”里面的內(nèi)容，即：$(“#editor”).html()，但是這樣是獲取不到的。于是我想通過(guò)獲取iframe里面的內(nèi)容來(lái)獲取，也沒(méi)有獲取到，最后通過(guò)firefox的debug查看找到最終結(jié)果：
從上面這個(gè)圖中可以看出，要獲取“今天天氣很好”這個(gè)內(nèi)容，我們只需要獲取指定body里面的內(nèi)容即可。
處理流程：首先獲取最外層的iframe，通過(guò)iframe取里面的子元素iframe，在進(jìn)入一層取里面的body即可。如下：
var editorText = $(window.frames['zwFrame'].document).find("iframe").contents().find("body");
var contents = editorText.html();
其中contents():查找匹配元素內(nèi)部所有的子節(jié)點(diǎn)（包括文本節(jié)點(diǎn)）。如果元素是一個(gè)iframe，則查找文檔內(nèi)容。
下面提供幾種獲取iframe里面元素內(nèi)容的方法：
$(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html();
顯示iframe中body元素的內(nèi)容
$(document.getElementById("iframeId").contentWindow.document.body).html();
獲取iframe中textarea元素的內(nèi)容
$(window.frames["iframeName"].document).find("#textareaId").html();
- springmvc+kindeditor文件上傳實(shí)例詳解
- Kindeditor編輯器添加圖片上傳水印功能（php代碼）
- 常用的HTML富文本編譯器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor簡(jiǎn)介
- js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能
- Kindeditor在線文本編輯器如何過(guò)濾HTML
- 使用JavaScript為Kindeditor自定義按鈕增加Audio標(biāo)簽
- 在asp.net中KindEditor編輯器的使用方法小結(jié)
- SpringMVC KindEditor在線編輯器之文件上傳代碼實(shí)例
相關(guān)文章
這篇文章主要介紹了JQuery如何按name屬性選擇元素問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本文給大家匯總介紹了幾個(gè)jQuery中不常用的方法，記錄一下，分享給大家，有需要的小伙伴可以參考下。2015-07-07
jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)樣式設(shè)置的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
基于cookie實(shí)現(xiàn)zTree樹(shù)刷新后展開(kāi)狀態(tài)不變
這篇文章主要為大家詳細(xì)介紹了如何基于cookie實(shí)現(xiàn)zTree樹(shù)刷新后，展開(kāi)狀態(tài)不變，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10
jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼，需要的朋友可以參考下。2010-03-03
使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關(guān)于使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了jQuery中on()方法用法,實(shí)例分析了on()方法的功能、定義及在匹配元素上綁定一個(gè)或者多個(gè)事件處理函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
EasyUI 中combotree 默認(rèn)不能選擇父節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇EasyUI 中combotree 默認(rèn)不能選擇父節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法,涉及jQuery漸變效果及css顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02