如何填写javascript编辑器？

Question

I use TEmbeddedWebBrowser to fill a html form using FillForm method. But my html form contains a fully javascript based editor and i don't know how to fill that.

Something like this :

your comment :
<script type='text/javascript' src='public/scripts/src/editor.js?1'></script>

And the submit btton :

<input type="submit" name="btnSubmit" id="btnSubmit" value="Send" class="btn" onclick="rtevalue(&quot;data[body]&quot;,437934);" />

Answer 1

The editor itself is a DIV (could be other HTML element) or IFRAME set to contentEditable / designMode = on .
If the element is a DIV you could use it's InnerHTML property.
For the best results with an IFRAME use the below code:

procedure TForm1.Button1Click(Sender: TObject);
var
  editorDoc: OleVariant;
  range: OleVariant;
  id: OleVariant;
begin
  id := 'editor'; // frame ID
  editorDoc := (WebBrowser1.Document as IHTMLDocument2).parentWindow.frames.item(id).Document;
  range := editorDoc.body.createTextRange();
  // range.collapse(false); // if you need to append
  range.select();
  range.pasteHTML('<b>Boo!</b>');
end;

Notes:

• No error checking to simplify the code.
• You might also try range.execCommand('inserthtml', false, MyText) (Not tested with TEmbeddedWebBrowser , but had bogus results when I tried it with plain HTML / Javascript on IE ).

Answer 2

I have no experience concerning this TEmbeddedWebBrowser tool, but according to your post I'm thinking of a way to retrieve the form's fields. Once you know what fields it contains, I suppose you can fill them as it doesn't seem to be the purpose of your post.

1. Assuming there is a form declared and it is reachable: you can grab the form and parse its .elements collection: easily if it's declared in your page (give it an id attribute, then use a document.getElementById() ), it may still be doable if the form is declared by/inside editor.js , using document.forms then.

2. Otherwise: you can get a dump script from the Net - like this one - and see what is printed when you call (after including editor.js naturally) dump(data) or dump(data[body]) . As data[] is used as an argument to the rtevalue() called by your submit button's onclick , it should contain the form's key/value pairs. The bad thing about this method is that data[] must be filled by Javascript, so if your form has radio buttons or checkboxes you may only see the selected ones, which is why I would give a shot at the first option before trying this trick.

About the comments, you should not directly use innerHTML to insert an HTML subtree to the document as most of the times it doesn't work (especially when forms are involved), have an appendChild() redo the work to ensure a correct document, like this:

var dummyContainer=document.createElement("span");
var dummyContainer.innerHTML="..."; //insert stuff here, because it's easy to use ;)
myContainer.innerHTML=""; //clearing your "real" container doesn't add anything to the HTML tree, it'll work - you can also use removeChild() in a loop (but it's not as easy to use!)
myContainer.appendChild(dummyContainer); //appendChild will translate properly the text inserted by innerHTML in dummyContainer into a clean HTML subtree