Tips and Tricks

An Inline Editing Tool for HTML Templates

NicEdit

By Catalin Bocanu, Web News Editor

4th of December 2007, 22:41 GMT

Adjust text size:

Example of NicEdit Implementation in an HTML Page

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:

CODE

 Inline Editable HTML Template Example 



bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor({fullPanel : true});
myNicEditor.setPanel('myNicEdittest');
myNicEditor.addInstance('test');
});


This is an Inline Editable Template Example




 Div Example



This is the editable content of a div element that can be changed on the fly 
using your web browser. Rich text editing features are enabled

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.

TAGS:

WYSIWYG | HTML Editors | WYSIWYG Editors | Inline Rich Text Editor | HTML Template

SEARCH THE NEWS ARCHIVE :

Today's News | Yesterday's News | News Archive

User opinions:

No user comments yet.

Be the first to express your opinion using the form below!

Share your opinion:

SUBMIT PROGRAM \| ADVERTISE \| GET HELP \| SEND US FEEDBACK \| RSS FEEDS \| ENTER NEWS SITE \| ENGLISH BOARD \| ROMANIAN FORUM
© 2001 - 2008 Softpedia. All rights reserved. Softpedia™ and the Softpedia™ logo are registered trademarks of SoftNews NET SRL.	Copyright Information \| Privacy Policy \| Terms of Use \| Update your software \| Archive

NEWS CATEGORIES: