UI之富文本編輯器-UEditor

目錄：

一、概述

二、使用簡單步驟

三、需求實例

四、定制UEditor

五、初始化模板數據

六、源碼下載

一、概述

 

　　在做Web應用時，經常會進行富文本編輯，常用的富文本編輯器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。

　　在這里為大家推薦百度推出的UEditor，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加載完畢后才能調用setConent方法，因此需要監聽UEditor的ready事件。

六、源碼下載

　　源代碼下載請到傑瑞教育百度雲盤下載

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。