Another release of Write Area

The highlights about this new version are the inclusion of two plugins for FCKeditor and setting up the hooks to reuse the ImageBot extension from the image dialog.

The plugins

The first one is the the dragresizetable, I had to change the way that it works because due to a bug in the way Gecko does handles iframes placed in chrome, the resizing handles were not visible at all, so the plugin wasn't working.

I've added a workaround that should work for the moment, although it's not a perfect solution.

This is a screenshot of how it works

As soon as the cursor gets close to the central divider it turns into a horizontal double arrow, and you can use it to move the columns (a blue line appears showing how it will look like)

The second plugin is the Image Mapping plugin, I don't think that I have new info for the moment, just read the previous entry that explain its use.

Integration with ImageBot

As shown in this post, usually is necessary to add some images, and previously the only option was to upload them with a separate system and then insert in the image dialog the url that it was generated. But using two windows is boring, it's better to be able to do everything from the same enviroment.

So I had the option to create a image uploader and manager, or use an existing one.

Of course I choosed to reuse existing code, so if you have installed the ImageBot extension in Firefox, then the Image dialog will show the "Browse server" button next to the URL.

With that button you can open the ImageBot upload center, and you can add new images or use one that you did upload previously. Double click on it and it will be placed in the URL field for the image in FCKeditor.

Other changes

The preferences dialog has been coded so that it's easy to translate it (there was some strings missing), and it has been splitted in two panels to separate the code generated by FCKeditor from the aesthetics and behavior of the editor.

As with the previous versions, this one is still sandboxed, so you have to register first in addons.mozilla.org , then enable that account and mark that you want to see the items in the sandbox. Then you'll be able to see the Write Area extension and install it.

I hope that you like this changes.

Release of Image mapping plugin for FCKeditor

This is a new plugin for FCKeditor that provides the ability to easily define map areas (or so called interactive zones on any image.

The idea is quite simple and easy to use, you just select the image that you want and then press the , that will open a dialog where you can draw (using the Canvas element for Firefox, Opera and Safari, or the ExplorerCanvas for IE) the different areas that you want to link in that image.

The best part?
Thanks to the goodness of the canvas element the areas doesn't have to be only rectangular or circles, you can draw polylines, you have all the possibilities that you might need.

You can test it using the demo page for ImageMaps.

This version is based on the 2.0beta3 code released by Adam a few days ago.

PS: uploaded also to the FCKeditor plugins tracker.

IE7 leaks due to the antiphising protection

Frederico did send a message some weeks ago about a new memory leak in IE7 that it was becoming a pain as it isn't documented anywhere else and it could consume lots of memory if a page contained several instances of FCKeditor.

So he has posted a reply to the IE blog that suggest us how to use the existing tools to find the typical leaks. Some people have confirmed the problem (while others just see a reference to createPopup and have to give their opinion without bothering to test the proposed testcase)

As he has asked now for new confirmation of the problem I did a quick test and it worked fine for me, there was some slight increase over time in sIEve or Drip, but nothing so spectacular as the 1Mb per reload that he stated, so talking on the IRC channel for FCKeditor we tried to find the differences as we both have tested in XP SP2 and none of use have any special toolbar that we could blame.

Frederico confirmed that he didn't see the big problem in sIEve or Drip, but for me everything worked correctly, maybe something like 1Kb.

Then I remembered that usually there's one thing that I've done to all the IE7 installations because I never use it for surfing and the anti-phishing icon annoys me, I don't want to be distracted because a web that I'm developing hasn't been checked. Yes I know that it's safe, I'm coding it!

So I went to the advanced preferences and enabled it and OMG, now every reload of the page in IE7 took more than 1Mb of memory!

Unfortunately I don't think that too many people disable the anti-phising filter completely and just turn it off so they still suffer the memory leak.

If you want to check this, go to Tools -> Internet Options -> Advanced and scroll down to the bottom, you'll see something like this: and the solution to the memory leak is to switch that option to select the "Disable Phising Filter"

Now that the origin is clear, can we hope for some kind of fix in IE? or are we hopeless like the rest of IE bugs?

Why should I use Write Area?

I'm gonna try to reply as best as I can to the answers about this extension, giving at the same time some hints about its usage and future plans.

Why use Write Area?

It all depends on where you want to use it.

If you are using a CMS and you can control it then probably you have already installed a WYSIWYG editor of your choice, and it's tuned up exactly to work with your style sheet, your templates, images etc... Then Write Area is not for you.

On the other hand, if you are using something like this Blogger, you have only two choices: use a plain textarea or use the editor that they have choosed to implement. Writing HTML in a textarea is quite boring and even if you are used to it you can make mistakes. But if you try to use their editor and want to write something as simple as <select> (as I did in a previous post), then you might find suddendly that all of your content after that "tag" has been lost!!

I'm not kidding, it's so ugly that from that point I went inmediately to the preferences pane and disabled that editor. Writing again the content is so unpleasant that I can't believe how other people have dealed with that.

My reaction was that I needed a solution for that problem, and using FCKeditor combined with the Firefox extension system looked like a nice idea. From that point I've worked in order to integrate it, fix some minor issues due to the way the scripts run inside chrome and package it so other people might use it.

Also, even if the Blogger post editor didn't have such horrible bug, it still lacks so many things like header formatting that it looks almost like a toy to someone used to work with a powerful editor.

So besides Blogger, what other uses does it have?

The implementation doesn't have anything specific to Blogger (for the moment), it enables you to easily write HTML in any textarea (for example there are many systems where you can write certain HTML tags in the comments, but they don't provide any nice editor for that). As the extension improves it will be adjusted so it can adapt better to the different situations, now you just have to try it and don't try things too complex where it's clear that only a subset of HTML is accepted.

What about Forums?

Most of the forums out there won't accept HTML at all due to the problems trying to clean it all and don't suffer from any kind of attack, so you can't use Write Area on them. They accept what's know as BBCode, and although there's a plugin for FCKeditor that enables the use of BBCode it isn't still full developed so I've choosed not to include it until I can know for sure that it will handle properly the most commong situations (fancy BBCode extensions probably will never be handled, but I'll try to cover the common functions in most forums before including it).

Does it fully replace the Blogger post editor?

Sorry, for the moment there's one big issue remaining: upload of images. Write Area can help you to give the proper formatting for your text and images, you can include images as long as you know the URL of a web server where they are hosted, but it lacks the hooks to upload a picture from your computer to your account. I'll try to work on this issue before releasing the next version as that's from my point of view the only issue that forces me to switch between the Blogger system and Write Area.

 

Write Area 0.4, now with preferences dialog

A new version released? But the previous release was just 2 days ago!

Yes, it's soon, but these have been 2 days full of work, understanding the Firefox preferences system in order to create this "nice" dialog available from the Addons Manager:

With this dialog you can change some behavior of the editor and its look. In future versions more options might be added (after all FCKeditor has lots of possibilities), but let's review these ones.

Generate <p> on return

This option controls what is generated when you press the enter or return key. If it's checked then you will generate <p> (paragraphs), and pressing Shift+Enter will generate <br> (simple line breaks).

If the option is unchecked then the options are reversed and by default you will use <br> and can use <p> by pressing the Shift+Enter combo.

Show table borders

This one is a aesthetical issue. Trying to work with tables that have no border might be hard sometimes, so if this option is checked then you will see some ghost borders around the table and cells.

Language

By default the editor will try to use your language (that's it: the one of Firefox) for the labels, dialogs, messages. There are a bunch of them (currently one bunch == 39) included. But if you prefer to use another one you just have to disable the autoselection and choose your own one.

Fonts

This option lists the names of fonts that you want to be available under the Font formatting combo in the editor. You can add your own prefered ones or remove the existing. Remember that in the end this is just a request from you, the web author to the browser of your visitor to use certain font. There's no warranty that the visitor will have the same fonts installed on his computer than you have, so don't come here screaming because you have been told that everythings is being displayed with some boring font instead of the fancy one that you have choosed.

Skin

This is the skin for the toolbar and the dialogs, choose the one that you like the most.

Toolbar

There are two options now, both have a predefined set of buttons.

In the future I will try to bring further configuration possibilities with regard to the toolbar.

Other changes

Besides the preferences dialog, this release sets the MaxVersion of the extension as compatible with the Firefox 3 beta, and also fixes two problems reported by Martinkou in the reviews at a.m.o.

Go ahead, follow this link to install Write Area, remember that until the extension has been tested by enough people you will need to register before you are allowed to view it, it's a measure to protect Firefox users from potential dangerous extensions but you can trust me, this one is safe, all the code is just some html and js files. And if you don't trust me (after all I bet that you don't know me), then you can review its contents before installing it.

Thanks to anyone that tests it and write some review about it.

You can test now Write Area

Probably you'll wonder what's that.

Ok, WriteArea is a Firefox extension that embeds FCKeditor 2.5 inside the browser, so you can launch FCKeditor on any plain textarea and easily edit HTML without having to deal with all the source code.

For the moment it is "sandboxed", that means that it won't be available when you go just searching for an extension, instead it's available only in the Sandbox, where the new extensions are placed until enough people have reviewed them, in fact, you need to register and login to http://addons.mozilla.org in order to view it.

As I've said it needs enough people to verify that it works correctly before is available for everybody, so I would please ask you to test it and if possible write a favorable review :-)

Disclaimers and acknowledgements:

Some ideas grabbed from Xinha Here!

Icon created by http://deleket.deviantart.com

And of course, FCKeditor is © www.fckeditor.net

---

PS:

Of course this post has been written using this extension ;-)

 

Testing Write Area 0.1

This is the first test, at least now I can say that it's possible.

Maybe it's not the best integration, surely there are lots of improvements to be done, testing, cleaning up, removing things that aren't appropiate and then checking everything again but for the moment is quite nice to have this working :-)

BTW, as expected it loads really fast and the quality of the generated code, well, it's FCKeditor 2.5, so it's very good. I hope to make available a beta soon (but remember that this is done mainly due to the poor quality of the BlogSpot editor, it won't be a solution for everybody, I'm just trying to make my life easier)

Alfonso

Structure of the FCKeditor

When you are creating a plugin, one of the most repeated questions are the relationship between the editor, the original document, how to access the API..., I hope that this post helps someone to clarify his/her understanding

Traversing the page

Let's imagine that you have a simple page, and you create an editor instance in it (let's assume that you have named it FCKeditor1), it would be something like this

First we have your document, with the form that will be submitted. Inside it there's a generated iframe that will hold the toolbar (unless you have specified an external location) and the editing area. This editing area is in fact a third iframe

From your document you can call FCKeditorAPI.GetInstance("FCKeditor1") to get a reference to the FCKeditor instance. One of the properties of this object is .EditorWindow that returns a reference to the iframe window number 3. Remember that this window is destroyed when the user switch to source view, so don't cache it, get the reference when you need it and check that it isn't null.

When you create a plugin it runs in the content of the second iframe, and you can get a reference to the current FCKeditor instance via the FCK object, so you can check again FCK.EditorWindow to get a reference to the third iframe (where the edited content lives)

To get a reference from your plugin to the parent document, one of the best ways is to use the LinkedField property of the FCK object, it holds a reference to the <textarea> or <input> that will be submitted with the content of the editor, so this way you can check anything that you want about that field or about its form.

The most important point is: get a reference to the FCKeditor instance and then move up or down from that point. Don't try to guess, there are clear and easy ways that will make your life easier

What happens when I launch a popup?

If you are using a new window, (via window.open) from your plugin then you can get a reference to the instance reading from your popup the window.opener.FCK property.

If you are using the FCKDialogCommand to launch the new dialog (this is the recommended way unless you have a special requirement), then you get a reference to the window object of the second iframe when you call the window.parent.InnerDialogLoaded() function, so hold that reference var oEditor = window.parent.InnerDialogLoaded(); and call it when needed: oEditor.FCK

I think that this covers all the possible situations, and I hope that I didn't overlook anything