editor使用教程 java javaeditorcr怎么用

转载

mob6454cc6b413f 2023-07-20 21:15:36

文章标签 editor使用教程 java java javascript 图片上传 html 文章分类 Java 后端开发

下载ueditor文本编辑器

1.将下载的ueditor编辑器放入你项目的js中

editor使用教程 java javaeditorcr怎么用_editor使用教程 java

2.在你需要使用ueditor文本编辑器的页面引入js

<script type="text/javascript" src="${path}/js/ueditor/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="${path}/js/ueditor/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="${path}/js/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

editor使用教程 java javaeditorcr怎么用_图片上传_02

3.在页面实例化编辑器

<div>
 <form id="person" method="post" action="" enctype="multipart/form-data">
     <div>
        <input id="userinfo" name="userinfo" type="hidden"/>
        <script id="myEditor" type="text/plain" style="width:75%;height:256px;">${user.userinfo}</script>
     </div>
    </form>    
    <div>
        <button id="kh_button"  onclick="save()" class="savebut">保存</button>
</div>
</div>
<script type="text/javascript">
/*实例化编辑器 */
var um = UE.getEditor('myEditor');
</script>

editor使用教程 java javaeditorcr怎么用_javascript_03

4.完整页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ueditor</title>
<script type="text/javascript" src="${path}/js/ueditor/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="${path}/js/ueditor/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="${path}/js/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div>
 <form id="person" method="post" action="" enctype="multipart/form-data">
     <div>
         <input id="userinfo" name="userinfo" type="hidden"/>
         <script id="myEditor" type="text/plain" style="width:75%;height:256px;">${user.userinfo}</script>
     </div>
</form>    
<div>
         <button id="kh_button"  onclick="save()" class="savebut">保存</button>
</div>
</div>
<script type="text/javascript">
    /*实例化编辑器 */
    var um = UE.getEditor('myEditor');
</script>
</body>
</html>

效果图：

editor使用教程 java javaeditorcr怎么用_javascript_04

注意：如果我们需要使用ueditor中的图片上传功能，需要我们自己更改配置

1.图片的访问路径前缀和文件保存时的文件名格式根据自己的需求进行更改

editor使用教程 java javaeditorcr怎么用_java_05

我这里是：imageUrlPrefix”: “”, “imagePathFormat”: “/{time}{rand:6}”,

即：没有设置添加访问前缀，图片上传时保存名称为：时间+六位随机数

2.在页面添加图片上传方法名

<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function(action){
    debugger;
    if (action == 'uploadimage'){
           /* 这里填上我们自己的上传图片的方法名 */
           return '${path}/personal/uploadPic';
    }else{
        return this._bkGetActionUrl.call(this, action);
    }
};

editor使用教程 java javaeditorcr怎么用_java_06

3.在controller中编写上传图片的方法

/**
 * 百度编辑器里上传图片
 * @param req
 * @return
 */
@RequestMapping(value = "/uploadPic", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map<String,Object> save(HttpServletRequest req){
    Map<String,Object> rs = new HashMap<String, Object>();
    MultipartHttpServletRequest mReq  =  null;
    MultipartFile file = null;
    InputStream is = null ;
    String fileName = "";
    // 原始文件名   UEDITOR创建页面元素时的alt和title属性
    String originalFileName = "";
    String filePath = "";
    try {
        mReq = (MultipartHttpServletRequest)req;
        // 从config.json中取得上传文件的ID
        file = mReq.getFile("upfile");
        // 取得文件的原始文件名称
        fileName = file.getOriginalFilename();
        originalFileName = fileName;
        //apache图片资源访问的路径
       /* String path=DeployProperties.getInstance().getProperty("PATH");
        String url=DeployProperties.getInstance().getProperty("APACHE_URL");*/
        String path= "http://localhost:8080/headPic";
        //获取图片文件的后缀名
        String type = fileName.substring(fileName.lastIndexOf("."), fileName.length());
        //保存到服务器上的文件名
        String trueFileName=String.valueOf(System.currentTimeMillis())+type;
        /*//保存到服务器上的地址
        String realPath=path+"/"+trueFileName;
        //保存到服务器上
        file.transferTo(new File(realPath));*/
        //对外访问的路径,
        String picUrl=path+"/"+trueFileName;
        //图片保存到D:\\hqimage目录中，文件名为trueFileNmae
        file.transferTo(new File("D:\\hqimage\\" + trueFileName));
        /*你的处理图片的代码*/
        rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
        rs.put("url","http://localhost:8080/hqpic/"+trueFileName);//能访问到你现在图片的路径
        rs.put("title", originalFileName);
        rs.put("original", originalFileName);                       

    } catch (Exception e) {
        log.error(e.getMessage(),e);
        rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
        rs.put("url","");
        rs.put("title", "");
        rs.put("original", "");
    }
    return rs;
}

注意：这里的headPic是在eclipse中配置的访问图片上传后保存在本地文件的path路径，配置方法详见：

4.现在就可以使用图片上传功能了（单图多图上传都可以使用）

editor使用教程 java javaeditorcr怎么用_java_07