In a couple of previous posts I have used the pretty cool NicEdit WYSIWYG editor. Today I wanted to show you how you can use its JavaScript API to set the content of the editor’s body to the data of the item you want to edit. Please remember to be careful when accepting html content from users!

Demo | Download  (HTML, CSS, JS)

Screenshots of End Product

-Clicking the edit icon pops up a SimpleModal dialog.

-The dialog contains a NicEdit Instance that has its content set to the item that you clicked to edit.

Explanation

Your best bet is to download the code and go through it yourself, but basically what happens when the edit icon is clicked is a new instance of the editor is instantiated:

    //Setup the NicEditor
    taskArea = new nicEditor(
    { buttonList: ['bold', 'italic', 'underline', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'indent', 'outdent', 'link', 'unlink'] })
    .panelInstance("taskEditingArea");

The API then provides a way to get at this instance by finding it with nicEditors.findEditor() and then setting its content with .setContent():

    nicEditors.findEditor("taskEditingArea").setContent(editorText);

For more information be sure to see the API Documentation for NicEdit as well as the download for my demo.

[dzone]