Question

在django项目中，我以这种方式加载了一个ckeditor

CKEDITOR.replace('id_content', {
     toolbar: 'Basic',
     readOnly: {{ editing|yesno:"false,true" }}
});

在我的casperjs脚本中，我试图以这种方式访问编辑器

var ckeditor = this.evaluate(function () {
      return document.querySelector('#id_content').contentWindow.CKEDITOR; 
});

ckeditor.instances.id_content.setData( '<p>AAA bbb CCC</p>' );

基于我在这篇文章access-javascript-ckeditor-object-within-an-iframe中读到的内容，但控制台输出如下

FAIL TypeError: 'null' is not an object (evaluating 'ckeditor.instances')

有什么想法吗？谢谢！

修改

如果我尝试在evaluate方法中执行所有操作，则ckeditor内容不会更改。以下代码

var ckeditor = this.evaluate(function () {  
    var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR;
    ckeditor.instances.id_content.setData('<p>AAA bbb CCC </p>'); 
});

this.test.assertField('content', '<p>AAA bbb CCC</p>');

输出失败

FAIL "content" input field has the value "<p>AAA bbb CCC</p>"
#    type: assertField
#    code: this.test.assertField('content', '<p>AAA bbb CCC</p>');
#    subject: false
#    inputName: "content" 
#    actual: "<p>In et qui nobis eos. Rem impedit ullam nihil placeat in. Et ea explicabo earum quam. Earum rerum ipsum ea soluta.</p>\n"
#    expected: "<p>AAA bbb CCC</p>"

Answer 1

您无法在casperjs（和phantomjs）中向页面上下文传递函数。您只能传递Number，String，[]和{}等基元。因此contentWindow.CKEDITOR可能是使用new创建的对象。您需要在页面上下文中完成所有内容，并将必要的字符串传递到页面上下文中：

var data = '<p>AAA bbb CCC</p>';
this.evaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);

为了确保ckeditor有时间对页面进行所有调整，您可以wait一点点：

this.thenEvaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);
this.wait(1000, function(){
    this.test.assertField('content', '<p>AAA bbb CCC</p>');
}); // sec

甚至等待具体数据：

var x = require("casper").selectXPath;
this.thenEvaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);
this.waitForSelector(x("//*[contains(text(),'AAA bbb CCC')]"), function(){
    this.test.assertField('content', '<p>AAA bbb CCC</p>');
});

从casperjs测试脚本访问ckeditor

1 个答案: