ueditor jsp版在SSH2项目中使用小结

最新推荐文章于 2021-02-26 19:33:59 发布

elementf

最新推荐文章于 2021-02-26 19:33:59 发布

阅读量794

点赞数

分类专栏： -----ueditor 文章标签： ueditor javaweb 富文本编辑器 ueditor jsp controller.jsp config.json

本文链接：https://blog.csdn.net/elementf/article/details/72675902

版权

-----ueditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 最近项目涉及富文本框功能，一番调研后，决定使用ueditor。因其文档齐全，且出自百度，放心! 

 
 看了官方文档，也看了不少兄弟的博客，踩了一些坑，在此记录下。 

  主要关注几个文件： 

 
  
 1、jsp/config.json（上传文件、涂鸦、图片、视频等路径配置） 

 
 2、controller.jsp（内部action统一转发） 

 
 3、ueditor.config.js（默认配置） 

 
 4、ueditor.all.js/ueditor.all.min.js 

 
 一、简介 

 
 ueditor是百度编辑器，官网地址： 
 http://ueditor.baidu.com/website/ 

 
 完整的功能演示，可以参考： 
 http://ueditor.baidu.com/website/onlinedemo.html 

 
 下载地址： 
 http://ueditor.baidu.com/website/download.html 

 
 下载开发版本jsp-utf8版本，下载的zip包解压后，重命名utf8-jsp为editor， 

 
 然后将其拷贝到项目中，我放的路径为WebRoot/plugin/下 

 
 二、如何引入ueditor编辑器 

 
 下载包的index.html是编辑器示例，主要几处代码如下： 

<head>
   ……
<!--编辑器基本配置-->
<script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></ script>
<!--编辑器完整代码-->
<script type="text/javascript" src="plugin/ueditor/ueditor.all.js"> </script >
  ……
</head>
<body>
<div>
<script id="editor" type="text/plain"></ script>
</div>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor( 'editor', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        initialFrameWidth: 690,
        initialFrameHeight:483
    });
</script>

三、修改文件 ueditor.config.js

 
  注意： var URL = window.UEDITOR_HOME_URL || "/abc/plugin/ueditor/"; 
 
  , serverUrl: URL + "jsp/controller.jsp"（abc表示项目部署跟目录） 
 
  四、修改文件 jsp/config.json（主要是配置图片、文件、视频上传路径等） 
 
  该配置文件上传路径为/upload/notice/image/... 
 
  注意：各个配置的“*UrlPrefix”（回显时自动添加url的前缀）、“*PathFormat"（文件上传路径） 
 
  config.json最后部分，配置文件、图片在线回显路径（只需要配置跟路径，会自动回显根路径下所有路径的文件，此处路径需对照前面文件保存路径处理） 
 
  五、修改jsp/controller.jsp 该文件主要是实现所有请求入口，可在此文件对请求Action进行过滤处理 
 
  <%
    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	String rootPath = application.getRealPath( "/" );
// 	out.write( new ActionEnter( request, rootPath ).exec() );
	String result = new ActionEnter( request, rootPath ).exec();  
	String action = request.getParameter("action");
	//图片、附件在线管理中回显时，格式化回显路径，否则无法正常格式化
	if( action!=null && (action.equals("listfile") || action.equals("listimage"))){  
	    rootPath = rootPath.replace("\\", "/");  
	    result = result.replaceAll(rootPath, "/");  
	}  
	out.write( result ); 
%> 
 
  六、优化图片选择（解决选择图片时很慢问题） 
 
  修改ueditor/ueditor.all.js ueditor/ueditor.all.min.js 
 
  ctrl+f 搜索 accept 
 
  搜到的涉及图片的改为如下： 
 
  accept="image/jpg,image/jpeg,image/gif,image/png,image/bmp" 
 
  七、表情包本地化（解决通过网络获取方式表情包显示异常） 
 
  到官网下载本地表情包： 
 
  http://ueditor.baidu.com/website/download.html#ueditor 
 
  表情文件本地化使用说明： 
 
  （1）images目录下的所有表情文件夹复制到dialogs/emotion/images/文件夹下面 
 
  （2）修改editor_config.js文件，去掉 emotionLocalization 项的注释，值改为true。 
 
  八、解决上传附件有中文名的，下载附件时下载失败问题 
 
  修改tomcat配置文件 /conf/server.xml 
 
   <Connector port="8080" protocol="HTTP/1.1" 
 
   connectionTimeout="20000" 
 
   redirectPort="8443" URIEncoding="UTF-8"/> 
 
  九、自定义上传路径两种方式（时间不够改天再补） 
 
  参考文档: