Ueditor富文本編輯器使用詳解

一、下載下傳ueditor

    官網下載下傳頁面：http://ueditor.baidu.com/website/download.html     使用者根據自己的需求下載下傳适當版本的ueditor，此處使用的是【1.4.3.3 JSP版】的 UTF-8版

二、解壓并放入項目

将下載下傳的ueditor解壓并放入項目

将 utf8-jsp->jsp->lib檔案夾下的jar包放入WEB-INF下的lib檔案夾中（此處注意jar沖突）

三、jsp引用ueditor

在你的jsp中引用以下兩個檔案（路徑請自行調整）

<script type="text/javascript" src="../utf8-jsp/ueditor.config.js"></script>   
<script type="text/javascript" src="../utf8-jsp/ueditor.all.js"></script> 
           

所需富文本編輯器處使用 

<textarea id="editor" name="editor" style="height: 300px;width: 600px; margin: 0 auto;"></textarea>      

并在jsp頁面下面執行個體化編輯器

<script type="text/javascript">  
    var ue = UE.getEditor("editor");  
</script>  
           

此時就可以使用了（此處富文本的功能可自行定義，具體使用請檢視官方文檔：http://fex.baidu.com/ueditor/）

其中上圖中的圖檔儲存路徑在jsp檔案夾下的config.json檔案中配置

若想改變圖檔上傳路徑，imageUrlPrefix，imagePathFormat這兩個配置項需同時修改，否則圖檔上傳之後無法正常顯示圖檔

該檔案中還包括檔案、視訊、截圖等參數配置，原理同上

四、富文本編輯器中的資料擷取與回填

使用UE.getEditor('editor').getContent()可擷取編輯器中的全部内容 在回填的頁面需要先執行個體化編輯器，再進行指派

var ue = UE.getEditor('editor');
$("#editor").val(此處為資料！);
           

其中index.html中為官網提供的API