Unknown user: Login | Forgot password | Register
Cyberwip Web Services

Cyberwip Web Services

Content Editor

Almost every content management system (other than Drupal) comes with a built-in editor for creating and editing content. These editors are called WYSIWYG because they try to maintain the final look of the content as it is being edited. They are similar to most page editing programs (Word™ etc.) but designed specifically for editing web content and not nearly as functional.

These editors IMHO are a pain to edit because for everything you want to do you have to make selections, push buttons, and otherwise spend a lot of time tinkering just to get a simple page out. In most cases, the HTML code that these editors generate will not even validate and if editing at the code level is required, the code is a mess. They also weigh in heavy for an addition to the edit page making the page loads slow and slow computers un-responsive.

Drupal never came with a built-in or default editor. Perhaps because Dries doesn't find anything elegant about any of them or that they all have limitations and to some degree bugs. Just the same, many of the open source WYSIWYG editors can be added as a Drupal module just to keep the non-tech-savy user happy.

On my first Drupal sites (as well as the sites I designed manually) I coded the pages writing source HTML. This is time consuming, prone to errors, and a pain to maintain but at the time it was the best option to get the quality of code that I demanded. Then one day I discovered Texy! and almost instantly fell in love.


Texy! is a markup language allowing you to create HTML pages by typing simple text with added characters to indicate how to format it. It is MUCH faster to create pages with Texy, anyone can learn it very quickly, and the result is validating XHTML Strict code with a beautiful layout. This page (as well as the entire site) is coded using Texy.

Here's a simple example of Texy! code:

##Section Header

Texy!(tm) is not a "WYSIWYG"((What You See Is What You Get)) editor.
You can do ANYTHING with Texy! that you can do with HTML.

You can set colors or make text `BIG .{font-size:2em}`.

You can also:

- Make lists
- Create tables
- Add CSS

Align pagagraphs... or anything else you could imagine.

Which generates this:

Section Header

Texy!™ is not a WYSIWYG editor.
You can do ANYTHING with Texy! that you can do with HTML.

You can set colors or make text BIG.

You can also:

  • Make lists
  • Create tables
  • Add CSS

Align pagagraphs… or anything else you could imagine.

As time permits I will cover Texy in more detail.

IE Can't Handle Q Tags

Since the first draft of the earliest HTML specification was written it included a <q> tag intended to enclose quoted text. Other than IE, browsers format test between Q tags by wrapping them in quotes. IE does nothing. It leaves them on the page and doesn't complain about them being there but it does nothing to format the content. So the content appears as intended in Firefox™ and almost every other browser but does not in IE.

In order to fix this I used a behavior to add the quotes. Now IE will render quotes as it is supposed to.

Test: Lorem Ipsum Dolores

At present, a custom theme is being developed (this theme) which is intended to be flexible enough to suit most site designs. The theme includes fifteen (15) optional use regions arranged in a way that makes it possible to format the content in hundreds of different ways.

As time permits (and the theme gets closer to done) I will put up more specifics on the theme to give you a better idea of what can be done.

Texy! Mods

For Drupal 5, I extended Texy! to provide YouTube video insertion. This was done by adding the extension right in the Texy module. I intended to do the same for Drupal 6 but after having a look at the module I decided to make some major refinements. Since the latest version of Drupal and many of the leading modules require php 5 and php4 is no longer supported by the author of Texy! I decided to cut the extra code out for php4 support. This makes the module a lot smaller and really serves no useful purpose beyond this point.

I added the YouTube extension. YouTube videos are added using the same format as images with a slight difference. Instead of entering the image URL, you enter the YouTube index as follows:

[* youtube:eV__oOckAPM .{display:block;margin: 12px auto 2px auto}*]

The extension generates XHTML strict compliant code which uses an OBJECT tag to insert the video. One small problem is that the OBJECT is not a block so if you try placing it in the middle of the page by using margin:auto it won't work. You kave to make the OBJECT a block as indicated in the Texy! code above.

Note: Just as with images a WIDTHxHEIGH can be added to the markup.

The resulting video is shown below.

Yellow box
Green box
Blue box