TinyMCE

by call

Sun Feb 26 2006 at 23:40:48

A WYSIWYG HTML editor for web browsers.

Who's-a-whig?

The interweb, as you've probably noticed by now, runs on HTML. The reason that you've probably noticed this, is that we're constantly required to type that shit in. In emails, in bulletin boards, and wouldn't you just know it, in E2 writeups.

Back in the day, all software used to work like this. You'd type in one thing, and in whatever final output you expected from your program (and, usually, your 9-pin dot matrix printer), it would look like something else. Then in the '80s, some bright spark came up with the idea of WYSIWYG: make stuff look like it's going to look as you type it in. This caught on, for almost all normal 'user-friendly' software. The only place it didn't become pervasive was in applications, such as LaTeX, used by us dyed-in-the-wool ass-backwards UNIX types. For 'normal' people, WYSIWYG is regarded as an absolute necessity.

Except, for some bizarre unfathomable reason, on the web, where otherwise normal people are required to type in ugly combinations of angle brackets and acronyms. And this is the medium that's supposed to be the great leveller?

What the internet needs, then, is some of that WYSIWYG stuff we've been hearing so much about. It'd have been done long before if it wasn't for the fact that web browsers have lacked a consistent interface for developers to write a WYSIWYG HTML editor against, until very recently.

With javascript and the HTML Document Object Model, and a couple of other tricks, we've seen a few WYSIWYIG editors emerging recently. Perhaps the best of these, and certainly my current favourite, is TinyMCE.

From Moxiecode Systems AB, TinyMCE is an HTML editor that's open source, with active development from a company that offers commercial support for the product. It's not overly heavyweight to download (less than 50k if your server has mod_gzip), it's highly configurable and and it can be quickly and easily retrofitted to existing websites, replacing TEXTAREA elements with HTML editors.

Unlike other HTML editors I've tried recently (eg. HTMLArea), it actually seems to perform reasonably efficiently and quickly. HTMLArea, by contrast, was a CPU hog.

I said it's easy to retrofit to existing web sites. Let me go ahead and put my money where my mouth is here. Make sure your Notelet nodelet it turned on, and head on over to Notelet Editor, take a copy of anything you've already got in there, and add the following to it:

<script language="javascript"
type="text/javascript"
src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/tiny_mce.js">
</script><script language="javascript"
type="text/javascript"><!--
tinyMCE.init({mode : "textareas",theme : "advanced"});
// --></script>

Congratulations, you've just made E2 WYSIWYG. Well, more or less. Naturally, TinyMCE doesn't know about ecore square bracket links, and the 'HTML' popup to edit the source code in raw HTML, should you feel inclined, won't work because of JavaScript's security model.

But it sure beats typing raw HTML now, doesn't it?

You can read more about it, including full API documentation, and even try it out over at http://tinymce.moxiecode.com/.

I like it!

1 C!

(essay)

by rootbeer277

Thu Feb 28 2008 at 1:05:25

Everything2 now has the latest version of the tinyMCE WYSIWYG editor implemented in its node editing textboxes. This option is on by default for new users as of early 2008. There will be a link above the editing textbox to turn tinyMCE on or off. Users can also turn it on or off in writeup settings.

TinyMCE will make it easy for new users to jump in and start noding without knowing any HTML (although they will still need to learn how to link, which is still accomplished with square brackets), and some experienced users may find it more convenient to edit their writeups with WYSIWYG than coding HTML by hand. TinyMCE gives our site the basic look and feel of a word processor for the purposes of adding formatting, while ensuring proper HTML practices, such as closing tags.

Today, a new version of tinyMCE was installed that fixed some of the problems the old tinyMCE editor had. Specifically, it would replace apostrophes with the HTML character entity ', and it would also allow infinite nesting of blockquote tags, while inaccurately calling it an "indent" option. The apostrophe issue was the larger problem, as it would make hard links containing an apostrophe mysteriously and almost invisibly broken. Neither of these is a problem in the new version.

Nice features of tinyMCE include:

Special character insertion — by clicking the Omega symbol, tinyMCE will pull up a pop-up window which allows easy selection of special characters not found on a standard North American keyboard. It even gives you the mnemonic and numeric codes for putting them in yourself.
HTML editor — this button pulls up a pop-up window that allows you to edit the HTML directly, manipulating the code in ways tinyMCE is not capable of doing.
Help — a pop-up window with instructions for using tinyMCE.
You can select a block of text to apply formatting to the entire selection at the click of a button.

One problem with tinyMCE remains, that of determining whether or not the user used tinyMCE to create the node in the first place. This is essential information for providing new users with help, especially ones who don't know that there are other options besides tinyMCE. A good hint is to view the source code. Code created by the tinyMCE editor will explicitly state rather than just , like most normal human beings would do. If someone is pedantic enough about their HTML to specify align="left", they likely don't need any help with their formatting in the first place.

Update: Content Editors now have the ability to check a user's settings to see if tinyMCE is turned on.

Please note: If the help feature, HTML editor, or special character insertion feature don't work, you may need to force refresh (shift+reload on most browsers) to get the current version of tinyMCE.

I like it!

3 C!s

(review)

by passport

Thu Feb 28 2008 at 5:48:19

TinyMCE completely mangles any rich text pasted into it, it mangles it beyond recognition. It mangles it so horribly that it is almost impossible to edit it manually after the fact, and it introduces weird formatting that makes the user look like a complete moron. Don't just take my word for it, I can show you an example.
The following text exists on my computer and it looks exactly like this in the word processor.

Fledgling time travelers looking to travel in style are advised to seek out a police box, as a Delorean cannot be sourced anywhere other than another time traveler. By 2015 there isn't a single authentic Delorean or police box left on earth, although there are still hundreds of police boxes that can be rescued before their destruction.

Evolution

Throw out everything you know about human evolution for the purposes of this game. In this universe humans never evolve on any significant level. The people of another time may look collectively different, but not so different that any one individual from one time would look out of place in another time.

The reason for this decision is not based in any particular beliefs on evolution, but is instead done because it allows the characters to visit and interact with other humans from the earliest cavemen to the last people in the universe.

The various hominid species all existed in the past, and indeed some similar species exist in some future time, but basic modern humanity endures from far before recorded history all the way to the end of the universe. The hominid species are related but distinctly different species.

Ok, looking good so far, well, the formatting looks good (only used paragraph tags and a single set of bold tags), the text itself was questionable!! But what does TinyMCE do with this text?

Fledgling time travelers looking to travel in style are advised to seek out a police box, as a Delorean cannot be sourced anywhere other than another time traveler. By 2015 there isn't a single authentic Delorean or police box left on earth, although there are still hundreds of police boxes that can be rescued before their destruction.

Evolution

Throw out everything you know about human evolution for the purposes of this game. In this universe humans never evolve on any significant level. The people of another time may look collectively different, but not so different that any one individual from one time would look out of place in another time.

The reason for this decision is not based in any particular beliefs on evolution, but is instead done because it allows the characters to visit and interact with other humans from the earliest cavemen to the last people in the universe.

The various hominid species all existed in the past, and indeed some similar species exist in some future time, but basic modern humanity endures from far before recorded history all the way to the end of the universe. The hominid species are related but distinctly different species.

Where the heck did all those extra line breaks come from? Lets look at the source code.

Fledgling
time travelers looking to travel in style are advised to seek out a
police box, as a Delorean cannot be sourced anywhere other than
another time traveler. By 2015 there isn't a single authentic
Delorean or police box left on earth, although there are still
hundreds of police boxes that can be rescued before their
destruction. Evolution Throw
out everything you know about human
evolution for the purposes of this game. In this universe humans
never evolve on any significant level. The people of another time may
look collectively different, but not so different that any one
individual from one time would look out of place in another time. The
reason for this decision is not based in any particular beliefs on
evolution, but is instead done because it allows the characters
to visit and interact with other humans from the earliest cavemen to
the last people in the universe. The
various hominid species all existed in the past, and indeed
some similar species exist in some future time, but basic modern
humanity endures from far
before recorded history all the way to the end of the universe. The
hominid species are related but distinctly different species.

Wow, what a nightmare. I know html and I can barely read that. It is specifying the font all over the place, even right in the middle of words. It would be easier to start over from scratch manually than to try to edit that mess.
This my friends is why you shouldn't touch TinyMCE with a ten foot pole.

I like it!

3 C!s

ecore	WYSIWYG	root log: March 2007	dyed in the wool
Dot matrix printer	dom	Editor Log: December 2007	interweb
The golden ratio and the new writeups nodelet	test5	A Perfect Day for Bananafish	Wouldn't it be nice if I could remember her as a firework
Notelet	Moxie	latex	HTML
Unix	E2 Manifesto: 2010	Force refresh	Strange Times
November 15, 2007