Toolbar buttons in Writearea

Since version 1.1 it's possible to configure which buttons do you want to use in the toolbar of Writearea. There are in fact two toolbars and you can switch between them with a custom button.

The way to define the buttons is to use the preferences pane of Writearea and put the array of buttons in the corresponding input fields. Note that to try to help a little, you don't need to put the outer [ and ], just the groups separated by commas and with a '/' if you want to start a new row.

These are the default values for each toolbar:

Full Toolbar:
['Save'], ['SaveFile','LoadFile'], ['Source'],['Cut','Copy','Paste','PasteText','PasteFromWord'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['ShowBlocks','Maximize'],['Image','Flash','Table','HorizontalRule','SpecialChar','Iframe'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['BidiLtr', 'BidiRtl' ],'/',['Styles','Format','Font','FontSize'],['Bold','Italic','Underline','Strike'],['TextColor','BGColor'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv','Code'],['Link','Unlink','Anchor'],['SwitchToolbar']

['Undo','Redo'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],['SwitchToolbar']

Most of the commands are the ones available on the default CKEditor install, I don't know if there's any listing of the meaning of all of them, the best thing that I can think of is the user's guide, but it doesn't clearly link the button names with its action.

But beyond those common buttons, there are a few ones with special meaning here:

Custom buttons

'Save': It's available only while in the dialog popup, it will save the content of the editor to the original element. When the editor is integrated into the page you should use the existing save button provided by the page, that way there won't be any problem due to extra event handlers or differences between Save draft, Publish and Preview buttons of the page.

'SaveFile', 'LoadFile': These two options allows you to save/load the content of the editor to a file in your computer, just in case the page doesn't have any auto-save feature or you want to use something more than once.

'SwitchToolbar': These button allows you to switch between the basic and the full toolbar. I would suggest you to use the basic toolbar by default and only switch to full toolbar when there's something extra that you need at that moment. And of course, adjust each toolbar so the basic includes the commands that you usually need and the full toolbar doesn't includes buttons that you know you'll never use.

'Code': it's the SyntaxHighlight plugin available here. I made some little adjustments, but someday I might have to perform some bigger fixes to improve it and make it easier to use.



donners said...


How can I access version 1.1?

The Firefox add-in page https://addons.mozilla.org/en-US/firefox/addon/write-area/ shows the current release as 1.0.0 and in the Development channel it is Version 1.0.1beta10.

Warm regards,

Alfonso said...

You can install that beta as the only difference is the version number, and of course you'll get new versions quicker without waiting for the full review required for stable versions.

Currently the 1.1 is waiting in the review code, at the current pace it seems that it will take at least 9 days to get to the top, I've never found such long delays before.

You can install it meanwhile from the listing of all versions: https://addons.mozilla.org/firefox/addon/write-area/versions/

Francois said...

Hi Alfonso,

We have an application that have a textarea that use lighter version FCKEditor. Your addon was working like a charm. Our customers were able with your plugin to use all CKEditor features that we were not exposing.

Now, we update our textarea to use CKEditor and from the contextual menu, we do not have access to Edit in WriteArea option anymore.

Do you already hear about this issue?


Alfonso said...

I didn't understand you at first and I thought that you were talking about a problem with the new version of WriteArea, but the problem is that you have upgraded from FCKeditor to CKEditor.

Yes, I know that CKEditor isn't recognized properly. The way that it sets the editing property is different and I didn't spend the time to include that detection.

It shouldn't be too hard, but on the other side it would be better if you could offer to launch the full editor from your CMS, that way it can be better integrated with the rest of your site.

ipinky7 said...

would it be much of an effort to add Safari support for your fantastic textarea replacment plugin?

Alfonso said...

I think that it's possible to make it work as I already created a prototype some time ago, but I always have other things to do. For example yesterday I had to spend extra time debugging why Safari in Windows is so buggy.

Besides the time, currently I'm not much interesting in providing any kind of support for a company that is suing everybody else. And even if I spend the time to create the extension I guess that they might reject it because my icon isn't nice enough.

Anonymous said...


Firefox update and Write Area does not seam to work. does anyone else have a problem?


Alfonso said...

Which versions of Firefox and Write Area?

Do you have any error?

Anonymous said...

Write Area 1.1.0
FireFox 7.1

when i click on Write area it will not open.

Alfonso said...

I used to have that version of Firefox while it was in beta and it worked fine.

Do you have the problem in all the sites?

For example, does it happen to you in this textarea?

Can you check the error console (Ctrl+Shift+J) to check if there's some error? (clear it before trying to launch Write Area)

Anonymous said...

I have not tried it on another site.

Not sure what you are asking

Here is error

Error: u is null
Source File: https://cdn3.ccbchurch.com/1/js/ckeditor/ckeditor.js
Line: 23

Alfonso said...

In order to try to help you, I first have to understand if it's a problem with your Firefox, or if it's a problem with the site where you are using the extension.

If you try in other sites like this one, in the textarea where you write the reply we can check if it's a problem with your Firefox profile, maybe some setting or a conflict with another extension.

Marian said...

hi! is possible add style to "line style" i need add this style "p style="font: 10pt/15pt Arial,sans-serif; color: #333333; text-align: justify;" >" maybe is possible add this style?

Alfonso said...

Sorry, currently it's not possible to customize the available styles.

I might try to add something about it some day.

TheBestExtension! said...

your extension is the best. But i woud like change CKeditor to TinyMce. Is possible? TinyMCE = load CSSstyle

Alfonso said...

I don't see any reason to change to tinyMCE. I'm not aware of anything special that tinyMCE provides that can't be done with CKEditor and on the other side I would need to convert my plugins to tinyMCE.

TheBestExtension! said...

i add new style: { name : 'Stylen1', element : 'p', styles : { 'color' : '#333333','font-size' : '10pt','font-family' : 'Arial,sans-serif','text-align' : 'justify',} },
But i don't know how change links color. Maybe you help me? I would like change blue color to yellow.

Alfonso said...

If you want to change the color of a link then set in its style the color to whatever you want.

Or simply select the link and change its color.

But I don't understand how you're trying to use Write Area or you're talking about something different.

Takamitsu said...

Hi. I just updated Write Area to the latest version, and I wonder how I can pop up the editor window like the older version instead of replacing a write area with a "Write Area."

Although the latest version works pretty well on most the websites, web designs on some websites get broken down after enable "Write Area" function.

Therefore, I want to pop up the "Write Area" editor instead of integrating it and replacing it with a normal writing area.

Alfonso said...

I removed that code to simplify the extension, so there is no option about that at the moment.

I would like to know better what is your problem so I can try to fix that instead of adding back that code.

Connie said...

Thank you for this wonderful browser addon!
I am glad to use this everywhere! And it works with FF 8.0.1 smoothly

Great Job done,graçias

Just here in this comment area, html is not allowed ;=)

Mark said...

Hello: It appears that Write Area is no longer available for Firefox? I would love to be able to use it as its helped my friends make great webpages.

Thanks much

Alfonso Martínez de Lizarrondo said...

Yes, I disabled it because since sometime ago I wasn't allowed to upload new versions.
They stated that as I was using a modified version of CKEditor they couldn't approve it, and trying to push whatever changes I needed into CKEditor was a dead road.

So I was in a position where I couldn't upload new versions, on each new release I had to manually update its compatibility because they were refusing to do it automatically and as so few people were ever interested in this extension I decided to pull the plug when Mozilla wasn't able to stand up for its CEO under the attack of some lgbt activists.