ueditor編輯器是由百度開發(fā)的一款非常優(yōu)秀的輕量級開源富文本編輯器。ueditor 破解版主要基于MIT協(xié)議，允許自由使用和使用代碼，同時采用了簡潔清晰的的分層架構(gòu)設(shè)計理念，整個系統(tǒng)由核心層、命令插件層和UI層組成，獨創(chuàng)多種全新編輯操作模式，提供可視化界面，完美兼容多款瀏覽器，帶給開發(fā)人員更加便捷、專業(yè)的編程服務(wù)。
涵蓋流行富文本編輯器特色功能，獨創(chuàng)多種全新編輯操作模式。
用戶體驗
屏蔽各種瀏覽器之間的差異，提供良好的富文本編輯體驗。
開源免費
開源基于MIT協(xié)議，支持商業(yè)和非商業(yè)用戶的免費使用和任意修改。
定制下載
細粒度拆分核心代碼，提供可視化功能選擇和自定義下載。
專業(yè)穩(wěn)定
百度專業(yè)QA團隊持續(xù)跟進，上千自動化測試用例支持。
1、核心層提供了編輯器底層的一些方法和概念，如DOM樹操作、Selection、Range等。
2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層，是因為UEditor中所有的功能型實現(xiàn)都是通過這一層中的命令和插件來完成的，并且各個命令和插件之間基本互不耦合——使用者需要使用哪個功能就導(dǎo)入哪個功能對應(yīng)的命令或者插件文件，完全不用考慮另外那些雜七雜八的JS文件（極少數(shù)插件除外，關(guān)于這些插件下文會整理出一個依賴列表來供同學(xué)們參考）。
理論上來講，所有的命令都是可以用插件來代替的，但是依然將兩者分開的主要原因是命令都是一些靜態(tài)的方法，無需隨editor實例初始化，從而優(yōu)化了編輯器的性能。而插件隨編輯器的初始化而初始化，性能上會有少許的影響，但相比命令而言，插件能夠完成更加復(fù)雜的功能。其中最主要的一個特點是在插件內(nèi)部既可以為編輯器注冊命令，也可以為編輯器綁定監(jiān)聽事件。這個特點使得為編輯器添加任何功能都可以在插件中獨立完成。
3、在命令插件層之上則是UI層。UEditor的UI設(shè)計與核心層和命令插件層幾乎完全解耦，簡單的幾個配置就可以為編輯器在界面上添加額外的UI元素和功能，具體的配置下面將會深入闡述。
2、分層架構(gòu)，方便定制與擴展
3、滿足不同層次用戶需求，更加適合團隊開發(fā)
4、豐富完善的中文文檔
5、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業(yè)QA團隊持續(xù)支持，已應(yīng)用在百度各大產(chǎn)品線上
源碼包包含了 UEditor 的源碼、各后臺的代碼和使用的例子
1. 部署包目錄說明
部署包解壓后的文件目錄結(jié)構(gòu)如下所示
dialogs: 彈出對話框?qū)?yīng)的資源和JS文件
lang: 編輯器國際化顯示的文件
php或jsp或asp或net: 涉及到服務(wù)器端操作的后臺文件
themes: 樣式圖片和樣式文件
third-party: 第三方插件(包括代碼高亮，源碼編輯等組件）
ueditor.all.js: 開發(fā)版代碼合并的結(jié)果,目錄下所有文件的打包文件
ueditor.all.min.js: ueditor.all.js文件的壓縮版，建議在正式部署時采用
ueditor.config.js: 編輯器的配置文件，建議和編輯器實例化頁面置于同一目錄
ueditor.parse.js: 編輯的內(nèi)容顯示頁面引用，會自動加載表格、列表、代碼高亮等樣式,具體看內(nèi)容展示文檔
ueditor.parse.min.js: ueditor.parse.js文件的壓縮版，建議在內(nèi)容展示頁正式部署時采用
2. 源碼包目錄說明
源碼包解壓后的文件目錄結(jié)構(gòu)如下所示
源碼包部分目錄和文件與部署包名稱一致,用途也會是一致,具體說明如下:
_doc: 部分markdown格式的文檔
_example: ueditor的使用例子
_parse: ueditor.parse.js的源碼,parse的用途具體看內(nèi)容展示文檔
_src: ueditor.all.js的源碼,打包方法看grunt打包文檔
_src\core: ueditor核心代碼
_src\plugins: 插件文件
_src\ui: ui相關(guān)文件
_src\adapter: 橋接層文件,對接ueditor核心和ui代碼
php: php后臺文件的目錄
php\config.json: 后端配置文件,所有前后端相關(guān)配置項,都放在這里
php\controller.php: 接收所有請求的接口文件,通過它判斷action參數(shù),分發(fā)具體任務(wù)給其他php文件
php\action_crawler: 撞去遠程文件的代碼,轉(zhuǎn)存文件使用
php\action_upload: 上傳圖片、附件、視頻的處理代碼
php\action_list: 列出在線的圖片或者是附件
php\Upload.class.php: 上傳文件使用的類
jsp: jsp后臺文件的目錄
jsp\config.json: 后端配置文件,所有前后端相關(guān)配置項,都放在這里
jsp\controoler.jsp: 接收所有請求的接口文件
jsp\lib: 所有用到的jar包,其中的ueditor-*.jar包是ueditor所有后臺相關(guān)處理邏輯的工具
jsp\src: lib里面的uedior-*jar文件的java源碼
asp: asp后臺文件的目錄
net: .net后臺文件的目錄
App_Code: 上的文件是應(yīng)用程序的源碼。
Bin: 里面的是應(yīng)用程序的依賴庫，當(dāng)前依賴 Newtonsoft 的 Json 庫。Bin 目錄和 App_Code 目錄受應(yīng)用程序保護，不用擔(dān)心被用戶訪問到。
config.json: 是 UEditor 后端的配置文件，上一節(jié)已經(jīng)介紹了比較重要的配置項。
controller.ashx: 是 UEditor 請求的入口，它把不同的 action 分發(fā)到不同的 Handler 來處理。
net.sln: 是項目的解決方案文件，安裝 Visual Studio 2013 或以上的機器可以打開進行項目的改造。
README.md: 是net后臺使用文件。
Web.config: 是應(yīng)用程序的配置文件
dialogs: 同部署包說明
lang: 同部署包說明
themes: 同部署包說明
third-party: 同部署包說明
changelog.md: 各版本的ueditor更新記錄
Gruntfile.js: grunt執(zhí)行的任務(wù)文件,用來把源碼包打包成部署版本,打包方法看grunt打包文檔
LICENSE: 開源協(xié)議說明證書,ueditor使用MIT開源協(xié)議
ueditor.config.js: 前端配置文件
ueditor.parse.js: 還沒合并時使用的parse文件,會自動加載_parse里面的文件
到本站下載 UEditor
1.2 創(chuàng)建demo文件
解壓下載的包，在解壓后的目錄創(chuàng)建 demo.html 文件，填入下面的html代碼
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這里寫你的初始化內(nèi)容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
1.3 在瀏覽器打開demo.html
如果看到了下面這樣的編輯器，恭喜你，初次部署成功！
部署成功
1.4 傳入自定義的參數(shù)
編輯器有很多可自定義的參數(shù)項，在實例化的時候可以傳入給編輯器：
var ue = UE.getEditor('container', {
autoHeight: false
});
配置項也可以通過 ueditor.config.js 文件修改
1.5 設(shè)置和讀取編輯器的內(nèi)容
通 getContent 和 setContent 方法可以設(shè)置和讀取編輯器的內(nèi)容。
開發(fā)者在創(chuàng)建編輯器時后，會執(zhí)行一些接口或者調(diào)用編輯命令，例如
這些代碼看起來沒有問題，編輯器實例也能正確拿到，但就是沒有效果。
其實出現(xiàn)這種問題，其實是大家不了解UEditor的創(chuàng)建原理導(dǎo)致的。因為UEditor的編輯區(qū)域是使用iframe作為編輯容器的。所以當(dāng)編輯器創(chuàng)建實例后，先會創(chuàng)建一個iframe元素，然后在iframe元素中寫入一些腳本，這些腳本會在iframe元素初始化完成時被調(diào)用。腳本的作用主要是為編輯器實例賦值iframe中的body,window,document對象的引用。 看到這里，大家就應(yīng)該明白UEditor的初始化過程其實是個異步過程。
因為是個異步過程。所以場景中的書寫方式就會出現(xiàn)問題了。雖然工廠方法getEditor能正確返回編輯器實例，但同步的代碼ue.setContent馬上就被執(zhí)行了，因為setContent是在編輯容器中寫內(nèi)容，這時需要用到body,document等元素，但這些元素的引用賦值卻在異步中才做的賦值。所以才會出現(xiàn)直接執(zhí)行setContent時會出現(xiàn)無效的問題。當(dāng)然有時不同瀏覽器的效果會出現(xiàn)不同。一些高級的瀏覽器比如chrome有時是可以的，但大部分ie瀏覽器都不行。這主要是因為瀏覽器的性能所致的。
正確的初始化方式
UEditor為開發(fā)者提供了ready接口，他會在編輯器所有的初始化操作都結(jié)束時調(diào)用。保證你要做的操作能在一個完整的初始化環(huán)境中執(zhí)行。
UEditor的老用戶會說，不是還有個addListener可以注冊ready事件嗎？
確實這樣寫也能達到效果，但這樣創(chuàng)建有個小問題。如果的這段代碼是用在第一次創(chuàng)建時就沒有問題。但如果編輯器已經(jīng)創(chuàng)建，你需要再次賦值，想使用同一段代碼，這時，這里的事件ready是不會觸發(fā)的。但你調(diào)用接口ready注入你的操作，這種方式，會判斷如果你的編輯器已經(jīng)初始化完成了，那ready將會自動加載注入的內(nèi)容，如果還沒有初始化結(jié)束，它會自己注冊ready事件，當(dāng)完成初始化后再掉起自己。所以建議開發(fā)者使用ready接口作為初始化時注入操作。
如何自定義請求地址？
ueditor 1.4.2+ 推薦使用唯一的請求地址，通過GET參數(shù)action指定不同請求類型。 但很多用戶都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由于所有ueditor請求都通過editor對象的getActionUrl方法獲取請求地址，可以直接通過復(fù)寫這個方法實現(xiàn)，例子如下：
action類型以及說明
uploadimage：//執(zhí)行上傳圖片或截圖的action名稱
uploadscrawl：//執(zhí)行上傳涂鴉的action名稱
uploadvideo：//執(zhí)行上傳視頻的action名稱
uploadfile：//controller里,執(zhí)行上傳視頻的action名稱
catchimage：//執(zhí)行抓取遠程圖片的action名稱
listimage：//執(zhí)行列出圖片的action名稱
listfile：//執(zhí)行列出文件的action名稱
如何阻止div標(biāo)簽自動轉(zhuǎn)換為p標(biāo)簽?
阻止轉(zhuǎn)換：
【基本介紹】
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼...【軟件功能】
功能全面涵蓋流行富文本編輯器特色功能，獨創(chuàng)多種全新編輯操作模式。
用戶體驗
屏蔽各種瀏覽器之間的差異，提供良好的富文本編輯體驗。
開源免費
開源基于MIT協(xié)議，支持商業(yè)和非商業(yè)用戶的免費使用和任意修改。
定制下載
細粒度拆分核心代碼，提供可視化功能選擇和自定義下載。
專業(yè)穩(wěn)定
百度專業(yè)QA團隊持續(xù)跟進，上千自動化測試用例支持。
【軟件特點】
UEditor 在設(shè)計上采用了經(jīng)典的分層架構(gòu)設(shè)計理念，盡量做到功能層次之間的輕度耦合。具體來講，整個系統(tǒng)分為了核心層、命令插件層和UI層這樣三個低耦合的層次。1、核心層提供了編輯器底層的一些方法和概念，如DOM樹操作、Selection、Range等。
2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層，是因為UEditor中所有的功能型實現(xiàn)都是通過這一層中的命令和插件來完成的，并且各個命令和插件之間基本互不耦合——使用者需要使用哪個功能就導(dǎo)入哪個功能對應(yīng)的命令或者插件文件，完全不用考慮另外那些雜七雜八的JS文件（極少數(shù)插件除外，關(guān)于這些插件下文會整理出一個依賴列表來供同學(xué)們參考）。
理論上來講，所有的命令都是可以用插件來代替的，但是依然將兩者分開的主要原因是命令都是一些靜態(tài)的方法，無需隨editor實例初始化，從而優(yōu)化了編輯器的性能。而插件隨編輯器的初始化而初始化，性能上會有少許的影響，但相比命令而言，插件能夠完成更加復(fù)雜的功能。其中最主要的一個特點是在插件內(nèi)部既可以為編輯器注冊命令，也可以為編輯器綁定監(jiān)聽事件。這個特點使得為編輯器添加任何功能都可以在插件中獨立完成。
3、在命令插件層之上則是UI層。UEditor的UI設(shè)計與核心層和命令插件層幾乎完全解耦，簡單的幾個配置就可以為編輯器在界面上添加額外的UI元素和功能，具體的配置下面將會深入闡述。
【軟件優(yōu)點】
1、體積小巧，性能優(yōu)良，使用簡單2、分層架構(gòu)，方便定制與擴展
3、滿足不同層次用戶需求，更加適合團隊開發(fā)
4、豐富完善的中文文檔
5、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業(yè)QA團隊持續(xù)支持，已應(yīng)用在百度各大產(chǎn)品線上
【目錄介紹】
UEditor 下載包有兩個類型: 源碼包 和 部署包源碼包包含了 UEditor 的源碼、各后臺的代碼和使用的例子
1. 部署包目錄說明
部署包解壓后的文件目錄結(jié)構(gòu)如下所示
dialogs: 彈出對話框?qū)?yīng)的資源和JS文件
lang: 編輯器國際化顯示的文件
php或jsp或asp或net: 涉及到服務(wù)器端操作的后臺文件
themes: 樣式圖片和樣式文件
third-party: 第三方插件(包括代碼高亮，源碼編輯等組件）
ueditor.all.js: 開發(fā)版代碼合并的結(jié)果,目錄下所有文件的打包文件
ueditor.all.min.js: ueditor.all.js文件的壓縮版，建議在正式部署時采用
ueditor.config.js: 編輯器的配置文件，建議和編輯器實例化頁面置于同一目錄
ueditor.parse.js: 編輯的內(nèi)容顯示頁面引用，會自動加載表格、列表、代碼高亮等樣式,具體看內(nèi)容展示文檔
ueditor.parse.min.js: ueditor.parse.js文件的壓縮版，建議在內(nèi)容展示頁正式部署時采用
2. 源碼包目錄說明
源碼包解壓后的文件目錄結(jié)構(gòu)如下所示
源碼包部分目錄和文件與部署包名稱一致,用途也會是一致,具體說明如下:
_doc: 部分markdown格式的文檔
_example: ueditor的使用例子
_parse: ueditor.parse.js的源碼,parse的用途具體看內(nèi)容展示文檔
_src: ueditor.all.js的源碼,打包方法看grunt打包文檔
_src\core: ueditor核心代碼
_src\plugins: 插件文件
_src\ui: ui相關(guān)文件
_src\adapter: 橋接層文件,對接ueditor核心和ui代碼
php: php后臺文件的目錄
php\config.json: 后端配置文件,所有前后端相關(guān)配置項,都放在這里
php\controller.php: 接收所有請求的接口文件,通過它判斷action參數(shù),分發(fā)具體任務(wù)給其他php文件
php\action_crawler: 撞去遠程文件的代碼,轉(zhuǎn)存文件使用
php\action_upload: 上傳圖片、附件、視頻的處理代碼
php\action_list: 列出在線的圖片或者是附件
php\Upload.class.php: 上傳文件使用的類
jsp: jsp后臺文件的目錄
jsp\config.json: 后端配置文件,所有前后端相關(guān)配置項,都放在這里
jsp\controoler.jsp: 接收所有請求的接口文件
jsp\lib: 所有用到的jar包,其中的ueditor-*.jar包是ueditor所有后臺相關(guān)處理邏輯的工具
jsp\src: lib里面的uedior-*jar文件的java源碼
asp: asp后臺文件的目錄
net: .net后臺文件的目錄
App_Code: 上的文件是應(yīng)用程序的源碼。
Bin: 里面的是應(yīng)用程序的依賴庫，當(dāng)前依賴 Newtonsoft 的 Json 庫。Bin 目錄和 App_Code 目錄受應(yīng)用程序保護，不用擔(dān)心被用戶訪問到。
config.json: 是 UEditor 后端的配置文件，上一節(jié)已經(jīng)介紹了比較重要的配置項。
controller.ashx: 是 UEditor 請求的入口，它把不同的 action 分發(fā)到不同的 Handler 來處理。
net.sln: 是項目的解決方案文件，安裝 Visual Studio 2013 或以上的機器可以打開進行項目的改造。
README.md: 是net后臺使用文件。
Web.config: 是應(yīng)用程序的配置文件
dialogs: 同部署包說明
lang: 同部署包說明
themes: 同部署包說明
third-party: 同部署包說明
changelog.md: 各版本的ueditor更新記錄
Gruntfile.js: grunt執(zhí)行的任務(wù)文件,用來把源碼包打包成部署版本,打包方法看grunt打包文檔
LICENSE: 開源協(xié)議說明證書,ueditor使用MIT開源協(xié)議
ueditor.config.js: 前端配置文件
ueditor.parse.js: 還沒合并時使用的parse文件,會自動加載_parse里面的文件
【使用方法】
1.1 下載編輯器到本站下載 UEditor
1.2 創(chuàng)建demo文件
解壓下載的包，在解壓后的目錄創(chuàng)建 demo.html 文件，填入下面的html代碼
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這里寫你的初始化內(nèi)容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
1.3 在瀏覽器打開demo.html
如果看到了下面這樣的編輯器，恭喜你，初次部署成功！
部署成功
1.4 傳入自定義的參數(shù)
編輯器有很多可自定義的參數(shù)項，在實例化的時候可以傳入給編輯器：
var ue = UE.getEditor('container', {
autoHeight: false
});
配置項也可以通過 ueditor.config.js 文件修改
1.5 設(shè)置和讀取編輯器的內(nèi)容
通 getContent 和 setContent 方法可以設(shè)置和讀取編輯器的內(nèi)容。
【更新日志】
實例創(chuàng)建后為什么直接執(zhí)行接口報錯？開發(fā)者在創(chuàng)建編輯器時后，會執(zhí)行一些接口或者調(diào)用編輯命令，例如
這些代碼看起來沒有問題，編輯器實例也能正確拿到，但就是沒有效果。
其實出現(xiàn)這種問題，其實是大家不了解UEditor的創(chuàng)建原理導(dǎo)致的。因為UEditor的編輯區(qū)域是使用iframe作為編輯容器的。所以當(dāng)編輯器創(chuàng)建實例后，先會創(chuàng)建一個iframe元素，然后在iframe元素中寫入一些腳本，這些腳本會在iframe元素初始化完成時被調(diào)用。腳本的作用主要是為編輯器實例賦值iframe中的body,window,document對象的引用。 看到這里，大家就應(yīng)該明白UEditor的初始化過程其實是個異步過程。
因為是個異步過程。所以場景中的書寫方式就會出現(xiàn)問題了。雖然工廠方法getEditor能正確返回編輯器實例，但同步的代碼ue.setContent馬上就被執(zhí)行了，因為setContent是在編輯容器中寫內(nèi)容，這時需要用到body,document等元素，但這些元素的引用賦值卻在異步中才做的賦值。所以才會出現(xiàn)直接執(zhí)行setContent時會出現(xiàn)無效的問題。當(dāng)然有時不同瀏覽器的效果會出現(xiàn)不同。一些高級的瀏覽器比如chrome有時是可以的，但大部分ie瀏覽器都不行。這主要是因為瀏覽器的性能所致的。
正確的初始化方式
UEditor為開發(fā)者提供了ready接口，他會在編輯器所有的初始化操作都結(jié)束時調(diào)用。保證你要做的操作能在一個完整的初始化環(huán)境中執(zhí)行。
UEditor的老用戶會說，不是還有個addListener可以注冊ready事件嗎？
確實這樣寫也能達到效果，但這樣創(chuàng)建有個小問題。如果的這段代碼是用在第一次創(chuàng)建時就沒有問題。但如果編輯器已經(jīng)創(chuàng)建，你需要再次賦值，想使用同一段代碼，這時，這里的事件ready是不會觸發(fā)的。但你調(diào)用接口ready注入你的操作，這種方式，會判斷如果你的編輯器已經(jīng)初始化完成了，那ready將會自動加載注入的內(nèi)容，如果還沒有初始化結(jié)束，它會自己注冊ready事件，當(dāng)完成初始化后再掉起自己。所以建議開發(fā)者使用ready接口作為初始化時注入操作。
如何自定義請求地址？
ueditor 1.4.2+ 推薦使用唯一的請求地址，通過GET參數(shù)action指定不同請求類型。 但很多用戶都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由于所有ueditor請求都通過editor對象的getActionUrl方法獲取請求地址，可以直接通過復(fù)寫這個方法實現(xiàn)，例子如下：
action類型以及說明
uploadimage：//執(zhí)行上傳圖片或截圖的action名稱
uploadscrawl：//執(zhí)行上傳涂鴉的action名稱
uploadvideo：//執(zhí)行上傳視頻的action名稱
uploadfile：//controller里,執(zhí)行上傳視頻的action名稱
catchimage：//執(zhí)行抓取遠程圖片的action名稱
listimage：//執(zhí)行列出圖片的action名稱
listfile：//執(zhí)行列出文件的action名稱
如何阻止div標(biāo)簽自動轉(zhuǎn)換為p標(biāo)簽?
阻止轉(zhuǎn)換：
