FCKeditor? TinyMCE? NicEdit!

The so-called “Rich Text Editors” are used extensively over the web nowadays, especially in content publishing systems. Of course rich text editor mentioned here won’t mean the desktop software. They’re invented to solve the problem that standard HTML lacks a rich text editor component. JavaScript and basic XHTML technologies are used to create more powerful text edit controls with styling and formatting functions.

I started to pay attention to rich text editor implementations since I discovered WordPress. It bundles TinyMCE with it. However many people including me were not satisfied with the default customization of WordPress, so I got a plugin called EditorMonkey. I don’t quite remember what it was like because I haven’t used it for a long time and the author’s site is down for the time being. But I do remember that it provided two editors, FCKeditor and TinyMCE, as choices for users. That was the first time I knew FCKeditor and it gave me a good impression.

Generally speaking, the two take up most of the market. But after using them for a while, I realized some issues with them I can’t tolerate. Although they did great contribution to the Internet, they’re just not for me.

They Produce Uncontrollable Codes

Firstly I say that such editors are not for Internet novices. Why? Just open an image insertion dialog box in FCKeditor to see the options (see the FCKeditor demo). Will my mother understand what is “alternative text”? Or what is HSpace/VSpace? No. Not to say options in the “Advanced” tab. She just wants to insert an image! What the hell are these new concepts?

As a developer, I always want to be clear of what HTML code is underlying the rendered output. Both of the two editors can’t produce clean code for me. There are cases when we want to edit the source code by hand, though this doesn’t happen quite often. What do you think when you see the code in a mess but not like what you expected?

So I quickly discarded them and enjoyed the quick tag editor in WordPress. I really like it. It just converts a single line break into a “<br />” and a series of line breaks into a paragraph. Other characters remain the same.

They’re Much More than too Heavy

What do you use an Rich Text Editor for? Will you use it to create a complex website? Of course not. We mostly write simply styled articles, and they can be done easily (of course not easy for my mother) with a plain text editor.

I myself lived a good life with the quick tag editor. But at last I couldn’t get by the doom when our users needed a rich editor. So I picked up FCKeditor.

The size and speed of the editors are intolerable for doing such simple works, especially when you want to make a rich text box on the fly which needs quick response to make the user experience smooth. I heard enough complaints about the speed. No one would like to open Microsoft Word frequently, right?

Compatibility Problems

Recently FCKeditor released the 2.5 version and added Safari and Opera to their compatibility list. TinyMCE is beta testing its 3.0 version and it support all the main browsers.

However there are other compatibility related problems. I saw on several machines that the modal dialogs are squeezed to a very slim window, about 30 pixels wide, without scroll bars, making it completely unusable. Sure it may be problems of browsers, but there will be no problems if they use JavaScript and XHTML to fake a dialog. TinyMCE now uses such technique a lot, but there are still traditional modal dialogs.

They’re both too heavy to catch up the pace of technology innovations. Especially FCKeditor.

NicEdit, a New Hope?

I’ve been searching for an alternative to FCKeditor for weeks, since our users complained a lot about the text editor. I discovered NicEdit all of a sudden.

It is light weight – only 30K of a single JavaScript file. And it never uses popup dialogs except alerts. The auto-fit-height feature is really cool. An ideal solution for web sites. So I’m seriously considering switching to it, and my colleagues are also looking forward to it.

I’m pretty satisfied with the current feature set of NicEdit, But the author is considering some proposed features for the next version. This makes me wonder how FCKeditor/TinyMCE were like in the beginning. Were they as simple and light weight as today’s NicEdit? Maybe it’s the never ending feature requests which created today’s bit monsters. I really hope NicEdit will keep the feature set small and make them robust. There are still problems. For example, when the editor is not active, clicking the “insert image” button will generate a JavaScript error.

Fighting WordPress Spams

Of course the most popular plugin for protecting WordPress blogs from spamming is Akismet. Yes it is simple to use, famous, and easy to get.

But in my opinion, if you’re running an unknown blog like mine, you should discard Akismet and choose a more clever one. Akismet blocks non-spam comments now and again, and it’s difficult to rescue them from within the thousands of spams. Some day you will suddenly find a regular comment by your friend in the spams and realize that. It’s the same situation when using Spam Karma or Bad Behavior. They all block regular comments by some probability.

So stay away with the plugins which recognize spams by using machines’ intelligence. I need a plugin that will block all spam bots but will never block a human being.

Usually, the spam bots are not clever enough to emulate a browser (except the human spammers, of course). So why not use some simple JavaScript to confirm the commenter is not a machine?

I first tried WordPress Hashcash. It blocks all bots and never blocks a human. But it needs a database table to function right. I don’t like this.

Then I found bcSpamBlock, which seems an ideal solution for me:

  1. It ensures only comments by human pass through the validation.
  2. It doesn’t need a database table.
  3. It rejects the spam in the “preprocess_comment” filter, which means the spam won’t be saved to the database, making the database always clean. Too many comment_ID’s we’ve wasted on spams! (Yes I’m an idealist :) )

There are some human spams which will bypass the plugin but I have the time to delete them.

Wait, still there are trackback spams! bcSpamBlock does have a simple way to check trackbacks, but I disabled this feature and used the Simple Trackback Validation plugin. The ideas to validate trackbacks are identical, but the latter is more reliable.

So the final solution becomes bcSpamBlock + Simple Trackback Validation.

When bcSpamBlock is famous enough, there must be a way for bots to analyze the keys and simulate a human (I’ll try this). But for now it’s enough for me.

Who Sold Me to Domain Design Shop?

I was curious when I received an Email with the subject “Important information about your domain: thinlight.org”. I ordered this domain name from GoDaddy, but they shouldn’t send me emails when there isn’t any changes of the domain.

Actually the mail was not from GoDaddy. The content was:

Hello,
Congratulations on registering the domain: thinlight.org. Now is the time to establish an effective Internet presence. Domain Design Shop is an internationally recognized Web design company that specializes in marketing and branding. Our staff has assisted hundreds of companies, organizations, and individuals in achieving their goals of developing custom web sites and technology solutions.

Please click here to see our portfolio: [their site url]

Warm Regards,
[their site url]

Sweet! They knew that I had just got this domain and provided such a comfortable service!

But wait a minute. Who gave away the message that I just registered this domain? I think it’s not GoDaddy who sold me out. “Domain Design Shop” must be such a shit polling the whois database to get the new registered domains information, and spamming these domain owners.

If you’re interested, go and check out their own website. No I don’t want such design works, though my own design is ugly enough. They just remind me of the “good old days” years ago.

Usually we would pay an extra fee to hide our contact information in the whois query result. Just hope they’re not spamming every domain buyers.

Google Analytics with WordPress – Exclude Your Own Visits

When I started to use Google Analytics last year, I was in a big LAN. To exclude my own traffic from Google Analytics, I created a filter to exclude a small range of IP addresses. Though it may wrongly filter out some visits of people in the same LAN, it’s tolerable.

Today I’m connected to the Internet by some DSL service of an ISP and the IP address changes from time to time, not limited in a C-class range. So I can no longer exclude my visits by simply creating a filter of IP address.

I searched the help system of Google Analytics, and got a method of excluding by cookie.

Yes, it’s great. But still it’s not convenient to set the cookie because cookies will expire one day or you may clear them by hand.

I was led to the wrong way since the beginning. Since we’re using Google Analytics on such a specific system – WordPress, we should discard the idea of excluding by IP and consider excluding by user.

Then I found some Google Analytics plugins for WordPress. For example, Ultimate GA. It provides an option of not adding analytics code to the page when it’s requested by a logged on user. And of course a lot of other great features.

I don’t want to use a plugin to slow down my WordPress for such a small requirement. Just surround your analytics code (usually in footer.php of current theme) with an “if” statement:

<?php if (!$user_ID) { ?>
...your Google Analytics code...
<?php } ?>

and it’s done.

Readonly Text Input Background Color in Firefox

The other day I was stuck when trying to make the background-color of a readonly text input white in Firefox.

Today lots of sites are using readonly text inputs to carry out some urls for propagation or some code snippets for embedding in your own pages. For example, every Youtube video has such a input field just on the right of it. When you click on it, the text gets selected and you can press Ctrl+C to copy it to the clipboard.

The code is like this:

<input type="text" readonly="readonly" value="some read only text..." onclick="this.select()" />

and the rendered output:

In all other major browsers it looks like a normal text input. But in Firefox, the background color is made gray (#D6D5D9, actually), maybe emphasizing the difference. There are always cases when we want to make it white. But when added “background-color:#FFFFFF;”, it showed no difference. At that time I thought I couldn’t change the background color.

But soon I found the “white” text input when watching this video (I love the puppy!). After inspecting the code with Firebug I found it was “border:1px solid #D2D2D0” who did the trick. Adding it to the example code above:

Then I found that the background color is ok with any color except #FFFFFF. For example, setting it to “#FEFEFE” (Almost white. And note the default border style is “outset”):

Weird, isn’t it? I don’t know if it’s a bug or “feature”.

First Draft of Site Design

Developing a new look for WordPress is a relatively simple task, as long as you know some CSS/HTML basics.

I don’t know how to create beautiful graphics, so I only used simple colors and simple transitions. Totally three blue colors were used, from light to dark. I especially like the sidebar border :) . The ripples mark the beginnings of entries. I discarded the CSS list types but used background images to achieve this effect.

Thanks to the simple structure of WordPress, it didn’t take me much time to make this theme. Of course I will tailor it in the future to make it better-looking.