ACE Editor: Odd Backspace or Tab behavior in Chrome/Safari

[David Levin]

Hello ACE Fans,

I recently developed a plugin for CKEditor which uses ACE as  a substitute for the source view editor.  Everything works great except for some odd behavior in Chrome and Safari.  In Chrome/Safari when I'm within ACE editor and I hit "tab" or "backspace" I am unable to type anything until I click outside of the editor and then back in.

My only clue about what could be causing this is that I'm calling the CKEditor "setData()" function to pass the value of ACE editor back to CKEditor. However it's odd that this only seems to break ACE editor in Chrome and Safari.  I've tried going through the Chrome console tool and Firebug within Firefox but I can't seem to figure out what's going on.  Any help and/or guidance to solving this little mystery would be most appreciated.

I set up a testing site if you would like to see what's going on.  (http://www.angrysam.com/ckeditortest/test.cfm) 

Here's how you can re-create the issue:

1. Open FireFox (make sure you have firebug and/or debugging console open)
2. Load the web site and click "source" in CKEditor.
3. Type something. Hit backspace. Type some more
4. Open Chrome (make sure you have debugging console open)
5. Load the web site and click "source" in CKEditor
6. Type something. Hit backspace. Type some more. You should not be able to type until you click away from the editor and back in.

Thanks,

Dave

[Harutyun Amirjanyan]

setData steals focus from Ace, and same happens with regular textarea.
I would try making demo page with textarea and not-minified ckEditor
to see what happens there

Also it would be good to move call to updateCKEditor into timeout.
Something like

var lang = ace.require("ace/lib/lang")
var sync = lang.delayedCall(updateCKEditor)
ace.on("change", function(){sync.schedule(100))

[Harutyun Amirjanyan]

it appears to be caused by a bug in chrome
call to
window.getSelection().removeAllRanges()
removes textarea selections too

if there is no way to do the same without calling setData
you can save with a very long timeout and restore selection in textarea

function updateCKEditor() {
var textarea = aceEditor.textInput.getElement();
var r = [t.selectionStart, t.selectionEnd];
// Set the data of the CKEditor to the value of ACE Editor
editor.setData(aceEditor.getSession().getValue(), function() {
[textarea.selectionStart, textarea.selectionEnd] = r;
}, false);
}