Upcoming Visual HTML templates editor plug-in - Forms generation and validation package blog

By Manuel Lemos
manuellemos.net
<email contact>

Contents

- Introduction

- Current features

- Future features

- Try it and provide feedback


- Introduction

Many Web applications need to provide an interface to let users submit HTML formatted articles and other type of rich content. The most obvious solution is to use and HTML editor.

There are several standalone HTML editors. There are plug-ins for the forms class, so you can integrate those HTML easily with your forms based Web applications.

http://www.phpclasses.org/xinha_plug_in

http://www.phpclasses.org/form_fckeditor

However, none of these editors are powerful enough for my needs. I need an HTML editor that lets users edit HTML template with a simple syntax. Such templates are used to customize the look and feel of the PHPClasses site.

There is a contest going on to propose new design themes for the PHPClasses site. Anybody can propose a new design. The most voted will be used in the site and the winner will earn prizes.

http://www.phpclasses.org/blog/post/97-10th-anniversary-anno ...

I expect that most contestants are Web designers. I suppose most of the designers prefer using a visual editor and immediately see how their changes will look like, rather than using a simple text editor and have to edit the HTML and the template marks by hand.

This is why I developed an HTML editor from scratch, rather than adopting one of the existing HTML editors.


- Current features

* A single portable Javascript file

The HTML editor is all done in Javascript. It is just a single Javascript file that defines a single main class and several private classes for internal purposes.

You can just use that Javascript file in any project without relying on the PHP forms generation and validation class.

The Javascript code is portable. It takes in account the differences between all the tested browsers to provide the same set features.

So far it has been tested in Firefox 3, Internet Explorer 8, Opera 10, Safari 4 and Chrome 3. It may work equally well on past browser versions, as the Javascript code was written avoiding direct checks of the browser name and version.


* Graceful fallback when Javascript is disabled

The editor relies on the availability of Javascript in the browser. However, there are situations when Javascript is not available.

Even if Javascript is enabled in the browser, there may be other Javascript errors caused by other code on the current page that may prevent the Javascript code of the editor to run.

Therefore, the editor works in conjunction with an existing textarea field that should be enclosed in a <noscript> HTML section. The forms class plug-in generates all the necessary HTML to display the textarea inside the <noscript> tags.

If Javascript is enabled, the fallback textarea will not appear but the editor will generate both a visual editor and an equivalent textarea.

The generated textarea will be synchronized regularly to get the HTML tags of the document being edited in the visual HTML editor, which in practice is an iframe. So, when the form is submitted it will send the HTML to the server, as if the user entered the manually HTML in the original textarea field.


* Rich editing toolbars and editing modes

The editor shows several toolbars that let you easily change the formatting of the HTML. Several toolbars are displayed by default with the most common formatting features.

One of the toolbar buttons lets the users switch between the visual and HTML editing modes. In the visual mode, the user sees an interactive preview of the HTML that he is editing. In the HTML mode, the user sees just a textarea that he can used to edit the HTML directly.

http://files.phpclasses.org/graphics/html-editor-toolbar.gif

* Live preview of custom template marks

The editor lets users insert template marks on the HTML being edited. In the visual editing mode, the user can use a menu button named "Insert Template" to choose the template mark from a list of available marks defined by the programmer in the editor setup.

http://files.phpclasses.org/graphics/html-editor-insert-temp ...

In the HTML editing mode, the users should insert marks manually with a simple syntax like {menu} or {smiley}.

http://files.phpclasses.org/graphics/html-editor.gif

In the visual editing mode, the inserted template marks are automatically expanded. In the place of the marks, the editor displays a preview of the expanded mark using HTML defined by the programmer during the editor setup.

Each expanded mark appears as a clickable button with dashed border around the area that the mark occupies.

http://files.phpclasses.org/graphics/html-editor-inserted-te ...

Additionally, each template mark may support multiple view alternatives. This allows the user to interactively change options that make the template mark be rendered in different ways.

Users can switch between different template marks options by clicking on the respective preview area. A pull-down menu will appear to let the user choose between the available template mark options.

http://files.phpclasses.org/graphics/html-editor-alternative ...

The template marks alternatives may be set in the HTML editing mode by typing the alternative name after the template mark name, for instance like this: {smiley grin} or {smiley sad}.


- Cross-site scripting security protection

Any site that allows HTML editing should be concerned with cross-site scripting attacks. This kind of attacks was described in another article here:

http://www.phpclasses.org/blog/post/55-Improved-browsing-and ...

That article describes a very safe solution to protect agains this problem. It consists in encapsulating the untrusted HTML in an iframe served from a different domain. Unfortunately this solution is often not practical nor convenient.

A more convenient solution for this problem is to filter and discard any HTML and CSS with malicious Javascript code. This solution is not very easy to implement. Often attackers inject malformed HTML that abuses from holes in certain browsers.

Writing a filter that correctly handles all possible exploit cases is very hard, if possible at all, as new browser holes are being discovered regularly.

Still I have developed PHP classes that implement a full blown HTML parser. It comes with filter classes that avoid all forms of injecting Javascript in an HTML document. It uses DTD validation to discard invalid HTML. Then it filters all HTML tags and CSS that contain Javascript using white lists.

I strongly recommend you to use a robust HTML filtering package like this before you accept untrusted HTML from your site users. This secure HTML parser and filter package is available here:

http://www.phpclasses.org/secure-html-filter


- Future features

The HTML editor is almost ready to be used in the PHPClasses theme design editor. However, there are some nice to have features that were left out for now, but will be implemented in future releases.

* Customizable toolbars with image icon support

Currently the toolbars only use HTML formatted text to display the buttons. In the future, it will also support using nice icon images for the buttons, like those that you see in common word processing programs.

* Resizable editor area

Often the default size of the editor area is too small. It would be better if the user could resize the editor by dragging a resize handler that should appear on the edges of the editor area.

* Caret position feedback

Currently the editor does not provide any information about the formatting styles applied in the document being edited. It would nicer to make it work like common word processing programs that changes the appearance of the toolbar buttons according the current formatting styles.

It would also be useful to show breadcrumbs at the bottom of the editor that represent the parent tags of the section of the HTML document where the caret currently is.

* Changeable editor themes

The editor and its toolbars are rendered using CSS styles and HTML templates defined in the Javascript editor class. Despite these variables can be changed, it would be better to provide support for changing the whole editor presentation using external theme classes.

* Language translation packs

Currently all texts and messages displayed by the editor are hard-coded in the editor Javascript class. It would be better to move the definition of all texts to separate localization classes. This would allow to quickly provide translations of the editor texts to other languages besides English.

* Extensible functionality with plug-ins

Currently the functionality of the editor is fixed. It would be more flexible to provide hooks that could be used by plug-ins created by third parties to alter aspects of the editor, like for instance the layout and functionality of the toolbars.

* Compatibility with browser spell checking extensions

Currently, the HTML editor does not support existing browser extensions to process the HTML being edited, like for instance spell checking extensions. In the future it would be useful to change the editor to allow such of browser extensions to do their job.


- Try it and provide feedback

This HTML editor plug-in is almost ready to be released. But first it would be useful to receive some feedback about any bugs or feature suggestions.

* Live demonstration

If you would like to see the current version of the HTML editor in action without downloading it, you may want to take a look here:

http://www.meta-language.net/forms-examples.html?example=tes ...

You may also try in in a real application, which is the PHPClasses design theme editor:

http://www.phpclasses.org/design.html


* Download and try it

The editor will only be available as official release after the current beta testing period. Meanwhile you may get it from the CVS repository:

http://www.meta-language.net/cvs/forms/

You may also access the CVS repository directly or download CVS snapshot archives from here:

http://www.meta-language.net/download.html#cvs


* Report bugs and suggest features

One thing in particular that I would like to get feedback, is about the toolbars. The current version of the toolbars does not contain all possible formatting buttons that you may need. I would like to hear from the types of toolbar buttons that you miss most, so I can add them in future releases.

Other than that, all types of bug reports and feature suggestions are very welcome. Please post a comment to this article with your thoughts.