這篇文章主要介紹了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文夾中。供範例。首先匯入編輯器所需的三個
入口檔案
，範例程式碼如下：<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" >
登入後複製
<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>
登入後複製
//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
}登入後複製
物件
。
場景三：編輯器不在任何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資料夾中的檔案：
以上是詳細介紹php UEditor百度編輯器安裝和使用的方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
