asp.net整合百度ueditor富文本

一、官網上下載完整源碼包，解壓到任意目錄，解壓後的源碼目錄結構如下所示：

    http://ueditor.baidu.com/website/ipanel/panel.html#

   _examples：編輯器完整版的樣本頁面

    _demos：編輯器的各種使用案例

    dialogs：彈出對話方塊對應的資源和JS檔案

    themes：樣式圖片和樣式檔案

    server：涉及到伺服器端操作的PHP、JSP等檔案

    third-party：第三方外掛程式

    editor_all.js：_src目錄下所有檔案的打包檔案

    editor_all_min.js：editor_all.js檔案的壓縮版，建議在正式部署時才採用

    editor_config.js：編輯器的設定檔，建議和編輯器執行個體化頁面置於同一目錄

二、部署UEditor到實際項目（UETest）中的步驟:

第一步：在項目的任一檔案夾中建立一個用於存放UEditor相關資源和檔案的目錄，此處在項目根目錄下建立，起名為ueditor。

第二步：拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中，除了ueditor目錄之外的其餘檔案均為具體專案檔，此處所列僅供樣本。

第三步：為簡單起見，此處將以根目錄下的index.aspx頁面作為編輯器的執行個體化頁面，用來展示UEditor的完整版效果。在index.aspx檔案中，首先匯入編輯器需要的三個入口檔案，範例程式碼如下：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>www.qk12333.com網址編輯器完整版執行個體</title><script type="text/javascript" src="ueditor/editor_config.js"></script><script type="text/javascript" src="ueditor/editor_all.js"></script><link rel="stylesheet" href="ueditor/themes/default/ueditor.css"> 

第四步：然後在index.aspx檔案中建立編輯器執行個體及其DOM容器。具體程式碼範例如下：

<div id="myEditor"></div><script type="text/javascript">    var editor = new baidu.editor.ui.Editor();    editor.render("myEditor");</script> 

最後一步： 在/UETest/ueditor/editor_config.js中尋找URL變數配置編輯器在你項目中的路徑。

    //修改此處    var URL = window.UEDITOR_HOME_URL || "/WebSite2/ueditor/";    var tmp = window.location.pathname;    //此處去掉    //URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//這裡你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑（指以http開頭的絕對路徑）

至此，一個完整的編輯器執行個體就已經部署到咱們的項目中了！在瀏覽器中輸入http://localhost/UETest 運行下試試UE強大的功能吧！

三、注意事項

1.在引用editor_config.js時，最好先於editor_all.js載入，否則特定情況下可能會出現報錯。

2.若希望給編輯器賦初值，請將上面描述index.aspx的div換成初始內容

3. 需要注意的是編輯器資源檔根路徑。它所表示的含義是：以編輯器執行個體化頁面為當前路徑，指向編輯器資源檔（即dialog等檔案夾）的路徑。鑒於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。"相對於網站根目錄的相對路徑"也就是以斜杠開頭的形如"/UETest/ueditor/"這樣的路徑。

此外如果你使用的是相對路徑,例如"ueditor/"(相對於圖表1路徑結構)

如果網站中有多個不在同一層級的頁面需要執行個體化編輯器，且引用了同一UEditor的時候，可能不適用於每個頁面的編輯器。因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要執行個體化編輯器的頁面最頂部寫上如下代碼即可。

當然，需要令此處的URL等於對應的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";