Today I've uploaded a beta version of WriteArea to AMO, as I said, it has been updated to CKEditor 3.5.1 but besides that it includes (finally) a feature that it's the way that most of us expected the editor to behave: in-page editing.
This means that the editor is integrated into the page instead of a bottom pane or popup dialog. This feature is still experimental and there might be some unexpected problems, so please be careful (by saving drafts or copy&paste of the contents) before submitting the form.
This feature might have some improvements before the final release, but you can already start testing it
Some drawbacks (at least for the moment):
- It's not possible to revert the action, once the editor is created it only goes away when the page reloads (might not be a big problem)
- The clipboard operations are again restricted by default.
- The Open/Save draft features are no longer available. Maybe I'll adapt them to use HTML5 storage instead of saving to file.
Benefits:
- It's just easier to use and understand
- There can be multiple editors in the same page
- A button can be added so all the textareas are converted without using the context menu
Please, test it and tell me if you notice some problem or if you think that this is really the way to go and the other options should go away.
16 comments:
TNT:
I'm using WhiteArea right now. I know some folks doing collaborative editing under a Drupal website. They could incorporate CKEditor into their site but this could be easier for them.
Firefox is cross platform but some folks are just used to using IExplorer and Safori. For me, Firefox is the way to go. When your project becomes more mature, I'd like to use this extension in a 'hand crafted' build of Firefox I'm working on. I'm gathering as many no nonsense extensions as I can that build in as much 'out of the box' usability I can fit in. Most folks won't push their web browsers to the limit, so I'll do it for them. If they have it, they'll use it, I'm guessing. I'm using portable Firefox so I can create a 'snapshot' of what I call 'HotFox' with just the right features configured the right way.
I'm surprised more folks don't do that.
Anyway, I beta test with lots of folk in my endeavor to make the perfect Fox and I'll do my best to help you out here.
Having the spell-checker and context menu on the CKEditor page would be nice and I figure you're working on that so I don't consider it an issue. I just go to the 'Source' page to do that now.
Have you implemented the 'auto integration' yet? That is the setting I would prefer to use because folk won't take advantage of something if it's not right there in front of them.
I've had some conflict with your window re-sizer. I use an element re-sizer/mover that might be the problem. Find it here:
http://netticat.ath.cx/TextAreaResizer/TextAreaResizer.htm
Also, some Drupal pages I use already have a vertical re-sizer. Could you make your re-sizer toggle with a left click and re-size with the right? I'll try disabling the other extension to see if it works better that way.
Is there any way to customize the toolbar? I would like to reduce the feature set to reflect what most forums and comment sites accept.
Might as well put it through it's paces while I'm here. Hope this works;
Bold, italic,
How's that for starters. For a beta, pretty stable. You seem to be taking this in the right direction. Having a client side editor built in means folks always get the same experience no matter what site they post on.<
tinker (John Gardi)
I'm glad that you liked this extension, it would be nice if you could write a short comment at AMO to help other people find it.
I didn't realize that the spellchecker was disabled in the integrated mode, I'll add it back in the next version as that code should already work. Currently you can select in the options page if you want the full toolbar or a basic one, I know that it would be very good to provide some way to customize the buttons, but that might mean lot of work and I don't have so much time. Another thing that I might do some day is to adjust the toolbar so it's the basic one when the size of the editor is small and turn into a full featured only when there's enough space, but this is just some idea, it might take several months to code it.
The resizer is the one available in CKEditor, I don't know what are the problems caused with other resizers, but the solution is usually to pick your choice and use only one of them, also remember that textareas are resizable by default in Firefox 4 and it's gonna be released really soon now.
With regards to integration with other sites, it's usually much better if the editor is provided by the page itself because in that case it will provide correct integration with the rest of the site: the Styles can be adjusted with the set of styles used in the site and the link and image dialogs are enhanced with a file browser that shows pages, files and images available in that site. That it's something that can be done with a generic textarea replacement.
Alfonso
I'd be glad to post on 'AMO' if I could, for the life of me, decipher the acronym :).
Thanks for looking into re-hooking up the spell-checker, I can't live without it. If I use the basic toolbar, I don't have a 'Source' button... so, no spell-checker. But that's good because with the spell-checker, I don't think you need one. The basic toolbar is perfect otherwise. I'm looking for simple, no brainer, solutions here.
I disabled the other re-sizing extension and all problems gone. When I am on a Drupal page, your re-sizer works in WYSIWYG mode, Drupals works in 'Source' mode, as it should be.
Here's an idea. You should make more use of your bottom bar, where the re-sizer is. You could put 'Load...' and 'Save...' buttons so folks can load an save drafts from disk. Maybe a toggle for full and simple edit mode so you could do that on the fly without having to go to 'Add-ons'.
Don't worry too much about Firefox 4 right now. Support it, yes, but don't expect any general acceptance for a while. Once they get most of the bugs out, it'll be the turn of the extension artists, like yourself, to catch up. I give it a year. By then, HTML5 and WebM should be in full swing.
tinker (John Gardi)
Hi Alfonso,
I just gave WriteArea 1.0.1 beta 1 a try, both on Firefox 3.6 and 4 beta.
I realize that you're not yet support Firefox 4; however, I was wondering if you could confirm something, as it might be a bug in Firefox 4 and I'll need to file a bug report for it.
With Firefox 4, tags containing "br /" get added to the HTML output from WriteArea. It doesn't exist with Firefox 3.6.
If it's not being generated by WriteArea, please let me know, as it may be a remnant from one of the Firefox bugs and I would like to report it.
Thanks
@tinker: AMO is Addons.Mozilla.Org, more exactly here: https://addons.mozilla.org/es-ES/firefox/addon/write-area/ :-)
I've uploaded now a beta2 with the missing spellchecker.
The open&save buttons are available when you launch the editor in a pane or dialog, but if it's embedded into the page then it won't have priviledges to work with files, that's why I said in the post that I might have to alter them to use localStorage or something similar, but they will be available in the toolbar, putting them in the status bar means extra work.
And I disagree about you with regards to Firefox 4, as soon as Firebug works correctly I'm gonna switch and I won't look back to the older versions. I don't see any reason to keep using an older version when the new one is available, is faster, more featured and in general is a better product.
@Petra
I support Firefox 4 although I don't perform extensive tests about it, so there might be some unexpected issue, but in that case it's usually a problem between Firefox and CKEditor, you can check ckeditor.com/demo in order to reproduce your problem and it should be fixed quickly as Firefox 4 is almost out of the door.
Alfonso:
Where did you put the .beta2 of WhiteArea? I don't see so well.
I understand now that the re-sizer is part of CKEditor. Not an issue then.
When I cut or paste I get a message like this:
Your browser security settings don't permit the editor to automatically execute copying operations. Please use the keyboard for that (Ctrl/Cmd+C).
Is this at my end or your end?
I hadn't realized that Firefox 4 was so mature. I have been beta testing a version for Shivanand Sharma's Blazing Fast Firefox but I hadn't upgraded for a while.
tinker
Alfonso:
Tesst...! Ahhhh, spell checker, the dyslexic's friend. That means I can do this post without touching 'Source'. I had to translate the 'AMO' to find the beta2, but I have an extension for that:
Google Dictionary and Google Translate
I'm helping a little to beta test this one too. Very handy. When I cut and paste I get this message:
" Your browser security settings don't permit the editor to automatically execute copying operations. Please use the keyboard for that (Ctrl/Cmd+C)."
When you say: "The clipboard operations are again restricted by default", is there a way I can 'unrestrict' the clipboard or do I patiently wait for the next build?
I may have botched a post so I'll recap. I here you on Open/Save already built in. The simpler the better. I am now using "Generate <p> on Return" so my post should be more compressed.
I just noticed that this site won't except the <p> tag, so if my post looks stretched that's why. Am I missing something here? Ah, figured it out. On the preview it looks OK with a space between each </b> paragraph but in the editor the paragraphs follow on the next line. I think it's this site, not the editor. I'll let you know after I post to a number of other sites to see if it's different there.
I forgot, is it possible to have an 'Integrate Automatically' setting? It would be nice. Oh, just noticed that the spell-checker suggestions come up in CKEditor's menu, that's really nice.
tinker
There's an extension to whitelist which domains are allowed to get full access to the clipboard, but I'll try to put the code integrated so there's no need to have two extensions, although I can't promise anything.
When I have time and check that things don't break I'll add the button to replace all the textareas in a page and then the option to do it automatically next time.
Alfonso:
Thank you for your quick response. I've been reading your other blog posts about internet security and realize why one might need a whitelist for the clipboard. Is the clipboard dialog part of CKEditor? Would it be possible to add a check box to it saying: "Allow this site to use the clipboard directly?". Editing the whitelist without having to go to 'Add-ons' may be a little more difficult. One of the 'rules' I've set out in my 'HotFox' project is to use extensions which are 'set and forget'. If an extension needs input, then I look for one that has a menu item on the context menu of 'Tools' so that folks never have to go to 'Add-ons' at all. In fact, a 'Tools' menu item like 'WhitArea Options' would be a good thing to add. If you eventually add a tab to the options dialog to edit the whitelist that would be the best way to access it. I actually turn off menu items in the 'Tools' menu for extensions that have a good 'sweet spot' setting that needs no maintenance. When I archive my builds and send them off, my clients see exactly what I saw when I shut down the browser for the last time. All they have to do is import their bookmarks and they're ready to go. 'Clients' is a misnomer because, so far, I'm doing this totally on a volunteer basis.
The reason some of my posts are stretched out is because I was putting two returns between paragraphs. In CKEditor, if I press 'Return' once, it brings me to the next line instead of skipping a line like it does in the preview. So, not quite WYSIWYG on my end yet. Hope this helps.
tinker
The problem with the clipboard is that when CKEditor is integrated into the page it's considered a normal webpage, so putting a checkbox there isn't enough to get the privileges.
And about the behavior with this comments form, it allows only a limited set of HTML and automatically turns new lines into
so it will need some special configuration to make it match (WYSIWYG is only possible when the styles of the final site and the editor matches and there are no changes to the HTML)
Hi
Thanks for this very useful addon :)
I have some remarks:
- first, you are talking about an new icon, but I'm sorry I couldn't find where it was! Is it near the textarea (which would be nice)?
- when I use it on this very textarea, the backround gets black and the text grey. While it should not change and be black on white in this example
- could it be possible to have a righ-click "Remember" feature that would retain a textarea and automatically display the editor in it each time it is entered for edition?
Thanks
Olivier
Hi again
2 additional remarks :)
- the black background I get is when editing inline.. the layout is correct in the popup though
- is there a way to add something in the page code to force the inline display of the text editor for a given textarea? That would be nice!
Thanks
I said that "A button can be added", but I haven't worked on that for the moment. First I have other things to do and then I might add it, as well as some option in order to state if some textarea must be replaced automatically.
I've tester right now to use it in this textarea and I don't see anything wrong with the colors, although it has problems with the output as this comment section doesn't allows <p>s
If you can control the source of the page and you want it to always show up, then just use the normal CKEditor, you just need to include the ckeditor.js file and set a class of "ckeditor" (IIRC) to the textareas.
Thanks a lot for the clarification, and for the hint about genuine CKeditor !
About the black background, I've understood...and maybe you can do something about it: I have set the default background for a new empty tab to Black in Firefox. And this color is also used as the background in CKEditor instead of the actual background of the text area..
Cheers
That was me just above ;)
Post a Comment