php UEditor百度編輯器安裝與使用方法分享

這篇文章主要介紹了UEditor百度編輯器安裝與使用方法分享,需要的朋友可以參考下

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

_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.php頁面作為編輯器的執行個體化頁面，用來展示UEditor的完整版效果。在index.php檔案中，首先匯入編輯器需要的三個入口檔案，範例程式碼如下：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>編輯器完整版執行個體</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" rel="external nofollow" >

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

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

最後一步：在編輯器執行個體的頂部加上如下代碼：

<script type="text/javascript"> window.UEDITOR_HOME_URL='ueditor/';//此為ueditor相對於執行個體頁面的路徑</script>

上面的是用的相對路徑，也可以使用相對於網站根目錄的絕對路徑，如：

<script type="text/javascript"> window.UEDITOR_HOME_URL='/uc/ueditor/';//此為ueditor相對於網站根目錄的路徑</script>

建議使用相對於網站根目錄的絕對路徑。
至此，一個完整的編輯器執行個體就已經部署到咱們的項目中了！
最後一步也可以通過修改以下地方來實現（不建議不懂js的人員使用）：
在/UETest/ueditor/ editor_config.js中尋找"URL= window.UEDITOR_HOME_URL||"並修改為相應路徑，當然如果修改這裡的話，window.UEDITOR_HOME_URL就不用在執行個體版面設定了。

//強烈推薦以這種方式進行絕對路徑配置URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

三、具體使用

1.提交編輯器內容至後端
情境一：在編輯器所在的Form中存在提交按鈕，提交動作由點擊此按鈕完成。
該情境適用於最普通的場合，沒有太大問題需要注意，僅三點說明：
1) 預設情況下提交到背景表單名稱是 “editorValue”，在editor_config.js中可以配置，參數名為textarea。
2) 可以在容器標籤（即script標籤）上設定name屬性，以覆蓋editor_config.js中的預設配置。執行個體代碼如下，此處的myContent將成為新的提交表單名稱

<form action="" method="post"> <script type="text/plain" id="editor" name="myContent"> </script> <input type="submit" name="submit" value="提交"></form>

3）後端接收程式可以通過如下幾種方式來擷取編輯器中的富常值內容。

//PHP擷取：$_POST["myContent"]   //JSP擷取：request.getParameter("myContent");   //ASP擷取：request("myContent");   //NET擷取:context.Request.Form["myContent"];

情境二：編輯器所在的Form中不存在提交按鈕，提交動作由外來事件觸發。
該情境適用於網站前端互動較多的場合，需要注意的事項主要是在觸發form提交動作之前執行編輯器內容同步操作。一般的代碼模式如下所示：

//滿足提交條件時同步內容並提交，此處editor為編輯器執行個體if(editor.hasContent()){ //此處以非空為例 editor.sync();  //同步內容 someForm.submit(); //提交Form}

此處editor是編輯器執行個體對象。

情境三：編輯器不在任何Form中，提交動作由外來事件觸發。

該情境使用不多，但特殊時候可能需要。UEditor也提供了對應的處理方案，基本邏輯跟情境二一樣，只是在執行同步操作的時候需要傳入提交form的id，如editor.sync(myFormID)即可。其他同情境二。
2.從資料庫讀取內容

<script type="text/plain" id="editor"> //從資料庫中取出文章內容列印到此處</script>

此處採用了script標籤作為編輯器容器物件，並設定了其類型是純文字，從而在避免了標籤內部JS代碼執行的同時解決了部分同學在使用傳統的textarea標籤作為容器所帶來的一次額外轉碼問題。

3.編輯器內容初始化（即往編輯器中設定富文本）

寫新文章，編輯器中預置提示、問候等內容。
在editor_config.js檔案中找到initialContent參數，設定其值為需要的提示或者問候語即可，如initialContent:'歡迎使用UEditor!'。

4.圖片上傳

如果是新站也就是說圖片路徑採用編輯器本身的路徑的話，無需更改，如果老站已經有自己的圖片檔案夾的話需要更改以下ueditor/php檔案夾中的檔案：