nicedit 輕量級編輯器使用心得

更新時間：2009年06月11日 22:01:26 作者：

NicEdit是一個輕量級，跨平臺，內置內容編輯器，允許在瀏覽器中輕松地編輯網站上的內容。

NicEdit的Javascript集成到任何網站在幾秒鐘內作出的任何元素/區(qū)塊編輯或轉換標準textareas來豐富文本編輯。
How to use
http://nicedit.com/demos.php 給出了幾個demo，包括最傻瓜式的把textarea轉換成niceditor，簡單配置編輯區(qū)和命令按鈕，以及不同風格的編輯界面。
Deployment
NicEdit 可能是引用文件最少的在線編輯器，原因是不能更少了，一個js，一個圖標文件。這兩者的目錄結構修改配置。
new nicEditor({iconsPath : '../nicEditorIcons.gif'})
Source Code
NicEdit 的源碼是面向對象的，這使的本來就少至1300多行的代碼更容易閱讀，當然還有修改。
以一個添加圖片的按鈕為例：
/* 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 */
之間是添加圖片按鈕在按鈕條上的配置，之后代碼控制是添加圖片按鈕點擊后浮出相應的面板，用來接收輸入以在編輯器里插入圖片。最后一句代碼是把該按鈕注冊到按鈕條上。
事實上，你也可以完全不使用nicedit的按鈕條，而自己調用命令，即這行代碼，
ne.nicCommand("insertImage",tmp);
這里的ne對象是nicedit的編輯區(qū)，它可以通過這種方式獲得
myNicEditor = new nicEditor();
myNicEditor.addInstance('editordiv');
ed = myNicEditor.nicInstances[0];
需要注意的是，你要是這么簡單的調用的話，和可能是沒有任何效果的。你還需要在nicedit編輯區(qū)onblur前，比如你是在用戶點擊一個div的時候來插入圖片，這時你需要在這個div onmousedown的時候執(zhí)行
ed.saveRng();
來保存鍵盤在編輯器上的焦點，并在從用戶那里得到了想要的輸入以后，比如div的onclick，或是select的onchange以后，執(zhí)行
ed.restoreRng();
以恢復焦點，只有這樣，才能正確的位置插入圖片。
download
nicedit提供了插件機制，非常容易拓展，在http://nicedit.com/download.php 你可以根據你的功能需要，來定制一個下載。
本站下載地址