How jQuery reads and sets the KindEditor value

  • 2020-03-29 23:54:53
  • OfStack

When we use Kindeditor, we want to use Ajax to pass values, but the method wrapped in the editor doesn't work, because the editor is placed on another JSP page, loaded by an iframe, and the display of this iframe ="none", is triggered by an event.


<iframe src="../common/editor.jsp" frameborder="0" scrolling="no" style="margin: 0"
    width="100%" height="300" name="zwFrame" id="zwFrameId"></iframe>

Since the original method didn't work, I had to get it through jQuery. The first thing that comes to mind is to read the contents of the "textarea", i.e., $(" #editor ").html(), but that's not available. So I tried to get the contents of the iframe, but I didn't get them. Finally, I found the final result through the debug view of firefox:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/20131122090113.jpg? 201310229635 ">

As you can see from the figure above, to get "it's a beautiful day", we just need to get the body.
Process: first, get the outer layer of the iframe, through the iframe to take the inside of the child element iframe, in the first layer to take the inside of the body. As follows:


var editorText = $(window.frames['zwFrame'].document).find("iframe").contents().find("body");
var contents = editorText.html();

Contents (): find all child nodes (including text nodes) inside the matching element. If the element is an iframe, find the document content.

Here are some ways to get the contents of the elements in an iframe:


$(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html();


Displays the contents of the body element in the iframe

$(document.getElementById("iframeId").contentWindow.document.body).html();

Gets the contents of the textarea element in the iframe


$(window.frames["iframeName"].document).find("#textareaId").html();


Related articles: