[英]Apply background-color in ckeditor textarea
I'm having some problems to apply a background-color in the textarea of a ckeditor instance. 我在将ckeditor实例的文本区域中应用背景色时遇到一些问题。
When the user clicks on submit without adding any text, it's shown a message telling him to fill all the required fields, and these required fields areas all with the text-fields set with background-color: #CFC183;
当用户在不添加任何文本的情况下单击“提交”时,将显示一条消息,告诉他填写所有必填字段,并且所有这些必填字段区域均带有使用
background-color: #CFC183;
设置的文本字段background-color: #CFC183;
. 。
As the ckeditor is created with javascript code, I was using it to try to check if there's any text entered in the text area. 由于ckeditor是使用JavaScript代码创建的,因此我使用它来尝试检查文本区域中是否输入了任何文本。 if there's no character, I apply the changes.
如果没有字符,则应用更改。 When I apply in the console this code:
当我在控制台中应用此代码时:
CKEDITOR.instances.body.document.getBody().setStyle('background-color', '#CFC183');
It applies the background exactly like I want to. 它完全像我想要的那样应用背景。 So, I added this javascript code in my javascript file to try to manage it, but doesn't seems to be working.
因此,我将此javascript代码添加到我的javascript文件中以尝试对其进行管理,但似乎无法正常工作。 Here's my code:
这是我的代码:
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 shows this error message: Firebug显示此错误消息:
TypeError: CKEDITOR.instances.body.document is undefined
TypeError:CKEDITOR.instances.body.document未定义
I'm not that good at Javascript, so is there anything wrong with my code? 我不太擅长Javascript,所以我的代码有什么问题吗? I already checked this question here, so I believe there's something wrong with my javascript code and I want your help, please.
我已经在这里检查了这个问题 ,所以我认为我的JavaScript代码有问题,请给我帮助。
I guess that you've got an error in this line: 我猜您在这一行中有一个错误:
var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();
This is because you're trying to get document element before it's ready (before instanceReady
event). 这是因为您试图在文档元素准备好之前(在
instanceReady
事件之前)获取文档元素。
The same error will be thrown here: 同样的错误将在这里抛出:
if (!hasText) {
CKEDITOR.on('instanceCreated', function(e) {
e.editor.document.getBody().setStyle('background-color', '#CFC183');
});
}
Again - instanceCreated
is still too early. 再次-
instanceCreated
还为时尚早。 You have to move all that code to instanceReady
listener. 您必须将所有代码移至
instanceReady
侦听器。 You'll have something like (I'm not sure if I understand what you're trying to achieve): 您会遇到类似的情况(我不确定我是否理解您要实现的目标):
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' );
}
} );
As you can see, there is one more issue in your code: 如您所见,您的代码中还有另外一个问题:
readyMap[editorCKE] = true;
In JS there are no weak maps (yet, but they will be introduced soon). 在JS中,没有弱映射(但是,很快就会引入)。 Only strings can be used as a keys of an object.
只能将字符串用作对象的键。 In your case
toString()
method will be called on editorCKE
, which returns [object Object]
. 在您的情况下,将在
editorCKE
上调用toString()
方法,该方法返回[object Object]
。 That's why I added name
property there. 这就是为什么我在此处添加
name
属性的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.