javaweb使用百度编辑器

之前看了很多人写的文章，感觉并无卵用，还误入歧途，其实还是自己慢慢摸索，所有这里准备写一篇，希望有所帮助

先看一下完整dome吧

dome下载地址：https://download.csdn.net/download/hexu_blog/11560623

下面要说的就是功能实现以及各种注意问题了

1.将下载的百度编辑器解压放到自己的web项目下，比如我的

2.引入js和css

3.引入百度编辑器，开始初始化

<script id="editor" type="text/plain" style="width:660px;height:200px;"></script>

初始化js代码

<script type="text/javascript">
        $(function(){
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor');

            UE.Editor.prototype._bkGetActionUrl ? "" : UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
            UE.Editor.prototype.getActionUrl = function(action) {
                //这里很重要，很重要 ,要和配置中的imageActionName值一样
                if (action == 'UeUploadController'){
                  注意：  //这里调用后端我们写的图片上传接口
                    return '${pageContext.request.contextPath }/admin/uploadImage';
                }else{
                    return this._bkGetActionUrl.call(this, action);
                  }
            }
        })
</script>

4.配置config.json文件，不然你访问不了上传的图片

imageActionName": "UeUploadController", /* 执行上传图片的action名称 */这里一定要对，不然无法上传图片

"imageFieldName": "upfile", /* 提交的图片表单名称 */

比如我的图片访问路径是linux远程服务器的,地址就是http://148.70.164.213/yby/img_server/，这个地址是nginx映射的

也就是直接映射到linux下/root/yby-img-file文件夹下找到图片：比如http://148.70.164.213/yby/img_server/1.jpg

就会自动到/root/yby-img-file文件夹下找到1.jpg，如果不太清除的先去学习一下nginx映射静态资源文件

地址解释：server{
            listen  80;#监听18081端口，可以改成其他端口
            server_name  148.70.164.213;#当前服务的域名
              location / {    
                  alias /root/jojo-shop-server/dlf_web/html/;
                  autoindex on; 
              }
              location /res/ {    
                  alias /root/jojo-shop-server/dlf_web/res/;
                  autoindex on; 
              }
              location /yby/img_server/ {    
                  alias /root/yby-img-file/;#指定图片存放路径
              }
       }

 

6.上传图片，我这里是上传到远程服务器,这段代码直接拿过去就可以用的

引入需要的远程连接jar包，我这里使用maven


        <!-- jsch 所依赖的jar包 -->
        <dependency>
            <groupId>com.jcraft</groupId>
            <artifactId>jsch</artifactId>
            <version>0.1.51</version>
        </dependency>
        <dependency>
            <groupId>com.jcraft</groupId>
            <artifactId>jzlib</artifactId>
            <version>1.0.7</version>
        </dependency>

import java.io.File;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

@Controller
public class UeUploadController {   //这里上上面说的要一致
     /**
     * 百度编辑器里上传图片
     * @param req
     * @return
     */
    @ResponseBody
    @RequestMapping("admin/uploadImage")
    public Map<String,String> uploadImage(@RequestParam("upfile")  CommonsMultipartFile upfile,HttpServletRequest request,Model model) throws Exception{ 
        FileItem item = upfile.getFileItem();
        //文件路径
        String pathFileName = item.getName();
        //字节数
        long l = item.getSize();
        String fileSize = Long.toString(l);
        //文件名
        int start = pathFileName.lastIndexOf("\\");
        String fileName = pathFileName.substring(start + 1);
        //后缀 .jpg
        int indexName = fileName.lastIndexOf('.');
        String subName = fileName.substring(indexName);
        //新文件名
        String nowName = new SimpleDateFormat("yyMMddHHmmss").format(new Date()) +"_"+ fileName;
            
        DiskFileItem fileItem = (DiskFileItem) upfile.getFileItem();
        InputStream inputStream = fileItem.getInputStream();
        FtpClientUtils.listFileNames(inputStream, nowName);  //这里是自己封装的方法 ，内容继续往下
        
        Map<String,String> map = new HashMap<String,String >();
        //文件原名称 
        map.put("title", nowName);
        //现在文件名称
        map.put("original", fileName);
        //文件大小（字节数）
        map.put("size", fileSize);
        //是否上传成功
        map.put("state", "SUCCESS");
        //文件类型 .+后缀名
        map.put("type", subName);
        //文件路径
        map.put("url", nowName);
        return map;
        
    }
}

package com.shop.tools;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;

import com.jcraft.jsch.Channel;
import com.jcraft.jsch.ChannelSftp;
import com.jcraft.jsch.JSch;
import com.jcraft.jsch.Session;

/**
 * 上传图片到远程服务器
 * @author Administrator
 *
 */
public class FtpClientUtils {
    /**
     * FTP相关信息
     */
    public static String url = "";//远程服务器ip
    public static int port = 22;//远程服务器端口
    public static String username = "root";//远程服务器用户名
    public static String password = "";远程服务器密码
    /** 静态上传文件的路径*/
    public static String UPLOAD_PATH="/root/yby-img-file/";  //这里就是上面获取图片的路径
    public static List<String> listFileNames(InputStream inputstream,String fileName) {
        List<String> list = new ArrayList<String>();
        ChannelSftp sftp = null;
        Channel channel = null;
        Session sshSession = null;
        try {
            JSch jsch = new JSch();
            jsch.getSession(username, url, port);
            sshSession = jsch.getSession(username, url, port);
            sshSession.setPassword(password);
            Properties sshConfig = new Properties();
            sshConfig.put("StrictHostKeyChecking", "no");
            sshSession.setConfig(sshConfig);
            sshSession.connect();
            channel = sshSession.openChannel("sftp");
            channel.connect();
            System.out.println("连接远程服务器成功");
            sftp = (ChannelSftp)channel;
            sftp.cd(UPLOAD_PATH);
            sftp.put(inputstream, fileName);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            closeChannel(sftp);
            closeChannel(channel);
            closeSession(sshSession);
        }
        return list;
    }

    private static void closeChannel(Channel channel) {
        if (channel != null) {
            if (channel.isConnected()) {
                channel.disconnect();
            }
        }
    }

    private static void closeSession(Session session) {
        if (session != null) {
            if (session.isConnected()) {
                session.disconnect();
            }
        }
    }

    public static void main(String[] args) {
        
    }
}

 

最后实现功能