Nicedit Lightweight Editor with experience _ Web editor

Nicedit JavaScript is integrated into any site in a matter of seconds to make any element/block edit or transform standard textareas to enrich text editing.
How to use
Http://nicedit.com/demos.php gives several demos, including the most fool-like conversion of textarea to Niceditor, simple configuration Edit area and command button, and different styles of editing interface.
Deployment
Nicedit may be the least referenced file in the online editor, because there is no less, a JS, an icon file. The directory structure of the two modifies the configuration.
New Niceditor ({iconspath: ' ...) /niceditoricons.gif '})
Source Code
Nicedit's source is object-oriented, which makes the code less than 1300 lines easier to read and, of course, modified.
Take a button that adds a picture as an example:
/* START CONFIG */
var nicimageoptions = {
Buttons: {
' image ': {name: ' Add image ', type: ' Nicimagebutton ', Tags: [' IMG ']}
}
};
/* End CONFIG */
var Nicimagebutton = Niceditoradvancedbutton.extend ({
Addpane:function () {
this.im = This.ne.selectedInstance.selElm (). Parenttag (' IMG ');
This.addform ({
': {type: ' title ', txt: ' Add/edit Image '},
' src ': {type: ' text ', txt: ' URL ', ' value ': ' http://', style: {width: ' 150px '}},
' Alt ': {type: ' text ', txt: ' alt text ', style: {width: ' 100px '}},
' Align ': {type: ' select ', txt: ' Align ', options: {none: ' Default ', ' left ': ' Left ', ' right ': ' Right '}}
},this.im);
},
Submit:function (e) {
var src = this.inputs[' src '].value;
if (src = "" | | src = "http://") {
Alert ("You must enter a-Image URL to insert");
return false;
}
This.removepane ();
if (!this.im) {
var tmp = ' javascript:nicimtemp (); ';
This.ne.nicCommand ("Insertimage", TMP);
this.im = This.findelm (' IMG ', ' src ', tmp);
}
if (this.im) {
This.im.setAttributes ({
src:this.inputs[' src '].value,
alt:this.inputs[' Alt '].value,
align:this.inputs[' Align '].value
});
}
}
});
Niceditors.registerplugin (nicplugin,nicimageoptions);
/* START config *//* end config * *
is to add a Picture button on the button bar configuration, and then code control is to add a picture button clicked after the corresponding panel, used to receive input to insert a picture in the editor. The last line of code is to register the button on the button bar.
In fact, you can also simply not use the Nicedit button bar, and call the command yourself, that line of code,
Ne.niccommand ("Insertimage", TMP);
The NE object here is the Nicedit edit area, which can be obtained in this way
Myniceditor = new Niceditor ();
Myniceditor.addinstance (' Editordiv ');
ed = myniceditor.nicinstances[0];
It should be noted that if you are so simple to invoke, and may not have any effect. You also need to onblur in the Nicedit edit area, such as when you click a div to insert a picture, and you need to perform this div onmousedown
Ed.saverng ();
To save the keyboard focus on the editor, and after getting the desired input from the user, such as the Div's onclick, or the onchange of the Select, executes
Ed.restorerng ();
To restore focus, only in this way can you insert the picture in the correct position.
Download
Nicedit provides a plug-in mechanism that is very easy to expand, and in http://nicedit.com/download.php you can customize a download based on your functional needs.
Download the address of this website