淘寶開源編輯器Kissy Editor和簡易留言編輯器


原來也寫過一篇關於百度Ueditor編輯器的介紹:百度Ueditor編輯器的使用,ASP.NET也可上傳圖片

最開始是使用CuteEditor控件,需要好幾mb的空間,因為剛開始學習ASP.NET的時候,覺得簡單就是拉控件上去,后來自己發現了百度Ueditor編輯器,再后來看見熱心人的評論也知道了KindEditor編輯器,后來也改用了這個 KindEditor編輯器 ,因為它比百度編輯器占的空間小,感覺也好一點,后來做網站,有時站內留言或者發貼子,我覺得這類編輯器功能太多了點,總感覺只適合新聞類編輯器,后來就網上不停的百度和Google查找,找了很久看見了淘寶開源的Kissy Editor編輯器,感覺很好,后來不小心在博客園又發現了一個簡易的編輯器,感覺更容易看懂,也方便修改,只是界面沒有淘寶的好看,但是對於簡易的留言板還是夠用了,兩編輯器界面如下所示:

 Kissy Editor編輯器

 

簡易編輯器,是查看了博客園http://www.cnblogs.com/lexus/archive/2010/09/12/1824214.html這篇博客

 

 kissy editor目錄結構如下圖所示:

 

kissy editor可以根據個人需求,ToolBar可以控制顯示哪些,可輸入字符個數,等等都可以在editor-aio.js腳本文件中修改,由於此腳本只顯示一行,找到相應修改的位置有點困難,你可以先查看editor.js腳本文件,找到需要修改的地方,然后在editor-aio.js中查找,如下修改字符個數的操作,如圖所示:

kissy editor 的工具條也可以找到相應的editor-aio.js 文件進行修改,如下圖所示:

 

淘寶上下載,會有一個demo的例子,由於我不想在此目錄下面,因為我寫的一個小例子,不在此目錄下方,我就修改了路徑,原有的那個demo.html中圖像選擇會顯示不出圖片,如下圖所示:

 

需要按照自己的項目需求而修改,這里只是舉了一個簡單的例子。

kissy editor 的使用代碼如下所示:

 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4      < title ></ title >
 5      < link  href ="kissy_editor/themes/default/editor-min.css"  rel ="stylesheet"  type ="text/css"   />
 6      < style  type ="text/css" >
 7      #Submit1{  padding: 5px 5px 5px 5px;}
 8       </ style >
 9  </ head >
10  < body >
11  < form  action ="data.aspx"  method ="post" >
12  < textarea  id ="demo"  name ="code"  cols ="142"  rows ="15" >
13     < p >歡迎使用 KISSY Editor! </ p >
14  </ textarea >
15  < p >< input  id ="Submit1"  type ="submit"  value ="提交"   /></ p >
16  </ form >
17  < script  src ="kissy_editor/editor-aio.js"  type ="text/javascript" ></ script >
18  < script  type ="text/javascript" >KISSY.Editor("demo"); </ script >
19  </ body >
20  </ html >

 下面說一下簡易HTMl編輯器,使用方式如下代碼所示:

 2 
 3  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 4  < head >
 5      < title ></ title >
 6      < script  src ="js/jquery-1.4.2.min.js"  type ="text/javascript" ></ script >
 7      < script  src ="ebox/ebox.js"  type ="text/javascript" ></ script >
 8  </ head >
 9  < body >
10  < form  action ="data.aspx"  method ="post" >
11    < textarea  name ="code"  id ="ebox" >歡迎使用簡易編輯器 </ textarea >
12    < p >< input  type ="submit"  value ="submit"   /></ p >
13  </ form >
14  < div  style =" margin:0 auto; text-align:center;" ></ div >
15  < script  type ="text/javascript" >
16     $("#ebox").css("height", "350px").css("width", "100%").htmlbox({
17         toolbars: [
18         [
19         "undo", "redo", "removeformat", "bold",
20         "underline", "strike", "italic", "sup", "sub",
21         "left", "center", "right", "indent", "outdent",
22         "link", "unlink", "image", "quote", "striptags", "code",
23         "fontcolor", "highlight", "fontsize", "fontfamily", "styles"
24         ]
25     ]
26     });
27  </ script >
28  </ body >
29  </ html >

 相信你看見了代碼,就知道可以更改ToolBar顯示哪些已有的功能,很簡單吧。

 寫了有些凌亂,不要見怪,在此分享,那些需要簡易編輯器的,下載使用,還是不錯的選擇。

 下載地址:點擊這里下載

版權所有,轉載請注明出處!

一切偉大的行動和思想,都有一個微不足道的開始。微不足道的我,正在吸取知識的土壤,希望能取得成功!不嫌棄我微不足道的,願交天下好友!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM