UI之富文本编辑器-UEditor

目录：

1、概述

2、使用简单步骤

3、需求实例

4、定制UEditor

5、初始化模板数据

6、源码下载

1、概述

 

　　在作Web应用时，常常会进行富文本编辑，经常使用的富文本编辑器有不少，好比CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。

　　在这里为你们推荐百度推出的UEditor，UEditor是所见即所得的富文本编辑器，具备轻量、可定制、注重用户体验的特色。

　　官方网址：http://ueditor.baidu.com/website/index.html

　　下载地址：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;
                }
            }
        );
    });

　　这个地方要注意，必定要等到UEditor加载完毕后才能调用setConent方法，所以须要监听UEditor的ready事件。

6、源码下载

　　源代码下载请到杰瑞教育百度云盘下载

 

做者： 杰瑞教育
出处： http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。