UI之富文本編輯器-UEditor用法

     <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></pre>



</div>
3、  在html后編寫如下js代碼：官方建議直接調用工廠方法getEditor來創建剪輯器，后續如果用到編輯器時，可直接調用UE.getEditor(“myEditor”)來獲取編輯器的實例對象。 

 <script type="text/javascript">
<!--
    UE.getEditor("myEditor");
//-->
</script>
 



經過以上步驟即可完成在頁面使用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事件。 

 源代碼百度云盤下載 
</div>
來自： http://www.cnblogs.com/jerehedu/p/4208042.html