王老师
|
在今天，网络发展迅速，人们动一动手指即可在网络中获取大量信息。人们也可以使用网络来记录分享自己的生活点点滴滴和各种知识文化。 我们已经学过html、java、jsp、数据库，那么我们知道用户的所有博客文章信息都是存储在数据库中，我们使用表单来提交用户编写的文章。但是在表单中我们需要给文章添加文本样式，插入图片、链接、表格，使文本对齐。这些功能仅仅靠textarea是无法实现的，这时候我们就需要使用高级文本编辑器控件了，如图1所示。  图1 UEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。UEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。我个人之所以选择UEditor，有以下几个原因： 首先，UEditor功能全面，涵盖流行富文本编辑器特色功能，独创多种全新编辑操作模式。其次，UEditor体验效果好，屏蔽各种浏览器之间的差异，提供良好的富文本编辑体验。最重要的是，它免费开源，支持商业和非商业用户的免费使用和任意修改。 UEditor的使用方法很简单，下面介绍一下使用UEditor的步骤。 第一步：到官网下载 UEditor UEditor还有个优点是可以自定义下载，在下载之前选择好我们所需要的功能，然后自动生成相关代码，打包下载，如图2所示。如果我们需要的功能比较多，下载开发版本。  图2 第二步：解压文件，将文件夹添加到我们的web项目中。拷贝目录jsp/lib/下的所有jar包到WEB-INF/lib/目录下， 部署至此完成，最终项目的结构如图3所示：  图3 第三部：配置项目，将相关js文件引入我们自己的页面。 编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器：
var ue = UE.getEditor('container', {
autoHeight: false }); 配置项也可以通过 ueditor.config.js 文件修改，具体的配置方法请看前端配置项说明第四步：在浏览器打开访问我们的页面，看到图4说明你配置成功了。 通 getContent 和 setContent 方法可以设置和读取编辑器的内容，除此之外UEditor 还给我们提供了大量操作方法。UEditor 的更多API请看API 文档。  图4 |
