最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器。以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的。

其实看ueditor功能很强大,不过百度的设计还是很不错的。只需要稍微配置一下就可以用了。

首先下载到 ueditor1_4_3-utf8-jsp.rar,连接地址是:http://ueditor.baidu.com/website/。我选择的是utf-8版本的。

解压以后整体拷贝到java web项目的网页根目录下。我这里是用myeclipse建的项目,所以把ueditor拷贝到了WebRoot下即可。

第二步,引用ueditor/jsp/lib下的jar包。你可以选择直接在Java Build Path中配置,或者直接放入WebRoot/WEB-INF/lib文件夹中,项目会自动引用该文件夹下的jar。推荐使用直接放到WEB-INF/lib下,这样你的jar是随着项目移动的,系统会按照相对路径加载项目下的jar。如果选择第一种,如果当jar文件移动了,那么这个功能就会失效的。

第三步,在页面上引入2个js文件

  1. <scripttype="text/javascript"src="ueditor/ueditor.config.js"></script>
  2. <scripttype="text/javascript"src="ueditor/ueditor.all.js"></script>

第四步,在页面的编辑器位置,添加html代码

  1. <textareanametextareaname="content" id="myEditor"></textarea>
  2. <scripttypescripttype="text/javascript">
  3. UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/'; //一定要用这句话,否则你需要去ueditor.config.js修改路径的配置信息
  4. UE.getEditor('myEditor');
  5. </script>

第五步,ueditor支持图片、文档、音乐等文件上传功能,如果你想要配置上传路径,可以修改 ueditor/jsp/config.json。

这个文件对于每一个配置项,都明确的文字说明。附上一段图片上传的配置吧:

  1. /* 上传图片配置项 */
  2. "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  3. "imageFieldName": "upfile", /* 提交的图片表单名称 */
  4. "imageMaxSize": 2048000, /* 上传大小限制,单位B */
  5. "imageAllowFiles": [".png", ".jpg",".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  6. "imageCompressEnable": true, /* 是否压缩图片,默认是true*/
  7. "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  8. "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  9. "imageUrlPrefix": "", /* 图片访问路径前缀 */
  10. "imagePathFormat":"_images/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

第六步,ueditor支持自定义功能,界面上显示的功能都是可配置的,只要在ueditor/ueditor.config.js的toolbar中删改配置即可,代码如下:

  1. //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
  2. , toolbars: [[
  3. 'fullscreen', 'source', '|', 'undo', 'redo', '|',
  4. 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  5. 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  6. 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  7. 'directionalityltr', 'directionalityrtl', 'indent', '|',
  8. 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  9. 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  10. 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
  11. 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
  12. 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
  13. 'searchreplace', 'help', 'drafts'
  14. ]]

看起来是6步,其实每一步都很简单了。为了让小伙伴们看得更清楚些,来张效果图吧:

效果还不错吧,其实,看起来复杂的功能,实现起来却很简单。而简单的功能,实现起来可能会很复杂。我们不只是使用那么看起来复杂,使用起来简单的各种开源组件,更要学习,如何把复杂的功能封装起来,对外提供简单的接口,让别人也能简单使用。

UEdit插件使用的更多相关文章

  1. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  2. 关于百度富文本编辑器UEdit的初始化内容失败问题

    百度富文本编辑器毫无疑问是强大的,但也会出问题.这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题. 我们使用 var ue = UE.getEditor('editor', {}); 创建实例 ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  7. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  8. 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  9. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

随机推荐

  1. Java网络编程与NIO详解8:浅析mmap和Direct Buffer

    微信公众号[黄小斜]作者是蚂蚁金服 JAVA 工程师,目前在蚂蚁财富负责后端开发工作,专注于 JAVA 后端技术栈,同时也懂点投资理财,坚持学习和写作,用大厂程序员的视角解读技术与互联网,我的世界里不 ...

  2. @RequestBody 注意的问题

    contentType : "application/json", //只能是这个 RequestBody 不能和form/data共存: @RequestMapping(valu ...

  3. springboot 整合shiro

    参考:        https://blog.csdn.net/fuweilian1/article/details/80309192(推荐)       https://blog.csdn.net ...

  4. Ajax前台返回JSON数据后再Controller中直接转换成类型使用,后台接收json转成实体的方法

    之前写过一篇记录文章,写的是将一个比较复杂的数据结构在前台组合起来后传递到后台. 当时并不太了解@RequestBody,也并没有使用js提供的JSON.stringify()方法 所有都是自己写的, ...

  5. 前端利器躬行记(2)——Babel

    Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...

  6. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  7. python学习——面向对象编程

    关于python面向对象编程,请参考: https://blog.csdn.net/zhoudaxia/article/details/23341261

  8. 多线程环境中安全使用集合API(含代码)

    转自: http://blog.csdn.net/ns_code/article/details/17200509 在集合API中,最初设计的Vector和Hashtable是多线程安全的.例如:对于 ...

  9. python decode encode 解码与编码问题

    python 解码与编码问题 1.decode 俗称解码,把编码解码成unicode,例如一个字符串变量 str 是utf-8编码,使用str.decode('utf-8')  ,就是把utf-8编码 ...

  10. Netty源码分析 (一)----- NioEventLoopGroup

    提到Netty首当其冲被提起的肯定是支持它承受高并发的线程模型,说到线程模型就不得不提到NioEventLoopGroup这个线程池,接下来进入正题. 线程模型 首先来看一段Netty的使用示例 pa ...