富文本編輯器-UEditor
官方網址:http://ueditor.baidu.com/website/index.html
下載地址:http://ueditor.baidu.com/website/download.html
二、使用簡單步驟 |
1.在使用頁面正確導入UEditor的js文件
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ueditor.config.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/ueditor.all.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/lang/zh-cn/zh-cn.js" charset="utf-8" ></script>
在這裏要註意,config.js文件應該在前。
2.在頁面form表單添加如下內容
<form action="<%=request.getContextPath() %>/main/contractServlet.action" method="post"> <div style="width:100%"> <script type="text/plain" id="myEditor" style="width:100%;height:260px"></script> </div> </form> </body>
3.在HTML後編寫如下js代碼
<script type="text/javascript"> <!-- UE.getEditor("myEditor"); --> </script>
經過以上步驟即可完成在頁面使用UEditor,如下圖:
下面通過一個具體的需求來說明UEditor的一些配置項和方法的具體用法。
三、需求實例 |
在做某應用時,我們需要對合同進行保存管理。其中,合同裏面的具體條款可根據實際需要進行編輯並生成模板。很顯然合同條款不能是雜亂無章純文本,需要有一定的格式,在這裏我們需要使用富文本編輯器來編輯合同條款。
合同條款一般就是帶有樣式的文本,不會含有圖片、視頻、附件等內容,很顯然通過以上步驟添加的UEditor不符合我們的要求,這就需要我們自己定制UEditor。
四、定制UEditor |
如何定制呢?UEditor為我們提供兩種設置屬性的方式。
方式一:通過修改ueditor.config.js裏面的配置信息;
方式二:在創建UEditor的時候,傳入配置項參數。
至於具體的配置信息,可以查看官方文檔,在這裏就不一一贅述。
在這裏采用方式二,在創建UEditor的時候,傳入配置參數的形式進行定制,代碼如下:
var opts={ //定制工具按鈕 toolbars:[["fullscreen","source","undo","redo","bold","Italic","Underline","|", "StrikeThrough","Horizontal","Date","FontFamily","FontSize","LineHeight","CustomStyle", "JustifyLeft", "JustifyRight", "JustifyCenter","RemoveFormat"]], //獲取光標是,是否自動清空初始化數據 autoClearinitialContent:false, //是否展示元素路徑 elementPathEnabled : false, //是否計數 wordCount:false, //高度是否自動增長 autoHeightEnabled:false, //後臺接受UEditor的數據的參數名稱 textarea:"contact_content" }; UE.getEditor("myEditor",opts);
很顯然定制後的UEditor更符合我們的需求。
五、初始化模板數據 |
在servlet中,可以直接使用通過request的getParamter方法獲取UEditor中的編輯數據,參數即為UEditor中屬性textarea設置的值。
如何在UEditor中初始化模板數據?同樣可以使用兩種方式:
一是在配置項中通過設置initialContent屬性;
二是通過調用UEditor的setContent方法。
方式一:通過請求Servlet,在Servlet中調用業務方法,將保存在數據庫中的合同模板信息加載後保存在request中,並通過轉發到合同編輯頁面,在頁面中將數據取出並在初始化UEditor時賦值。
<form action="<%=request.getContextPath() %>/main/contractServlet.action" method="post"> <input name="reqCode" type="hidden" id="reqCode" value="saveContactModel" /> <div style="width:100%"> <script type="text/plain" id="myEditor" style="width:100%;height:260px"></script> </div> <input type="hidden" name="content" id="content" value="${content }"> <input type="submit" value="保存合同模板"> </form>
Js代碼如下:
var content = document.getElementById("content").value; var opts={ //定制工具按鈕 toolbars:[["fullscreen","source","undo","redo","bold","Italic","Underline","|", "StrikeThrough","Horizontal","Date","FontFamily","FontSize","LineHeight","CustomStyle", "JustifyLeft", "JustifyRight", "JustifyCenter","RemoveFormat"]], //初始化UEditor內容 initialContent:content, //獲取光標是,是否自動清空初始化數據 autoClearinitialContent:false, //是否展示元素路徑 elementPathEnabled : false, //是否計數 wordCount:false, //高度是否自動增長 autoHeightEnabled:false, //後臺接受UEditor的數據的參數名稱 textarea:"contact_content" }; UE.getEditor("myEditor",opts);
方式二:直接請求合同編輯頁面,在頁面中使用UEditor提供的Ajax進行加載合同模板,並通過setContent方法賦值。
var editor= UE.getEditor("myEditor",opts); editor.addListener("ready",function(){ //通過ajax請求數據 UE.ajax.request("<%=request.getContextPath() %>/main/contractServlet.action", { method:"post", async:true, data:{"reqCode":"findContactModel"}, onsuccess:function(xhr){ var s = xhr.responseText; UE.getEditor("myEditor").setContent(s); document.getElementById("show").innerHTML=s; } } ); });
富文本編輯器-UEditor