UEditor編輯器的使用

1.首先咱們要去官網下載UEditor編輯器，選擇語言，這裏我用的是php utf-8版本（李昌輝）

2.下載完成以後解壓文件，將解壓的文件放到咱們的網站目錄裏面

3.ueditor/utf8-php目錄下面有個index.html，也就是官方作的demo

 

 

能夠打開這個demo看一下源代碼，它的功能很是多，咱們要用的時候選擇本身想用的功能使用就能夠了。

4.下一步咱們本身建一個頁面來測試

5.在頁面內引入如下三個JS文件，注意根據本身的文件位置修改路徑：

<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>  
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>  
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>  

6.而後在頁面要顯示編輯器的地方寫入如下代碼，能夠修改寬度高度，注意要取一個惟一id：

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>  

7.在頁面最後嵌入JS來實例化出編輯器：

<script type="text/javascript">  
  
    //實例化編輯器  
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例  
    var ue = UE.getEditor('editor');  
  
  
     
    function getContent() {  
        var arr = [];  
        arr.push("使用editor.getContent()方法能夠得到編輯器的內容");  
        arr.push("內容爲：");  
        arr.push(UE.getEditor('editor').getContent());  
        alert(arr.join("\n"));  
    }  
     
</script>  

其中getContent()函數是咱們取的其中一個功能，就是獲取編輯器中的內容（包含html代碼）。

8.其中如下這句代碼是實例化編輯器，注意id是和第6步裏面的id一致

 var ue = UE.getEditor('editor');  

9.若是要修改路徑，能夠在ueditor.config.js文件中修改

window.UEDITOR_HOME_URL = "/xxxx/xxxx/";  

10.編輯器默認上傳的圖片在ueditor\php\upload\image裏面

11.要修改圖片的上傳存儲路徑能夠在ueditor\utf8-php\php路徑下config.json文件裏面修改

 "imagePathFormat": "/zuoye/chajian/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */