Editing Div content within jQuery textarea

Question

I am using Dmxzones Advanced HTML Editor 3 which inserts the following code:

<textarea id="advHTMLEdit1" name="advHTMLEdit1" class="dmxEditor" style="width:700px;height:300px"></textarea>

 jQuery(document).ready(
   function()
     {
       jQuery("#advHTMLEdit1").dmxEditor(
         {"width": 700, "lineBreak": "p", "allowUpload": true, "uploadPath": "tmp", "subFolder": "1", "uploadProcessor": "php", "allowResize": true, "includeCss": "tutorial.css", "skin": "blue"
       );
     }
 );

It inserts elements using the javascript execCommand() and also applies class styles to those elements.

With: jQuery("#advHTMLEdit1")[0]

I seem to be able to access it but nothing I have tried gives me access to the childNodes. I would like to be able to loop through each childNode as created by the editor, query the class and if it is a particular className then replace the HTML on that element.

I don't use jQuery and although I have tried many things myself I cannot seem to access any of those elements as created by the editor.

Answer 1

Borrowing a bit from this answer and based on the link you've provided, you should do something like this:

If you want to apply a consistent css for all matching classes:

var ifrm = $("#advHTMLEdit1").prev(".dmx-editor-frame-wrapper").find("iframe")[0];
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm = $(ifrm.document);
ifrm.find(".yourClass").css("cssProperty", "cssValue");

If you want to apply different css for all elements:

var ifrm = $("#advHTMLEdit1").prev(".dmx-editor-frame-wrapper").find("iframe")[0];
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm = $(ifrm.document);
var elem;
ifrm.find("body *").each(function(){
    elem = $(this);        
    if(elem.hasClass("yourClass") && elem.is("span")) {
        //elem.css("cssProperty", "cssValue");                
        elem.text("new text");
    }
});

If you want to change the text of all span having a certain class, you can do the following with a much shorter code, no need to loop:

ifrm.find("span.myClass").text("new text");

Use the second example only if the new text of the span depends on the class name.

Edit: Based on the example you've provided in your page, you could just write:

ifrm.find("p.codeblock").text("new text");