如何填写 javascript 编辑器？

Question

我使用TEmbeddedWebBrowser 使用FillForm 方法填写html 表单。但是我的 html 表单包含一个完全基于 javascript 的编辑器，我不知道如何填写。

类似这样的：

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

还有提交按钮：

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

Answer 1

编辑器本身是 DIV（可能是其他 HTML 元素）或 IFRAME 设置为 contentEditable / designMode = on。
如果元素是DIV，您可以使用它的InnerHTML 属性。
要获得IFRAME 的最佳结果，请使用以下代码：

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;

注意事项：

• 没有错误检查来简化代码。
• 您也可以尝试range.execCommand('inserthtml', false, MyText)（未使用TEmbeddedWebBrowser 进行测试，但是当我在IE 上使用普通HTML/Javascript 进行测试时得到了虚假结果。

Answer 2

我没有使用此 TEmbeddedWebBrowser 工具的经验，但根据您的帖子，我正在考虑一种检索表单字段的方法。一旦你知道它包含哪些字段，我想你可以填写它们，因为这似乎不是你的帖子的目的。

1. 假设声明了一个表单并且它是可访问的：您可以获取该表单并 解析其.elements 集合：如果它在您的页面中声明，则很容易 （给它一个id 属性，然后使用document.getElementById()）， 如果表单是由/inside声明的，它仍然是可行的 editor.js，然后使用document.forms。

2. 否则：您可以获得转储 来自网络的脚本 - 比如this one - 并查看您致电时打印的内容（包括editor.js 自然）dump(data) 或 dump(data[body])。正如data[] 是 用作提交按钮调用的rtevalue() 的参数 onclick，它应该包含表单的键/值对。这种方法的坏处是data[] 必须 由 Javascript 填充，因此如果您的表单有单选按钮或 你可能只会看到选中的复选框，这就是为什么我会在尝试这个技巧之前先尝试第一个选项。

关于 cmets，您不应直接使用 innerHTML 将 HTML 子树插入到文档中，因为大多数情况下它不起作用（尤其是涉及表单时），请使用 appendChild() 重做工作以确保文件正确，如下所示：

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