Question

我在ckeditor实例的textarea中应用背景颜色时遇到一些问题。

当用户点击“提交”而不添加任何文字时，会显示一条消息，告诉他填写所有必填字段，这些必填字段区域的所有文字字段都设置为background-color: #CFC183;。

由于使用javascript代码创建了ckeditor，我正在使用它来尝试检查文本区域中是否输入了任何文本。如果没有字符，我会应用更改。当我在控制台中应用此代码时：

CKEDITOR.instances.body.document.getBody().setStyle('background-color', '#CFC183');

它完全按我想要的方式应用背景。所以，我在我的javascript文件中添加了这个javascript代码以尝试管理它，但似乎没有工作。这是我的代码：

var editorInstance = CKEDITOR.replace('body', { toolbar : 'Full' });
editorInstance.on("instanceReady", function (ev) { 
    var editorCKE = CKEDITOR.instances.body; readyMap[editorCKE] = true;
    editorCKE.setReadOnly(true); 
});
var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();
if (!hasText) { 
    CKEDITOR.on('instanceCreated', function(e) { 
        e.editor.document.getBody().setStyle('background-color', '#CFC183');
    });
}

Firebug显示以下错误消息：

TypeError：CKEDITOR.instances.body.document未定义

我对Javascript不是很擅长，所以我的代码有什么问题吗？我已经在这里检查了这个question，所以我相信我的javascript代码有问题，我想要你的帮助。

Answer 1

我猜你在这行中有错误：

var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();

这是因为您正准备在文档元素准备好之前（instanceReady事件之前）获取文档元素。

这里会抛出同样的错误：

if (!hasText) { 
    CKEDITOR.on('instanceCreated', function(e) { 
        e.editor.document.getBody().setStyle('background-color', '#CFC183');
    });
}

再次 - instanceCreated还为时尚早。您必须将所有代码移动到instanceReady侦听器。你会有类似的东西（我不确定我是否理解你想要实现的目标）：

var editor = CKEDITOR.replace( 'body', { toolbar: 'Full' } );
editor.on( 'instanceReady', function( evt ) {
    readyMap[ editor.name ] = true;
    editor.setReadOnly( true ); 

    var hasText = editor.document.getBody().getFirst().getText();
    if ( !hasText ) { 
        editor.document.getBody().setStyle( 'background-color', '#CFC183' );
    }
} );

正如您所看到的，代码中还有一个问题：

readyMap[editorCKE] = true;

在JS中没有弱地图（但是，它们很快就会被引入）。只有字符串可以用作对象的键。在您的情况下，我会在toString()上调用editorCKE方法，该方法会返回[object Object]。这就是我在那里添加name属性的原因。

在ckeditor textarea中应用背景色

1 个答案: