PHP下怎樣整合百度UE(ueditor 1.4.3)

PHP下怎樣整合百度UE(ueditor 1.4.3)

最近很多部落格都來問我怎麼整合百度UE(ueditor 1.4.3)，實在回答不過來，所以在這寫一下集成百度UE的思路，本文內使用的最新版的UE1.4.3。

下載安裝

1.首先到官網下載最新版的UE1.4.3

UE官方下載網址：http://ueditor.baidu.com/website/download.html#ueditor

這裡我下載的是1.4.3PHP版本。下載你所使用的版本就行。

解壓縮文件到你的項目

2.部署.在前端Html頁面引入UE  所需的JS文件，然後使用getEditor 實例化

<span><</span><span>body</span><span>></span> <span><!--</span><span> 加载编辑器的容器 </span><span>--></span> <span><</span><span>script </span><span>id</span><span>="container"</span><span> name</span><span>="content"</span><span> type</span><span>="text/plain"</span><span>></span><span> 这里写你的初始化内容 </span><span></</span><span>script</span><span>></span> <span><!--</span><span> 配置文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.config.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 编辑器源码文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.all.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 实例化编辑器 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span> <span>var</span><span> ue </span><span>=</span><span> UE.getEditor(</span><span>'</span><span>container</span><span>'</span><span>); </span><span></</span><span>script</span><span>></span> <span></</span><span>body</span><span>></span>

 

瀏覽你的頁面，即可見Ueditor 。是不是很簡單的說。

配置Ueditor

UEditor 的配置項目分為兩類：前端配置項 和 後端配置項目。

前後端的設定統一寫在後端(PHP版本的config在php/config.json)，編輯器實例化時，非同步讀取後端設定訊息，覆蓋到前端的設定裡。

後端取得的設定項 > 實例化傳入的設定項 > ueditor.config.js檔案的設定項

前端配置項目：官方提供了兩種配置方法，靜態配置、動態配置。

靜態設定：即設定ueditor 目錄下的 ueditor.config.js  具體設定項目就參考  http://fex-team.github.io/ueditor/#start-config

動態配置：也就是在實例化UE的時候，透過動態傳入配置參數。

<span>var</span> ue = UE.getEditor('container'<span>, { </span><span>//</span><span>这里写你的自定义配置项</span> <span> toolbars: [
        [</span>'fullscreen', 'source', 'undo', 'redo', 'bold'<span>]
    ],
    autoHeightEnabled: </span><span>true</span><span>,
    autoFloatEnabled: </span><span>true</span><span> });</span>

 

 後端設定項：

在這裡先說一下UE的請求：UE所有的操作都是透過get方式請求serverUrl傳遞action變數的值來進行下一步操作。取得配置、上傳圖片、取得圖片等等其它的操作。

UE預設是透過讀取目錄下的ueditor.config.js 中的serverUrl 參數然後透過get方法傳遞action=config來取得後端的設定項目的。預設請求是：serverUrl?action=config 來取得配置項的。 serverUrl 可以在前端頁面動態設定和ueditor.config.js靜態設定都是可以的。

你可以測試你的網站下的路徑 ueditor/php/controller.php?action=config 是否正常返回了json格式(其它格式也可以，具體請看官方文檔)的後端配置內容，格式大致如下。如果這個要求出錯，出現400、500等錯誤，編輯器上傳相關的功能將無法正常使用。

<span>{ </span>"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage"<span>, </span>"imagePath": "/ueditor/php/"<span>, </span>"imageFieldName": "upfile"<span>, </span>"imageMaxSize": 2048<span>, </span>"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"<span>] </span>"其他配置项...": "其他配置值..."<span> }</span>

 

整合

前面已經說過了UE所有的操作都是透過get方式請求serverUrl傳遞action變數的值來進行下一步操作。取得配置、上傳圖片、取得圖片等等其它的操作。了解了這一點，對於整合PHP。或者其它的語言都很簡單了。具體代碼可以參考官方提供的Demo。

 

以上就介紹了PHP下怎樣整合百度UE(ueditor 1.4.3)，包含了百度UE方面的內容，希望對PHP教程有興趣的朋友有所幫助。