jQuery讀取和設(shè)定KindEditor值的方法
在使用Kindeditor的時(shí)候,想要利用Ajax傳值,但是通過editor封裝的方法是行不通的,原因在于編輯器我們是放在另一個(gè)jsp頁(yè)面,通過iframe來加載的,同時(shí)這個(gè)iframe的display="none"的,要通過一個(gè)事件來觸發(fā)。
<iframe src="../common/editor.jsp" frameborder="0" scrolling="no" style="margin: 0"
width="100%" height="300" name="zwFrame" id="zwFrameId"></iframe>
既然原本方法行不通,那我就只好通過jQuery來獲取了。首先我想到的是讀取內(nèi)容“textarea”里面的內(nèi)容,即:$(“#editor”).html(),但是這樣是獲取不到的。于是我想通過獲取iframe里面的內(nèi)容來獲取,也沒有獲取到,最后通過firefox的debug查看找到最終結(jié)果:
從上面這個(gè)圖中可以看出,要獲取“今天天氣很好”這個(gè)內(nèi)容,我們只需要獲取指定body里面的內(nèi)容即可。
處理流程:首先獲取最外層的iframe,通過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在線文本編輯器如何過濾HTML
- 使用JavaScript為Kindeditor自定義按鈕增加Audio標(biāo)簽
- 在asp.net中KindEditor編輯器的使用方法小結(jié)
- SpringMVC KindEditor在線編輯器之文件上傳代碼實(shí)例
相關(guān)文章
jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
在ajax流行的時(shí)代,好像很少能看見傳統(tǒng)的同步提交表單方式了,是啊我們當(dāng)然要用更加給力的AJAX來實(shí)現(xiàn)異步無刷新提交表單,好了開始今天的jQuery之旅吧,今天我們來利用jquery.validate和jquery.form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交 ,需要的朋友可以參考下2015-08-08jQuery左側(cè)大圖右側(cè)小圖焦點(diǎn)圖幻燈切換代碼分享
這篇文章主要介紹了jQuery左側(cè)大圖右側(cè)小圖焦點(diǎn)圖幻燈切換特效,帶有縮略圖的焦點(diǎn)圖切換代碼,簡(jiǎn)單、時(shí)尚、大方,有需要的小伙伴可以參考下。2015-08-08JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下2015-04-04JQuery實(shí)現(xiàn)的在新窗口打開鏈接的方法小結(jié)
jQuery 實(shí)現(xiàn)在新窗口中打開鏈接方法,收集了幾個(gè),大家可以根據(jù)需要選擇使用。2010-04-04jQuery中用on綁定事件時(shí)需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時(shí)需注意的事項(xiàng),具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效,涉及jquery基于鼠標(biāo)事件針對(duì)頁(yè)面元素遍歷與動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery AJAX應(yīng)用實(shí)例總結(jié)
這篇文章主要介紹了jQuery AJAX應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了jQuery 使用AJAX訪問各種格式數(shù)據(jù)相關(guān)應(yīng)用操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-05-05