How do I parse TinyMce article content to find embedded images using JS

Question

Hi all, I want to parse the content that is written in the TinyMCE editor in the client side I want to get all the src attribute values of the images that are inserted in the editor editing area(in the article body)and store them in an array.

How can I do that ?

Thanks

(I tried:

var arr = new Array();
   $(".txtEditorClass img").each(function() {arr.push( $(this).attr("src"))}); 

It didn't work I also did a test using regular JS to see what images are found:

var arr = document.getElementsByTagName("img"); for(var i = 0; i < arr.length; i++) { alert(arr[i].src); } All the images src values of images outside the editor where shown but not those of the images embedded in writen text)

Answer 1

TinyMCE editor is set inside and iFrame. To access inner elements you need to use the function tinyMCE.activeEditor.dom.getRoot() ( doc : http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.dom.DOMUtils/getRoot )

So to retrieve all images inside the editor use something like :

var arr = new Array();
    $(tinyMCE.activeEditor.dom.getRoot()).each(
          function()
            {
              arr.push( $(this).attr("src"))
            }); 

Answer 2

The answer :

var arr = new Array();
$(tinyMCE.activeEditor.dom.getRoot()).find('img').each(
function() {
    arr.push($(this).attr("src"));
});

I want to thank user Pierre-Loic Doulcet for his help