Public release of new Google Maps for CKEditor might finally see the light of day

For quite some time I've got almost ready a port of the Google Maps plugin for FCKeditor to the latest version of each API: Google Maps 3 and CKEditor 3, but there was a major problem that I wasn't happy about and that was the lack in GMaps 3 of the ability to create and edit polylines and areas.

I could have go ahead and state that it's finished without such feature, but that wouldn't be honest.

Or I could have worked out my own implementation, but I already created such code in the old times and I wouldn't like to do it again because I can't spend enough time polishing any issues and making sure that the code works correctly and that it's correctly optimized.

So I waited and waited...

And finally, yes, today they have stated that they plan to release it in the first quarter.

With this light at the end of the tunnel I'll try to verify that everything else keeps working as I left it some months ago and I'll be very happy to state that it's finally released even if there are some other missing features from v2.

Christmas present: WriteArea 1.0 is available

Last night, Jorge Villalobos as Mozilla reviewer approved the 1.0 version of Write Area as an update, so now you should start getting update notifications for this version.

What do you get with Write Area 1.0?

With Write Area you can use the best WYSIWYG web editor inside your Firefox: in any site that allows to input HTML, either with a textarea or even from other not-so capable editors, you can launch Write Area using the context menu and that way you'll get full editing capabilities.

This version has been adjusted to avoid the existing problems with Firefox 4, so the upgrade of Firefox should not cause you any trouble. Some other details have been improved like focusing existing instances.

The internal editor core has been changed from the old FCKeditor 2.6 to the latest CKEditor 3.5, so future upgrades should come out sooner now that the used editor is again one under very active development. Nevertheless, updates in an extension requires review by a AMO editor, so instead of releasing an upgrade with every CKEditor release I might publish a "beta channel" version for minor updates and a full one where there's a new milestone or some important bugs fixed.

Besides that, you can keep using the internal Firefox spellchecker in a normal installation of CKEditor if you install the Gecko SpellChecker plugin.

Go ahead, click and install this extension.

(another post powered by Write Area)

Little test of Firefox 4 beta 3 for mobile

As Mozilla has just released Firefox 4 beta for mobile, and due to a talk this morning with Garry about editing in mobile I wanted to check how does it rate just in a quick test of contentEditable vs the default webkit-based browser.

The basic test at the previous post is enough for the initial checks and it doesn't require anything special, anyone can easily test if his browser includes the basic functionality expected in a modern browser.

Here's a testing area again:

Type here.., a link (it's part of the content, so it shouldn't be active)

First test: I click on the div and a caret shows up. Firefox 1, Webkit 0 (nothing signals that the editable zone has focus)

Second test: scrolling with the trackball moves the caret. Firefox 2, Webkit 0 (it scrolls the screen)

Third one: clicking on the link doesn't tries to open it. Firefox 3, Webkit 0 (it opens the linked Google page)

Fourth: The keyboard opens automatically when the div is focused. Firefox 4, Webkit 0 (You must open it by long pressing the Menu key)

Fifth: Typing (default keyboard) is slooow, very very slow. Firefox 4, Webkit 1 (in this page it works as fast as any other input field)

Sixth: Typing with Swiftkey, it tries to edit the contents, it's almost impossible to use it. 8pen seems to behave a little better. It seems that the Android browser tells the keyboard to send only single characters or to ignore autocomplete, I don't know how to explain it, but for this situation I think that using the Webkit method works better. Firefox 4, Webkit 2

Seventh: tweaking the CKEditor env.js file to allow the Android browser, we can test it in the full environment. The context menu opens/remains open at the 0x0 of the content, trying to type anything is almost impossible, the editor gets the focus, the keyboard opens and then it's closed automatically. Firefox 4, Webkit 3. The context menu doesn't show up and once the keyboard is forced it remains there. This could be something that can be tweaked in CKEditor, as the simple test doesn't behaves so badly.

Conclusion:

None of them are usable :-(

Maybe Firefox could be much better if it was able to select/configure the way that the keyboard opens, and then we should try to understand why it behaves that way in the full editor. Besides that, Firefox is still missing other features (the zoom function seems much worse than webkit) so we just need to be sure to fill a ticket with Firefox so they might fix it in the future.

Edit 1: I've filed bug 621438 for the Firefox problems with the keyboard.

Updating translations in CKEditor

CKEditor is fully coded so it can be used in any language (many other simple WYSIWYG editors work in only one language), it just needs the translations for the used strings, and that task is done by providing a language file as found in the _source/lang folder.

Currently it ships with 57 translations, but unfortunately many of them are quite outdated in my point of view, so in order to avoid wasting too much space with outdated files I've chose to remove any language that is missing over 200 sentences (the total number of entries for 3.5 right now is 346)

That means that Write Area 0.9.5a2 includes only 32 languages (saving 90Kb), but as I said, I'm planning on removing languages that are missing more than 100 entries, than means removing other 13 files and the savings won't be as big as the first removal, but i don't see a reason to ship something that only works half of the time. If the user sees dialogs with mixed English and local language I think that it might look more weird than seeing everything in English.

But there's something that you can do if you want to see a fully translated CKEditor: provide an updated translation to your locale.

The steps are quite easy:

1. Get the nightly version (it's based on 3.4x instead of 3.5x so it won't include all the new entries, but that's one of the problems with the current dual branch method). 
2. Extract the zip to any folder in your computer (you don't even need a web server for this task)
3. Open one of the files under _samples, for example _samples/replacebyclass.html
4. That should work and you should be able to perform any operation with CKEditor (besides saving the contents)
5. Now replace the "lang" folder with "_source/lang", so it's easier to edit the files
6. Open the file for your language with a text editor (be careful, files are encoded as UTF8+BOM, so if you are using an old editor it might not open correctly) and search for entries marked with "// MISSING"
7. You can see there the English text, so write your translations, save and then it's time to check that now they work correctly.
8. By opening the files from the disk usually it isn't needed to clear the cache, but at the very least you'll have to reload the page in your browser, if you don't see any change, then try to close the browser and open it again.
9. When you have finished updating your locale, go to http://dev.ckeditor.com/wiki/Bugs and read quickly the steps. The most important part is that you have to create an account and after that you can create a new ticket.
10. Provide a brief summary "Updated Italian translation" select as Component "UI: Language" and put something simple in the summary stating any notes that you want to add.
11. Mark the "I have files to attach" and click "Create ticket"
12. attach your translation and if everything is OK your updated translation will be added for the next release.

Something important to note: Take a look first, maybe someone else has already provided an updated translation and it's just waiting to be added.

And of course, besides adding missing entries you can try to provide corrections over existing sentences, but in that case it's not as easy for us to know if the first translation is really bad and your new suggestion is better, so it's better if you can try to find the original translator and both of you agree with a new file. There are times when someone provides a translation but without looking at those sentences in CKEditor, so maybe the text is too long and is displayed poorly, or it doesn't fit correctly with the rest of the dialog, that's why it's important for you repeat steps 7-8 and check that your new entries fit correctly with the rest of the dialog.

Setting 100% height in CKEditor

In CKEditor the config.height setting doesn't allow  to use percentages, only fixed sizes are supported, but that is not good when you try to provide a dialog that is just the editor without any extra stuff (like in this Write Area pane).

The available option is to use the maximize plugin and execute it using the instanceReady event; that has some little problems:

• You have to keep the maximize plugin into the code, although you want to execute it just once.
• If you try to remove the maximize button from the toolbar, you'll get an error.
• There's a flicker while the editor is first created and then resized.

The way to avoid those problems is to adjust the CSS in your main page, these are the rules that I've included in Write Area to get 100% without the previous problems (keep in mind that I've tested only in Firefox, at the very least you'll have to provide the "cke_browser_gecko" rule also for other browsers (ie, webkit, opera) and test if there are other problems.

span.cke_skin_kama, span.cke_skin_office2003, span.cke_skin_v2 {
 padding:0  !important;
 border:0  !important;
 -moz-border-radius:0  !important; 
 height:100%;
}

span.cke_browser_gecko {
 height:100% !important;
 display:block;
}

.cke_skin_kama .cke_editor, .cke_skin_office2003 .cke_editor, .cke_skin_v2 .cke_editor,
.cke_skin_office2003 .cke_wrapper, .cke_skin_v2 .cke_wrapper {
 height:100%;
}

.cke_skin_kama .cke_wrapper {
 padding:0 !important;
 height:100%;
}

 

Testing the new Write Area

I think that I've found the problem that caused Write Area to reset the toolbar configuration in Firefox 4.

Let's hope that the rest of adjustments are fine and I can release this version soon (yes, it includes CKEditor, the 3.5 SVN. It weights 483 Kb, so I'm not sure about trying to remove more things that aren't too useful)

Update 1:

I've reduced 90Kb by removing the translations that had over 200 missing entries. It might make sense to even remove translations with over 100 missing entries.

Currently there's a problem as the toolbar Cut and Copy commands don't work like they used to do (without any warning), so I'll have to check what has been changed. I've fixed that problem with a little change, due to the default security settings I don't think that many people have been able to test that code before.

Update 2:

The current work is available in the "beta channel", you can get it in the Write Area page, and scroll down searching for "beta channel". I've removed several plugins, looked for unused files, and everything that I could find to easily reduce the size (changing the core to remove code for other browsers is not a valid option in the long term).

I've applied also some fixes that might not be available in 3.5, but I think that they provide a better experience. Some parts might not work correctly as the 3.5 still isn't finished and there might be unexpected bugs.