一.下载：

1.什么是富文本编辑器？就是：

或者是这个：

其中第一个功能比较详尽，其主要用来编写文章，名字叫做udeitor。

第二个就相对精简，是第一个的MINI版，其主要用来编辑即时聊天或者发帖，名字叫做umeditor。

两个都是百度出品的，下载地址：ueditor、 umeditor 。

富文本编辑器的主要原理：将输入框内的文本转换成HTML标签。如下内容：

然后获获取输入框内的HTML内容：

二.安装：

（以下说明只以ueditor为例，umeditor一样的操作）

1.将下载后的压缩包解压，然后将整个文件夹（最好改个名，如ueditor）直接复制WebContent目录下。

2. 此时，ueditor目录可能会报错（没有报错则跳过这一步），缘因里面有个json文件不知道在干什么。这时：

1）右击项目名字，找到“Properties”选项点击，进入界面之后在左栏目找打“Validation”，单击，如下：

取消“JSON Validator”那一栏个两个勾，然后确认即可。

3.将ueditor/jsp/lib目录下的所有jar包复制一份到WEB-INF/lib文件夹里：

   ========> 

4.发现所有在WebContent目录下需要依赖的jar包都要复制多一份到WEB-INF/lib里头，如富文本编辑器、jstl、文件上传下载等所依赖的包。不知为何？

三.使用 

1.首先需要引入三个js文件：

2.然后在<body>里面添加标签，这就是一个富文本编辑器了，可以在style里面设置大小：

3.在javascript里面实例化编辑器，如下：

实际就是声明一个编辑器的变量ue。没有这一步的话编辑器是不会显示的，不知道这个“实例化”是什么意思？

4.默认设置下，如果输入内容超出输入框的高度范围，那么编辑器的输入框就会自动延长。这样就很可能会破坏了HTML的布局，因此我们想要输入框固定不变，多出的内容用滚动条还显示。如何设置？

在ueditor文件夹的根目录下找到ueditor.config.js文件，打开，然后在一堆注释里面找到：

这个就是设置输入框是否会自动长高的选项。我们不想其自动长高，因而将其设为false，然后将注释取消：

5.最后一步，在ueditor目录下有一个index.html文件，在实例化UE的那个javascript代码块里面，有很多函数供我们使用编辑器，根据需要复制里面的代码即可：

JSP嵌入ueditor、umeditor富文本编辑器的更多相关文章

  1. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

  2. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  3. UEditor 百度富文本编辑器 .Net实例

    转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题. 2.内附完整d ...

  4. 使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  5. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

  6. 百度 迷你版 UMeditor富文本编辑器 使用方法

    第一步:下载编辑器 到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子.[下载页面] 第二步:部署编辑器到页面 解压下载的包,放到 ...

  7. 使用UMeditor富文本编辑器上传图片

    注:本文系作者原创,但可随意转载. 最近写自己的网站玩儿,写到博客的部分,打算使用UMeditor,因为之前也用过(但是好像没实现图片上传的功能),感觉用起来还比较简单. 不过还是折腾了一下午...遇 ...

  8. UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

    问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...

  9. Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

随机推荐

  1. MQTT--入门

    一.简述  MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议 ...

  2. 深入理解Tomcat系列之五：Context容器和Wrapper容器

    前言 Context容器是一个Web项目的代表,主要管理Servlet实例,在Tomcat中Servlet实例是以Wrapper出现的.如今问题是怎样才干通过Context容器找到详细的Servlet ...

  3. lua学习笔记（十二）

    弱引用table     lua使用自动内存管理机制,通过垃圾回收器来回收内存     垃圾回收器只能回收它认为是垃圾的内容,而不能回收用户认为是垃圾的内容     典型的例子栈,栈一般用一个数组和一 ...

  4. kafka 小案例【二】 --kafka 设置多个消费着集群

    这个配是我在http://www.cnblogs.com/zhangXingSheng/p/6646972.html 的基础上再添加的配置 设置多个消息集群 (1)复制两份配置文件 > cp c ...

  5. oracle海量数据中提升创建索引的速度

    基本信息情况: 数据库版本:Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bit Production 操作系统版本:Ce ...

  6. [译]GLUT教程(目录)

    http://www.lighthouse3d.com/tutorials/glut-tutorial/ GLUT是OpenGL Utility Toolkit的意思.作者Mark J. Kilgar ...

  7. [转载]Axure RP 7.0下载地址及安装说明

    Axure RP是产品经理必备的原型制作工具,因为很多同学是新手,在这里整理一下axure7.0的下载.安装和汉化流程,希望能够帮到大家. Axure RP是美国Axure Software Solu ...

  8. Cannot open channel to 3 at election address :3888 java.net.ConnectException: Connection refused (Connection refused)

    关于Linux中搭建分布式时可能遇到的问题 这个问题来自于今天安装zookeeper时踩的一个大坑,害的我花了一天时间.在搭建zookeeper的分布式时,往往要进行这样的配置: server.1=h ...

  9. 《TomCat与Java Web开发技术详解》（第二版） 第六章节的学习总结 ---- JSP技术

    第六章主要介绍了JSP的相关知识. 1.JSP:是通过在HTML文件中加入java程序片段(Java Scriptlet)和JSP标记,就构成了JSP文件.JSP实质上是Servlet.JSP的API ...

  10. Java集合系列之TreeMap源代码分析

    一.概述 TreeMap是基于红黑树实现的.因为TreeMap实现了java.util.sortMap接口,集合中的映射关系是具有一定顺序的,该映射依据其键的自然顺序进行排序或者依据创建映射时提供的C ...