13

For a simple text editor for longer articles I am looking for advice and inspiration on programming/designing a minimalistic and modern textarea (which does not necessarily have to use the tag) accompanied by a save button. I thought, there should be plenty of "25 textareas you can't miss" articles out there, but so far, I have been surprisingly unsuccessful in finding them.

What is the state of the art? What is different when designing for mobile? What pitfalls should be avoided? Where can I read more?

EDIT

I have been considering rich text editors, too. They however seem too heavy in many cases. Maybe there is a subclass of "not so rich" text editors, meaning wmd and alternatves? I will definitely look into http://sixrevisions.com/user-interface/rich-text-editors-for-2010-and-beyond/ .

4
  • I just saw that there is also a ux site, so please feel free to relocate this question there, if it feels more appropriate.
    – Jasper
    Dec 12, 2011 at 21:16
  • Maybe this article will help you: Auto-Save User’s Input In Your Forms With HTML5 and Sisyphus.js
    – Skami 18
    Dec 13, 2011 at 13:32
  • What you're looking for is usually called a "rich text editor" (as per the link in my answer) so if you're still looking for more, try that term instead of text area, plus some browser related keywords
    – Ben Brocka
    Dec 13, 2011 at 14:41
  • 1
    RE your edit: Rich text editors usually allow you to strip out as many functions as you need, I know in particular TinyMCE and the YUI rich text editor do. You can probably narrow them down to your use case.
    – Ben Brocka
    Dec 18, 2011 at 17:48

5 Answers 5

2

I really like Dojo's dijit Textarea as it will simply expand as long as the user has text. The nice thing about this is that the user can always see their text without having to scroll within the textbox.

You may also configure it to have a starting height and then expand from there. FormEnvy.com has more information about it.

7

Check out the aloha editor: http://aloha-editor.org/index.php

1
  • I think this is awesome!
    – Remy
    Dec 13, 2011 at 8:16
5

The YUI has a great Rich Text Editor component which is highly customizable.

YUI works on mobile and has some good tips for mobile rich text editing.

As far as your "top 25* text areas list", here's an article that's essentially that: Rich-Text Editors for 2010 and Beyond. They have a good brief rundown of 22 rich text editors for web.

*(Due to the economy the 3 bottom performing text editors were downsized)

0
3

The most common pitfall all the current editors have is: Paste from Word
This common sin injects into the editor tons of markup than needs to be pruned after.

Aloha editor is a good step forward.

I like the work Wikipedia is doing for their new editor.
http://en.wikipedia.org/wiki/Wikipedia:VisualEditor
Big hopes in this work.

enter image description here

3
  • the VisualEditorSandbox link is broken. If you've got some screenshots it would be good to paste them here.
    – icc97
    Jun 2, 2013 at 20:19
  • @icc97: Link corrected. It's in production now, you can turn it on in your Wikipedia settings and edit any article Jun 3, 2013 at 13:38
  • Took me a while to get it working, but yep - it looks excellent, as if you're editing a Wikipedia page directly. Its probaby the first time I've seen an HTML editor that actually looks exactly like the final output that you'll see.
    – icc97
    Jun 4, 2013 at 10:01
2

I assume you are maybe asking for a rich text editor? Traditionally, that's still done with a text area with a layer of JS on top of it. If that's what you are looking for, FCKEditor has been one that has kept pretty good pace with best practices. There are plenty of other options as well.

If you want to go the HTML5 route, you can look into content editable

http://html5demos.com/contenteditable

1
  • TinyMCE is the other one that gets used a lot. It's hackable, which is good, because it's ugly in its unvarnished form.
    – Taj Moore
    Dec 12, 2011 at 22:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.