Ueditor上传图片,ssh和ssm框架下Ueditor整合

首先先说一下可能发生的问题,jar包冲突可能导致上传图片失败,这个是重点,之前初次使用时一直上传不了,查控制台才发现是jar包冲突了因为以前项目里面使用过,使用Ueditor文件夹里面自己的jar包,Ueditor的下载可以自行去官网下载,然后开始是SSH框架下的配置:

SSH框架整合Ueditor:

以下是项目结构ssh和ssm配置都一样:(忽略json文件的报错,因为ueditor json文件里面有注释,所以才会报错,但是没有关系,不会有什么影响,只要设置下忽略就好了)

将里面的jar包放进WEB_INF文件下的lib文件,并保证没有不同版本冲突,每个类型的jar包只能有一个版本

<div><textarea id="container" name="content" style="height: 400px"></textarea></div>
<script type="text/javascript" src="<%=basePath %>ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="<%=basePath %>ueditor/ueditor.all.js"></script>
<script type="text/javascript">	
        var ue = UE.getEditor('container');     
        ue.addListener('ready', function( editor ) {  
             ue.execCommand( 'drafts' );  
        });  
        ue.ready(function() {  
            ue.execCommand( 'drafts' );  
        });  
    </script>
最下面的js的意思是设置本地保存。

然后在开始配置,打开config.json文件,修改上传图片项目路径,将下面用红笔圈的改为自己项目名字

Ueditor文件配置结束,现在开始设置struct2默认过滤器,自己设置过滤器取代struct2默认过滤器,不然Ueditor请求会被拦截。

在web.xml里面将原来的struct2过滤器配置为:(因为我使用的是ssh注解框架,所以还有一些action配置,如果不是注解版的,可以忽略)

 <filter-name>struts2Filter</filter-name>
     <filter-class>org.gzhmu.forum4gy.filter.UEditorFilter</filter-class>
      <init-param>
      <param-name>actionPackages</param-name>
      <param-value>org.gzhmu.forum4gy.action</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>struts2Filter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

所以过滤器里面的内容为:

/**
 * Servlet Filter implementation class UEditorFilter
 */
@WebFilter("/UEditorFilter")
public class UEditorFilter extends StrutsPrepareAndExecuteFilter {

	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {    
        HttpServletRequest request = (HttpServletRequest) req;    
        String url = request.getRequestURI();    
       // System.out.println(url);
        try{    
        	 if (url.contains("/Forum4gy/ueditor/jsp/")) {
        		// System.out.println("使用自定义过滤器"); 
        		 chain.doFilter(req, res);
        		 }else{
        			// System.out.println("使用默认过滤器"); 
        			 super.doFilter(req, res, chain);}
        }catch(Exception e){    
            e.printStackTrace();    
        }    
    }
}

注意写过滤器路径时要注意,最好不要手写,直接从选中文件,右键->properties,复制路径,改一下就行,不然一个字母错了,又得花时间查找错误。到这里,ssh整合ueditor已经成功了,接下是ssm框架整合。

SSM框架整合Ueditor:

在UEditor文件的配置参考上面的配置,主要是springMvc配置,设置一些资源文件不被拦截,在web.xml上加入以下代码:

	<servlet-mapping>
     <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.gif</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.jpg</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.png</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.js</url-pattern>
 </servlet-mapping>
  <servlet-mapping>
     <servlet-name>default</servlet-name>
     <url-pattern>*.bmp</url-pattern>
 </servlet-mapping>
 

这样写聚会导致资源文件路径不能用了,所以删除资源文件路径。如下删除:


把相应的jar包导入lib就可以了,若是不行则检查路径,大部分错误都是因为Ueditor资源被拦截或路径错误,多仔细查看浏览器和eclipse控制台提示信息。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用UEditor上传图片可以参考以下步骤: 1. 在页面中引入UEditorJavaScript和CSS文件,并初始化UEditor编辑器。 ``` <!-- 引入UEditor --> <script type="text/javascript" src="ueditor.config.js"></script> <script type="text/javascript" src="ueditor.all.js"></script> <link rel="stylesheet" type="text/css" href="ueditor.css"> <!-- 初始化编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> ``` 2. 在UEditor配置文件中设置图片上传相关参数。以下是一个示例配置: ``` // ueditor.config.js var URL_UPLOAD_IMAGE = '/upload/image'; // 图片上传接口地址 // 配置UEditor UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return URL_UPLOAD_IMAGE; } else { return this._bkGetActionUrl.call(this, action); } }; ``` 3. 编写服务器端代码,接收并处理上传的图片。以下是一个示例Python Flask代码: ``` from flask import Flask, request, jsonify from werkzeug.utils import secure_filename import os app = Flask(__name__) app.config['UPLOAD_FOLDER'] = 'uploads' # 上传文件保存目录 app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'} # 允许上传的文件类型 # 检查文件扩展名是否允许上传 def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS'] # 处理图片上传请求 @app.route('/upload/image', methods=['POST']) def upload_image(): file = request.files['upfile'] if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return jsonify({'url': 'uploads/' + filename}) else: return jsonify({'error': 'Invalid file type'}) if __name__ == '__main__': app.run(debug=True) ``` 4. 在UEditor中添加图片上传按钮,点击后弹出选择文件对话框。以下是一个示例HTML代码: ``` <!-- 添加图片上传按钮 --> <div id="editor"> <p>在这里输入内容</p> <p><span onclick="editor.execCommand('insertimage')">上传图片</span></p> </div> ``` 以上就是使用UEditor上传图片的基本流程。需要注意的是,上述代码仅作为示例,具体实现可能需要根据项目需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值