UI之富文本编辑器-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事件。
UI之富文本编辑器-UEditor的更多相关文章
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- 富文本编辑器Ueditor 及 hibernate 逆向工程
1.1 富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件 ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
随机推荐
- winform窗体 小程序【三级联动】
三级联动[省,市,区] 类似地区选择,当选的某个省份,后面的下拉框相对变成对应省份的区县 实现省市区联动关键是数据库的表,[每个省内区的AreaCode列是同样的] public Form2() { ...
- SQL Server T—SQL 语句【建 增 删 改】(建外键)
一 创建数据库 如果多条语句要一起执行,那么在每条语句之后需要加 go 关键字 建库 : create database 数据库名 create database Dat ...
- Thinkphp 全选、反选 批量删除
完整案例 前台 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 【ibatis】IBatis的动态SQL的写法
Ⅰ .动态SQL的写法 开始 <dynamic 条件成立时前面要加的字符串 prepend ="字符串"> prepend="字符串" 判断条件的对 ...
- Java 初级面试题及答案
1.Java中的重载与重写有什么区别 重载(Overload)是让类以统一的方式处理不同类型数据的一种手段,实质表现就是多个具有不同的参数个数或者类型的同名函数(返回值类型可随意,不能以返回类型作为重 ...
- Application作用域实现:当用户重复登录时,挤掉原来的用户
Application作用域实现:当用户重复登录时,挤掉原来的用户 一.实现思想 1.application(ServletContext)是保存在服务器端的作用域,我们在application中保存 ...
- JS中undefined和null的区别,以及出现原因
区别:null是一个表示无的对象,转换为数值为0: undefined表示一个无的原始值,转化为数值为NAN(与任何数字相加也为NAN) undefined出现原因:(口诀:一变量二函数一对象) 1. ...
- 【代码笔记】iOS-MBProgressHUDDemo
一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> //加入头文件 #import "MBProgressHUD. ...
- 活字格Web应用平台学习笔记3-显示数据列表
活字格第二课的目标,用活字格创建一个简单的在线数据管理系统. 看下设计界面.刚开始跟着点,有点懵圈,到做完,回忆了一下,其实就是先建一张表,然后,把表和页面联系起来,即在页面中划出一些区域,和表的字段 ...
- iOS设计模式-原型模式
| 导语 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 通过深复制(克隆.拷贝)一个指定类型的对象来创建更多同类型的对象.这个指定的对象可被称为“原型”对象,也就是通过复制原型 ...