Integrate CKEditor

[jgarber]

Ready for a curve ball? I eventually want to teach people to use shortcut keys, so the text input area needs to have some formatting. I was going to wait to do this until much later, but given that:

1. It will take more work to switch over the longer we wait, and
2. The error highlighting doesn't always work quite right—try typing a bunch of letters quickly, and
3. Why not let someone else do the hard work of cross-browser compatibility?

...I decided to put in a WYSIWYG editor right now. I tried out many different WYSIWYG options on various browsers and decided CKEditor is the best choice for this simple application. The only case in which its formatting shortcuts don't work properly is with the Dvorak-Qwerty keyboard layout in Firefox on Mac. Plus it has a spell-checker plugin that I intend to adapt for doing the error highlighting.

I realize that this switch will break a lot and I'm not skilled enough to hook the events back up. Sorry! Hope you can figure it out. Here are some references:

http://docs.cksource.com/Talk:CKEditor_3.x/Developers_Guide http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter

CKEditor has its own event handling, but maybe the events bubble up and you can capture them higher? Work on hooking up the events to keyboard, lesson, and timer. We'll leave the error-checking/highlighting piece until last.

Thanks! Jason

[Gonzih]

So I started working on ckeditor integration in separated branch. I replaced old editable div with ckeditor.

[jgarber]

Brilliant! Thank you so much! Clearly I have no idea what I'm doing. :-)

On Wed, Feb 29, 2012 at 6:50 AM, Max Gonzih < reply@reply.github.com

wrote:

So I started working on ckeditor integration in separated branch. I replaced old editable div with ckeditor.

---

Reply to this email directly or view it on GitHub:

https://github.com/jgarber/dvorak-typing-tutor/issues/9#issuecomment-4236155

[Gonzih]

Now I'm thinking about how to implement spell-chenking in CKEditor. By default CKEditor uses scayt. Scayt sends ajax requests to WebSpellChecker.net and receives response with errors. WebSpellChecker.net provide solution for custom spell-check dictionaries only for licensed version (https://www.webspellchecker.net/fcklicensed/). Also solution with ajax request is to slow for typing tutorial. I found Aspell plugin for CKEditor, but still it works via ajax requests to java server.

Any ideas?

[jgarber]

Okay, the SCAYT solution is a no-go; they have that thing locked down tight and repurposing it isn't going to work well. However, I did find the "yaspeller plugin":https://github.com/ppavel/ckeditor-yaspeller that seems promising. I hacked on it a bit in the yaspeller branch and made some good progress today, but currently I'm stuck on why it is eating every space. Once I got that figured out, I was going to remove the punctuation stripping so that missing a comma or period would trigger the error highlighting. Then I was going to have to figure out how to compare what was typed against the reference text to highlight the errors.

I'm feeling like we're headed in the right direction, but you have far superior Javascript skills and could probably make a better assessment. Shall we (by which I mean mostly you :-)) keep hacking on the yaspeller plugin? Or would you like to build something from scratch using yaspeller as a reference? Have a look at my commits and tell me what you think. I trust your judgement.

Thanks!

[jgarber]

...and ten seconds later, I realized the problem: I needed to change the event binding to keyup instead of keydown. :-)

[jgarber]

Of course we'll want all the next-letter prompting, sample text highlighting and scrolling and error beeps that we had earlier, in addition to error highlighting (spell-check). The benefit of this plugin is the filters (so the error highlighting spans don't get mangled when you delete), the context menu for word suggestions (which in our case will only ever have one suggestion--the correct one), and range handling. If you want to keep just the good parts and do your own plugin in Coffeescript, please feel free to do so. Whatever you think will give us the best long-term flexibility and maintainability.

[jgarber]

I found an obscure source on GitHub where someone improved yaspell and called it openscayt. It still has some of the same bugs I was fighting in yaspell (like jumping to the beginning of a misspelled word while manually trying to correct it), but it looks like they improved it some and the code is much more readable. I wonder if we could even just leave the plugin untouched and then override the askRemote function to just ask locally.

It's on a new branch called openscayt.

[Gonzih]

@jgarber yes, I was thinking about same solution yesterday. I will try to take a look at openscayt on the next week. Also my exams starts on the next week, so I can be unavailable, but you always can contact me via github or email.

[jgarber]

Great! Enjoy your weekend! Thanks!

Sent from my iPhone

On Mar 9, 2012, at 7:49 AM, Max Gonzih reply@reply.github.com wrote:

@jgarber yes, I was thinking about same solution yesterday. I will try to take a look at openscayt on the next week. Also my exams starts on the next week, so I can be unavailable, but you always can contact me via github or email.

---

Reply to this email directly or view it on GitHub: https://github.com/jgarber/dvorak-typing-tutor/issues/9#issuecomment-4415820

[Gonzih]

Hi, I created App.Scayt class that returns errors like remote service. I hooked it to openscayt plugin but it didn't work yet :) I will try to figure it out in future, but I think it will be not early than april, since I'm busy with my exams and etc now.

Thanks!

[jgarber]

Thanks for your great work on it! Let me know when you're ready to start up again.

Good luck with exams! How long until you graduate?

Developers of your quality are hard to find outside the U.S. and within the country they're ridiculously expensive, which is good for me as a worker but makes it tougher to find help. I was at Pivotal Labs in New York City yesterday, where there's a room full of Ruby developers (100 maybe?) billing their clients $200/hr or more. All that to say, when you have full-time availability, I'm sure you'll be able to do quite well for yourself working remotely from Belarus though some U.S. contacts. Nevertheless, I applaud your commitment to finish your education. You can't re-live your university days later on. :-)

Best of luck, Jason

On Tue, Mar 13, 2012 at 6:40 AM, Max Gonzih < reply@reply.github.com

wrote:

Hi, I created App.Scayt class that returns errors like remote service. I hooked it to openscayt plugin but it didn't work yet :) I will try to figure it out in future, but I think it will be not early than april, since i'm busy with my exams and etc now.

Thanks!

---

Reply to this email directly or view it on GitHub:

https://github.com/jgarber/dvorak-typing-tutor/issues/9#issuecomment-4470837

[Gonzih]

Thanks, 2 years left until graduate.

[Gonzih]

Hi, I'm back and in next few days will continue work on project!

[jgarber]

Great! Let me know if you need any direction. Thanks! Jason

On Wed, Apr 4, 2012 at 10:32 AM, Max Gonzih < reply@reply.github.com

wrote:

Hi, I'm back and in next few days will continue work on project!

---

Reply to this email directly or view it on GitHub:

https://github.com/jgarber/dvorak-typing-tutor/issues/9#issuecomment-4954571

[Gonzih]

Openscayt integration almost finished, but I have one more issue with ckeditor. After I change content of editor events stop working. I was trying rebind them without any success. Trying to figure out what is going on.

[jgarber]

Wow, sounds hard. Good luck getting it figured out.

On Tue, Apr 10, 2012 at 10:47 AM, Max Gonzih < reply@reply.github.com

wrote:

Openscayt integration almost finished, but I have one more issue with ckeditor. After I change content of editor events stop working. I was trying rebind them without any success. Trying to figure out what is going on.

---

Reply to this email directly or view it on GitHub:

https://github.com/jgarber/dvorak-typing-tutor/issues/9#issuecomment-5047532

[Gonzih]

Integration is almost finished, I added normal scrolling to editor. Please take a look. There might be some issues with error checking since plugin triggers checking using setTimeout. Seriously saying, making that stuff using web technologies is very painful task, since there are no normal api for that. Mostly time I don't write project, but fight with browsers tricks. :)

Please take a look at the current state and tell me what do you think.

Regards, Maksim

[jgarber]

Fantastic! I've taken a look and I think we can consider the integration of the CKEditor complete! I'll post separate issues for other things.