Hello,
I would like to change cursor icon in the EDITABLE AREA of ckeditor as aresult of some action from context menu.[By editable area I mean this part of editor where you can write something (initially it is only the first line of editor.]
I have managed to do that in Firefox using this simple jQuery command:
$('iframe').contents().find("body.cke_show_borders").css('cursor','url('myurl'),default');
The style is applied and everything is working fine - the cursor is changed.
But in IE8 it does not work - the cursor is still the same, although the style attribute of this element is set correctly. This line of code is working on every other part of my page, also in IE, that's why I am sure that is a ckeditor specific problem, it looks like ckeditor in ie is blocking or overriding this cursor style in some way.
Could you please tell me what I can do to make it work in IE?
Things that I have tried:
-binding action to onmouseover on ("body.cke_show_borders") element event that is changing cursor
-applying style on html or iframe element of ckeditor - the result is that cursor changed in the entire editor apart from the editable area.
Regards
I would like to change cursor icon in the EDITABLE AREA of ckeditor as aresult of some action from context menu.[By editable area I mean this part of editor where you can write something (initially it is only the first line of editor.]
I have managed to do that in Firefox using this simple jQuery command:
$('iframe').contents().find("body.cke_show_borders").css('cursor','url('myurl'),default');
The style is applied and everything is working fine - the cursor is changed.
But in IE8 it does not work - the cursor is still the same, although the style attribute of this element is set correctly. This line of code is working on every other part of my page, also in IE, that's why I am sure that is a ckeditor specific problem, it looks like ckeditor in ie is blocking or overriding this cursor style in some way.
Could you please tell me what I can do to make it work in IE?
Things that I have tried:
-binding action to onmouseover on ("body.cke_show_borders") element event that is changing cursor
-applying style on html or iframe element of ckeditor - the result is that cursor changed in the entire editor apart from the editable area.
Regards
Re: How to change cursor icon in editable area dynamically?
Hi tlewicki,
my (Untested but very sound) solution to achieve your goal is as follows :
Use config.contentsCss to pre-define a single class for the body tag. For example : -
body.custom-cursor{cursor:url('myurl')}as css in a file that you add to the contentsCss array.
Then, when ever you want the cursor to change, use something like : -
$('iframe').contents().find('body.cke_show_borders').addClass('custom-cursor');to set the new cursor style when your chosen event is triggered and then : -
$('iframe').contents().find('body.cke_show_borders').removeClass('custom-cursor');when the event fires which indicates that the cursor should be returned to normal.
This method is similar to the way jQuery UI creates it's styles on the fly.
jQuery addClass function
jQuery UI addClass demonstration
The only reason that I could think of that this method would not work in your case, is if the editarea iframe tag's class is not 'cke_show_borders' in IE. I haven't looked in CKEditor's code to see if it does change the body class name if IE is used, I don't see why it would but I would understand if it did, if CKEditor must do so to workaround some of the terrible bugs in IE.
So you may want to check that the body class name you are selecting is correct using Internet Explorer's developer tool bar.
The thing is, that you don't need to use jQuery at all to do the adding and removing of the classes. You _should_ use the CKEditor API instead because it means that you don't need to rely on a (Bloated but very common and functional) third party javascript library. Then your plugin or implementation can depend only on CKEditor's core API.
CKEditor addClass
CKEditor removeClass
Honestly; learn the CKEditor JavaScript API and you won't need to rely at all on jQuery (Unless the goal is very obscure, extreme or jQuery specific) to do anything with CKEditor.
It's that good. The API is very concise.
Using jQuery with CKEditor is overkill and bloat IMO. However, use whatever works best for you.
It doesn't surprise me one bit that the methods which you have tried already don't work in IE. I feel your pain and the sooner everyone wises up and starts using a web browser instead of an Internet Explorer, the sooner the web can evolve and forward thinking new wave applications can come to the forefront of web design and web developers can stop wasting their time developing for substandard software which is not standards compliant or relevant to the forward thinking open web of the future.
Thanks,
Zanpakutō
Re: How to change cursor icon in editable area dynamically?
I have tried your solution but unfortunately it still does not work in IE. Despite of testing solution with 'addClass' function that you suggested I have also tried 'setStyle' function form CKeditor API, but with no luck.
The id of this element is ok, it is the same like in Firefox. What's more, I have managed to change some other styles attributes - for example color or background.
To sum up, this code works well in IE:
var element = $('iframe').contents().find('body.cke_show_borders').get(0); elem=CKEDITOR.dom.element.get( element ) elem.setStyle("color", "green");but this one doesn't:
var element = $('iframe').contents().find('body.cke_show_borders').get(0); elem=CKEDITOR.dom.element.get( element ) elem.setStyle("cursor", "pointer")It looks like setting this particular 'cursor' attribute in IE is broken. Could you please give me any other suggestions?
Re: How to change cursor icon in editable area dynamically?
Hi tlewicki,
Which version of IE? Don't expect much from IE6. It struggles to even render web pages, let alone perform DOM operations afterwards.
In :
var element = $('iframe').contents().find('body.cke_show_borders').get(0); elem=CKEDITOR.dom.element.get( element ) elem.setStyle("cursor", "pointer")You should try :
var element = $('iframe').contents().find('body.cke_show_borders').get(0), elem = CKEDITOR.dom.element.get( element ); elem.setStyle('cursor', 'pointer');because it doesn't look like you are declaring elem correctly in what you've posted. IE is funny about semi - colons because it uses it's own crap type of javascript called jscript, which is not compliant ECMA javascript.
Microsoft decided once again that they knew better than a standards group's specification and implemented their own (Worse) version.
So stuff with missing semi-colons will usually work in Firefox but usually never IE.
If it's not that, then I have no other way to suggest because I don't even have a copy of IE. If you don't find a solution, it's best to put it down to a browser bug and degrade the feature gracefully in IE using jQuery's jQuery.support.
As you can see on that page, IE doesn't support most things jQuery wants to do (It also gives me ammo as to why IE should just be completely avoided by everyone like a bad joke.)
If it was just that you hadn't declared elem correctly, brush up on your javascript a bit and you'll be able to spot errors like that more easily in future.
Good luck!
Thanks,
Zanpakutō
Re: How to change cursor icon in editable area dynamically?
Thank you for your reply and I really appreaciate your help.
So it looks like IE 'contenteditable' implemntation has some bugs and does not allow me to change cursor property.
I have checked it and it is not the problem with javascript and semicolons. It is just something with this cursor property, as I have written before - changing other style attributes i.e. colors, using very similar scripts works fine.
I have just discovered that the cause of this problem is 'contenteditable' attribute of body element that is used by CKEditor, when this attribtue is set to false - cursor can be easily changed, but of course it is not a solution because editor is not editable anymore
Do you have any ideas, suggestions?
BTW,I am using IE 8.
Re: How to change cursor icon in editable area dynamically?
file a bug report because there isn't a switch for turning contenteditable off in CKEditor. It's pretty new.
I just looked through the code and realised there is a huge amount of kludging going on around content editable for IE. There is bound to be loads of bugs related to it. IE doesn't and if IE 6, 7 and 8 are anything to go by, never will support web standards correctly ever. Let alone HTML 5.
Thanks,
Zanpakutō
Re: How to change cursor icon in editable area dynamically?
I was determined to find any acceptable solution for that and I have also asked on other forum
and here is a solution. You have to experiment iwth doctype definition for ckeditor iframe (it is easy to change it by config.docType), for me everything works fine (int IE8 )with this one:
Thanks for your help.
I have gone through the given
I have gone through the given link above, but I could not find the solution for the problem. Is there any solution for the question in that link?