UEditor 介紹
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼。
1 入門體驗
1.1 下載編輯器
到官網下載 UEditor 最新版：[官網地址]
1.2 創建basic_config文件
解壓下載的包，在解壓后的目錄創建一個目錄為Demo,並在Demo目錄下創建 basic_config.html 文件，填入下面的html代碼
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title>配置</title> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 7 <!--配置文件--> 8 <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script> 9 <!--ueditor.js 1.4.3最新版本--> 10 <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script> 11 <!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗--> 12 <!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文--> 13 <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script> 14 </head> 15 <body> 16 <div> 17 <h1>配置demo</h1> 18 <script id="editor" type="text/plain" style="width:100%;height:500px;"> 19 hello world! //初始化內容 20 </script> 21 </div> 22 <script type="text/javascript"> 23 //實例化編輯器 24 //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 25 var ue = UE.getEditor('editor'}); 26 </script> 27 </body> 28 </html>
1.3 在瀏覽器打開basic_config.html
如果看到了下面這樣的編輯器，恭喜你，初次部署成功！
2.配置方式
2.1 配置ueditor.config.js
ueditor.config.js是完整的配置文件，可以在這該文件里面配置整個編輯器的特性，文件里面的注釋非常詳細，修改默認配置請首先確保已經完全明確該參數的真實用途，在此不想做太多展開。
2.2 配置實例化編輯器
1 var ue = UE.getEditor('container', { 2 autoHeight: false, 3 @configName:@configValue //@configName:ueditor.config.js中配置項名稱，@configValue是對應的值 4 });
2.3 Hello world!
2.3.1 配置config實現
1 initialContent:'Hello world!' //初始化編輯器的內容
2.3.2 編輯器賦值
1 <div> 2 <script id="editor" type="text/plain" style="width:100%;height:500px;"> 3 hello world! 4 </script> 5 </div>
2.3.3 實例化編輯器
1 //實例化編輯器 2 var ue = UE.getEditor('editor',{ 3 initialContent:'Hello world!' 4 });
好了，第一篇先介紹到這，請期待第二篇關於UEditor定制方面的介紹。