步驟如下:
壹、官網上下載完整源碼包,解壓到任意目錄
_examples:編輯器完整版的示例頁面
_demos:編輯器的各種使用案例
dialogs:彈出對話框對應的資源和JS文件
themes:樣式圖片和樣式文件
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文夾中。
第三步:為簡單起見,此處將以根目錄下的index.jsp頁面作為編輯器的實例化頁面,用來展示UEditor的完整版效果。在index.jsp文件中,首先導入編輯器需要的三個入口文件,示例代碼如下:
[html] view plaincopy
<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">
第四步:然後在index.php文件中創建編輯器實例及其DOM容器。具體代碼示例如下:
[html] view plaincopy
<div id="myEditor"></div>
<script language="javascript" type="text/javascript">
var option = {
initialContent : '',//初始化編輯器的內容
minFrameHeight : 400,//設置高度
textarea : 'content'//設置提交時編輯器內容的名字,之前我們用的名字是默認的editorValue
};
var editor = new baidu.editor.ui.Editor(option);
editor.render("myEditor");
</script>
最後壹步: 在/UETest/ueditor/ editor_config.js中查找URL變量配置編輯器在妳項目中的路徑。
[html] view plaincopy
//強烈推薦以這種方式進行絕對路徑配置
URL=window.UEDITOR_HOME_URL||"/UETest/ueditor/";
至此,壹個完整的編輯器實例就已經部署了!在瀏覽器中輸入http://localhost:8080/UETest 運行下。