JSP嵌入ueditor、umeditor富文本编辑器
一.下载:
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富文本编辑器的更多相关文章
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题. 2.内附完整d ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- 百度 迷你版 UMeditor富文本编辑器 使用方法
第一步:下载编辑器 到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子.[下载页面] 第二步:部署编辑器到页面 解压下载的包,放到 ...
- 使用UMeditor富文本编辑器上传图片
注:本文系作者原创,但可随意转载. 最近写自己的网站玩儿,写到博客的部分,打算使用UMeditor,因为之前也用过(但是好像没实现图片上传的功能),感觉用起来还比较简单. 不过还是折腾了一下午...遇 ...
- UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合
日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...
随机推荐
- 转MQTT--mosquitto服务器系统内容主题
MQTT客户端可以通过订阅位于$SYS层次下的主题来查看mosquitto服务器的状态信息.标记为Static的主题对于每一次订阅只发布一次.其它所有主题每隔sys_interval(在mosquit ...
- 转Postman请求Https接口
转自:https://blog.csdn.net/ONS_cukuyo/article/details/79172242 单向认证 像平常一样访问就行,无需做任何处理,只需要把http://变成htt ...
- 高效抽取loading,再多的载入页面也不怕
当今的app基本上有两个操作,一个是载入数据 ,一个就是把数据显示到页面上.但假设页面特别的多.就每一个页面都要载入数据,就要写 loading 页面.我之前就是用dialog写,抽取出来一个类.哪里 ...
- 清除掉AD的相关属性!
今天有朋友问我怎么清除掉AD 的相关属性,由于他们的用户都设置了登录到属性,这样我们的用户就仅仅能登陆他须要设置的计算机.对于兴许规则的变更的时候,我们的管理员配置起来就比較复杂.他须要非常长的时间去 ...
- 阿里云 经典网络使用ClassicLink连接到专用网络后,192.168网段需要添加路由
配置后,专用网络中的机器Ping不通经典网络, 查帮助说192.168网段需要手动添加路由表. 抓包能在经典网络中收到专用网络中过来的数据包,但回复的数据包不能正确发出去. 先用 route -n 查 ...
- Mybatis_遇到的问题汇总
1.The setting logImpl is not known 我在参考某个网站学习mybatis时,出现这个错误,后来找到的原因是因为mybatis的版本(3.1.1)太低,换成3.3.1就没 ...
- 分析Memcached客户端如何把缓存数据分布到多个服务器上
Memcached客户端可以设多个memcached服务器,它是如何把数据分发到各个服务器上,而使各个服务器负载平衡的呢? 可以看看.net版中的客户端中的源码,就可以知道 先看代码: 1 /// ...
- 昂贵的聘礼 - poj 1062 (Dijkstra+枚举)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 39976 Accepted: 11596 Description 年 ...
- Maven学习----dependencies与dependencyManagement的区别(转)
转自:http://blog.csdn.net/liutengteng130/article/details/46991829 1.DepencyManagement应用场景 当我们的项目模块很多的时 ...
- 常用PHP array数组函数
array_rand 第二个参数用来确定要选出几个元素 如果选出的元素不止一个,则返回包含随机键名的数组,否则返回该元素的键名. $a=array("red","gre ...