国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > 綜合 > 正文

nicedit 輕量級編輯器 使用心得

2024-07-21 02:53:30
字體:
來源:轉載
供稿:網友
NicEdit是一個輕量級,跨平臺,內置內容編輯器,允許在瀏覽器中輕松地編輯網站上的內容。
 
NicEdit的Javascript集成到任何網站在幾秒鐘內作出的任何元素/區塊編輯或轉換標準textareas來豐富文本編輯。 
How to use 
http://nicedit.com/demos.php 給出了幾個demo,包括最傻瓜式的把textarea轉換成niceditor,簡單配置編輯區和命令按鈕,以及不同風格的編輯界面。 
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的編輯區,它可以通過這種方式獲得 
myNicEditor = new nicEditor(); 
myNicEditor.addInstance('editordiv'); 
ed = myNicEditor.nicInstances[0]; 
需要注意的是,你要是這么簡單的調用的話,和可能是沒有任何效果的。你還需要在nicedit編輯區onblur前,比如你是在用戶點擊一個div的時候來插入圖片,這時你需要在這個div onmousedown的時候執行 
ed.saveRng(); 
來保存鍵盤在編輯器上的焦點,并在從用戶那里得到了想要的輸入以后,比如div的onclick,或是select的onchange以后,執行 
ed.restoreRng(); 
以恢復焦點,只有這樣,才能正確的位置插入圖片。 
download 
nicedit提供了插件機制,非常容易拓展,在http://nicedit.com/download.php 你可以根據你的功能需要,來定制一個下載。 

注:相關教程知識閱讀請移步到編輯器頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 双鸭山市| 永济市| 岫岩| 云阳县| 鲁甸县| 萨迦县| 钟祥市| 凉山| 望谟县| 孟连| 镇平县| 天等县| 定日县| 松阳县| 宿松县| 鄄城县| 郎溪县| 塔城市| 萨嘎县| 兴城市| 澎湖县| 阳新县| 松原市| 綦江县| 吉安县| 丰顺县| 望都县| 江源县| 壶关县| 静安区| 吉安市| 宝清县| 绥宁县| 莒南县| 华安县| 青龙| 龙游县| 贵州省| 凌海市| 凌海市| 化德县|