一.下载:

1.什么是富文本编辑器?就是:

或者是这个:

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

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

两个都是百度出品的,下载地址:ueditorumeditor 。

富文本编辑器的主要原理:将输入框内的文本转换成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. Java和C++ 比較

    总体差别 1. C/C++是直接执行在机器上(编译后为机器码),而java编译后产生*.class文件(字节码)是执行在java虚拟机上在(JVM),经过JVM解译(机器码)再放到真实机器上执行. J ...

  2. struts2在项目中的应用之下载

    文件下载是一个非经常见的功能,用struts2实现文件下载的步骤: 一)定义一个Action类.FileDownload.java package com.struts2.filedownload; ...

  3. hdu 4112 Break the Chocolate(乱搞题)

    题意:要把一块n*m*k的巧克力分成1*1*1的单元,有两种操作方式:1,用手掰(假设力量无穷大),每次拿起一块,掰成两块小的:2,用刀切(假设刀无限长),可以把多块摆在一起,同时切开.问两种方式各需 ...

  4. 创建自己的Spring Boot Starter

    抽取通用模块作为项目的一个spring boot starter.可参照mybatis的写法. IDEA创建Empty Project并添加如下2个module,一个基本maven模块,另一个引入sp ...

  5. warning: push.default is unset; its implicit value is changing in Git 2.0 from 'matching' to 'simple'.

    'matching'参数是 git 1.x 的默认行为,其意是如果你执行 git push 但没有指定分支,它将 push 所有你本地的分支到远程仓库中对应匹配的分支. 而 Git 2.x 默认的是 ...

  6. IE hack 条件语句

    只在固定IE版本下执行 将以下代码放在head标签中,在script标签中写js即可 <!--[if IE 8]> <script> console.log("in ...

  7. Wireshark 与 Tcpdump

    [1]Wireshark 与 Tcpdump Wireshark是Windows下非常容易上手的抓包工具.但在Linux下很难找到一个好用的图形界面抓包工具.还好有Tcpdump.我们可以用Tcpdu ...

  8. PHP中使用POST发送请求的常用方式

    前提概要: 在PHP进行项目开发过程中,使用post发送请求的情况很多,以下总结了项目中主要用的两种方式. 总结下: 在我接触到的项目中用到第二种情况较多,比如写:短信接口.....总体来说比较简单便 ...

  9. <转载> 为什么在Python里推荐使用多进程而不是多线程?

    经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢?                要知其然,更要知其所以然.所以有了下面的深入研究: 首先强调背景:     ...

  10. socket java 实例

    简单的java socket 示例 一.搭建服务器端 a).创建ServerSocket对象绑定监听端口. b).通过accept()方法监听客户端的请求. c).建立连接后,通过输入输出流读取客户端 ...