3 ms·

Re-thinking WYSIWYG editors for Web CMS

13 points by spxdcz 17y ago

beeker 17y ago
So similar to what Word 2007 is currently offering? You select text and an almost invisible ghost box appears, move your cursos in the box makes it appear fully.
thomasfl 17y ago
Instant rendering of markdown sounds like a good idea, if users care to invest time to learn it.
- Luyt 17y ago
  Not having to move your hand between keyboard and mouse is a huge time saver. It seems to me that the time you have to invest to learn it is minimal compared to what it will save in the long run.
philipn 17y ago
These rich text editors have control keys for linking. It's easy to link text without leaving the keyboard at all. Select text with arrows, press control+L, enter url, press return. You can also jump through words by pressing control+arrow. So, control+shift+arrow, control+L, url, return. It's basically what he's asking for with the last suggestion.
- spxdcz 17y ago
  But I guess that's still a shortcut for each formatting option? i.e. you need to remember each shortcut key (L for link, etc)? (If I read what you're saying correctly); whereas the blog is suggesting a single formatting shortcut that then shows more 'novice' users what the available options are, relative to what they already know (the buttons at the top). Something like that! I'm still thinking it through (I wrote it...)
  - philipn 17y ago
    I think the issues raised in the post are interesting but not the biggest slowdowns people face when using web-based rich text editors. The biggest issue is simply moving around in the text. emacs / vi allow you to skip almost anywhere without leaving the keyboard once you're familiar with the method. That's the biggest save.
sunir 17y ago
I'm experimenting with this as well as I'm layering TinyMCE over a wiki for my side project, Bibdex (dev image http://bibdex.org:8080 http://bibdex.org:8080). I have tried extending TinyMCE with a wiki syntax parser. However, I'm unconvinced there is real value in confusing the text with magic syntax, with one exception. Wiki markup is mostly cosmetic, so you can throw all of it out--except for auto-linkification. Linking makes the wiki. This was easy with CamelCase links, but much harder for free links or other types of links. I do wonder if it's possible to train people to use exactly one syntactic form, the square brackets. [words] -> free link [http://url text] -> descriptive link [http://url] -> escaped link (useful to pick up trailing punctuation) Presumably when you write a left square bracket, a floating div could appear with contextual help and auto-suggest. If others are interested, I'm happy to share my efforts.
- spxdcz 17y ago
  Interesting stuff. I definitely think there's an important balance to be struck between adding efficiency with keyboard shortcuts, while still making it accessible to novices (which I'm not sure wiki syntax is). But for power-users, this could be very interesting.
  - pbhjpbhj 17y ago
    >adding efficiency with keyboard shortcuts, while still making it accessible to novices Reddit's comment writing hints, moreso than the brief Wikipedia hints, are quite easy to pick up even for new site users.
- anthonyb 17y ago
  I think the article has it exactly backwards. Start with the link, and the popup part should prompt you for the plain text part. ie. I paste in "http://example.com/ http://example.com/ and the javascript/tinymce pops up a "Link Text >" prompt. Much more intuitive IMHO than highlighting things which aren't obviously links, or adding extra syntax.
  - jamesrcole 17y ago

13 points by spxdcz 17y ago

So similar to what Word 2007 is currently offering? You select text and an almost invisible ghost box appears, move your cursos in the box makes it appear fully.

thomasfl 17y ago

Instant rendering of markdown sounds like a good idea, if users care to invest time to learn it.

Luyt 17y ago
Not having to move your hand between keyboard and mouse is a huge time saver. It seems to me that the time you have to invest to learn it is minimal compared to what it will save in the long run.

philipn 17y ago

These rich text editors have control keys for linking. It's easy to link text without leaving the keyboard at all. Select text with arrows, press control+L, enter url, press return. You can also jump through words by pressing control+arrow. So, control+shift+arrow, control+L, url, return. It's basically what he's asking for with the last suggestion.

spxdcz 17y ago
But I guess that's still a shortcut for each formatting option? i.e. you need to remember each shortcut key (L for link, etc)? (If I read what you're saying correctly); whereas the blog is suggesting a single formatting shortcut that then shows more 'novice' users what the available options are, relative to what they already know (the buttons at the top). Something like that! I'm still thinking it through (I wrote it...)
- philipn 17y ago
  I think the issues raised in the post are interesting but not the biggest slowdowns people face when using web-based rich text editors. The biggest issue is simply moving around in the text. emacs / vi allow you to skip almost anywhere without leaving the keyboard once you're familiar with the method. That's the biggest save.

sunir 17y ago

I'm experimenting with this as well as I'm layering TinyMCE over a wiki for my side project, Bibdex (dev image http://bibdex.org:8080 http://bibdex.org:8080). I have tried extending TinyMCE with a wiki syntax parser. However, I'm unconvinced there is real value in confusing the text with magic syntax, with one exception. Wiki markup is mostly cosmetic, so you can throw all of it out--except for auto-linkification. Linking makes the wiki. This was easy with CamelCase links, but much harder for free links or other types of links. I do wonder if it's possible to train people to use exactly one syntactic form, the square brackets. [words] -> free link [http://url text] -> descriptive link [http://url] -> escaped link (useful to pick up trailing punctuation) Presumably when you write a left square bracket, a floating div could appear with contextual help and auto-suggest. If others are interested, I'm happy to share my efforts.

spxdcz 17y ago
Interesting stuff. I definitely think there's an important balance to be struck between adding efficiency with keyboard shortcuts, while still making it accessible to novices (which I'm not sure wiki syntax is). But for power-users, this could be very interesting.
- pbhjpbhj 17y ago
  >adding efficiency with keyboard shortcuts, while still making it accessible to novices Reddit's comment writing hints, moreso than the brief Wikipedia hints, are quite easy to pick up even for new site users.
anthonyb 17y ago
I think the article has it exactly backwards. Start with the link, and the popup part should prompt you for the plain text part. ie. I paste in "http://example.com/ http://example.com/ and the javascript/tinymce pops up a "Link Text >" prompt. Much more intuitive IMHO than highlighting things which aren't obviously links, or adding extra syntax.
- jamesrcole 17y ago