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.

Could you post the generated `HTML`? That would provide a clearer picture. — Sang Suantak, Jun 14 '12 at 11:08
The HTML on the page is as above in the code box, is that what you meant? — Craig Stewart, Jun 14 '12 at 11:12
No, i meant the final `HTML` generated in the browser. Just right click on the page and click `View Page Source` or something similar depending on your browser. — Sang Suantak, Jun 14 '12 at 11:14
`textarea` elements can't have children (afaik) so it's more likely the generated HTML is stored elsewhere (unless it's not stored at all until the form is submitted). If you use a DOM inspector (F12) you should be able to find out where it is stored. — powerbuoy, Jun 14 '12 at 11:16

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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");

I've just been trying to implement this, in your second example how could I get the innerHTMl and replace? ie: elem.innerHTML = 'Some Text'; — Craig Stewart, Jun 14 '12 at 12:15
@CraigStewart i've updated the second example as per your requirements. — Sang Suantak, Jun 14 '12 at 12:20
@CraigStewart sorry i missed a line in my example. Also i've updated the whole example, it should work now. — Sang Suantak, Jun 14 '12 at 13:01
Ok this works but is it possible to insert as html, the reason is I'm going to use pears text_highlight class, so any user input within a codeblock class will be replaced via ajax as a div with syntax highlighting applied. — Craig Stewart, Jun 14 '12 at 13:12
arh, elem.html works, thank you very much for your help and time. Much appreciated. — Craig Stewart, Jun 14 '12 at 13:20

Editing Div content within jQuery textarea

1 Answers1