ueditor1_4_3_3编辑器的应用
教程使用的是ueditor1_4_3_3版本。
首先到官网http://ueditor.baidu.com/website/download.html下载jsp utf-8版
下载好以后,解压,把解压文件夹命名为ueditor
然后把ueditor目录整个复制到webapp下
在自己需要编辑器的页面引入ueditor的js
在body中:
<head></head>中:
<script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); </script>
把ueditor/jsp/lib下的jar包全部添加到项目里。
另外还需要一个jar包,此处在pom.xml配置了:
<dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency>
然后在ueditor.config.js中找到,zIndex : 900 并去掉注释, 修改值为 999999
修改附件上传目录:
部署,去掉部署项目名:
保存以后要展示时,在需要代码高亮的页面配置:
还要把后台取数据的ajax变为同步加载!
需要展示的时候自动换行在相应css添加下面代码即可:
编辑器中添加代码是 背景色 修改:
编辑器中图片自适应:
iframe.css中添加
/*可以在这里添加你自己的css*/ img { max-width: 100%; /* 图片自适应宽度 */ } body { overflow-y: scroll !important; } .view { word-break: break-all; } .vote_area { display: block; } .vote_iframe { background-color: transparent; border: 0 none; height: 100%; }
一些技巧:
uuditor常用的js函数在ueditor/index.html里面能找到,比如获取编辑框里面的内容等等。
注意如果上传到服务器html源码数据库表字段是用longtext接收的,那么此jar包要换到1.4及以上版本,不然会报错