UI之富文本編輯器-UEditor

時間 2019-12-21

標籤文本編輯器 ueditor 简体版

原文原文鏈接

目錄：javascript

1、概述html

2、使用簡單步驟java

3、需求實例web

4、定製UEditorajax

5、初始化模板數據數據庫

6、源碼下載async

1、概述

　　在作Web應用時，常常會進行富文本編輯，經常使用的富文本編輯器有不少，好比CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。編輯器

　　在這裏爲你們推薦百度推出的UEditor，UEditor是所見即所得的富文本編輯器，具備輕量、可定製、注重用戶體驗的特色。工具

　　官方網址：http://ueditor.baidu.com/website/index.htmlpost

　　下載地址：http://ueditor.baidu.com/website/download.html

2、使用簡單步驟

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的一些配置項和方法的具體用法。

3、需求實例

　　在作某應用時，咱們須要對合同進行保存管理。其中，合同裏面的具體條款可根據實際須要進行編輯並生成模板。很顯然合同條款不能是雜亂無章純文本，須要有必定的格式，在這裏咱們須要使用富文本編輯器來編輯合同條款。

　　合同條款通常就是帶有樣式的文本，不會含有圖片、視頻、附件等內容，很顯然經過以上步驟添加的UEditor不符合咱們的要求，這就須要咱們本身定製UEditor。

4、定製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更符合咱們的需求。

5、初始化模板數據

　　在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;
                }
            }
        );
    });