An Inline Editing Tool for HTML Templates

The interaction with the content from any web page can take place using WYSIWYG (What You See is What You Get) editors. They could be client side, server side or standalone applications that allow anyone to modify the content of the web pages in a visual manner, like editing a Microsoft Word document for example.

Javascript WYSIWYG editors are widely used in many web applications due to their small file size and the multiple integration options inside a web page. NicEdit is a free and lightweight (its file size is smaller than 35 KB) Javascript WYSIWYG editor that can be implemented in various ways in web pages. For example, it can change all text area instances from a form only with a few lines of code, providing rich text editing options.

Practically, this Javascript can interact with any page element, making possible the inline content editing. With drag and drop actions, images and text can be easily moved between various page elements like paragraphs and divs. As a consequence, an immediate idea results: this Javascript editor can be employed to create an HTML template with inline editing features.

In this way, you will obtain a better control over web pages after you publish them over the Internet by having the option to edit them online easy, without the need to transfer files via FTP. In the next code it is presented an example of NicEdit Javascript integration on an HTML page, when a div element becomes editable directly from the web browser:


The nicEdit.js file must be in the same directory as the the web page containing the code presented earliear. You can multiply the line 9 from the code and change the instance name corresponding to other page elements. Using this algorithm you could implement this Javascript editor in your own templates or web pages that need inline editing features.