在做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事件。

UI之富文本编辑器-UEditor的更多相关文章

  1. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  2. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  3. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  4. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  5. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  6. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  7. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  8. 富文本编辑器Ueditor 及 hibernate 逆向工程

    1.1           富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件 ...

  9. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

随机推荐

  1. Java基础——Servlet(四)

    最近一直在学习Servlet,真的有烦躁,一下子要创建好几个文件,服务端.客户端.html页面....学习进度蛮慢的,很容易失掉信心.当学习到cookie时,发现有好多实现是在我们日常生活中可以会遇得 ...

  2. Arrays工具类的aslist()方法的使用

    数组转换成集合: 数组转换成集合不能增加或减少元素,但是可以用集合思想操作数组,也就是说可以使用其他集合中的办法 String[] arr = {"a", "b" ...

  3. 测试单元测试完毕关闭jvm

    今天一天都在纠结Netty中的服务器端究竟是如何实现自动关闭的, 吃完晚饭才发现原来不是netty关闭,是测试单元关闭的...

  4. [Android]Java中点击事件的四种写法

    点击事件的必备条件:实现OnClickListener接口,重写onclick(View v)方法 以拨号简单案例为例,如下图效果: 逻辑流程: 获取点击对象,获取数据 给对象设置监听类 实现OnCl ...

  5. 集合框架三(List和Set的补充(不加泛型))

    List List存放的元素有序,可重复 List list = new ArrayList(); list.add("123"); list.add("456" ...

  6. Tronado自定义Session

    这里就不一一诉说Session和Cookie直接的关系了,下面以一张图来概括: 下面是一个简单的Tornaod自定义Session的例子,看完后你可能会明白为什么我们在Django里可以直接使用req ...

  7. js 动态声明变量

    var  object = {}; for(var i=0; i<5; i++){ object['attr'+i] = i; }

  8. 类与接口(三)java中的接口与嵌套接口

    一.接口 1. 接口简介 接口: 是java的一种抽象类型,是抽象方法的集合.接口比抽象类更加抽象的抽象类型. 接口语法: [修饰符] [abstract] interface 接口名 [extend ...

  9. LeetCode题解之Max Consecutive Ones

    1.题目描述 2.问题分析 遍历一次数组,以每个1 为起点向后数,数到0 时比较当前1的个数和最大1 的个数,然后将遍历的起点放到当前0 的后面. 3.代码 int findMaxConsecutiv ...

  10. XML与DataSet的相互转换

    转:https://www.cnblogs.com/kunEssay/p/6168824.html XML与DataSet的相互转换的类 一.XML与DataSet的相互转换的类 using Syst ...