富文本编辑器——百度UEditor插件安装教程

一、使用环境

  • Win7
  • Eclipse
  • jettty9
  • chrome

二、下载百度UEditor插件

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

2、这里下载的版本是[1.4.3.3 Jsp版本]

这里写图片描述

3、将下载好的文件包放在工程目录中

这里写图片描述

4、修改ueditor/ueditor.config.js 里的务器统一请求接口路径

这里写图片描述

注:这个请求路径是请求服务器得到配置信息,所以需要在服务器中配置这个配置信息

5、编写配置信息代码

Ueditor 官方例子是直接返回一个json文件,此处为了方便直接返回一个json对象

    @RequestMapping(value = "config")
    @ResponseBody
    public JSONObject config(String action, @RequestParam(required = false) String callback, @RequestParam(required = false) String encode,
            HttpServletRequest request) throws Exception {
        JSONObject jsonObject = new JSONObject();
        jsonObject = getConfig();
        // action参数为getConfig中的jsonObject.put("imageActionName", "uploadimage");
        if (action.equals("uploadimage")) {
            // 此处返回上传后的图片路径,json格式为{["url":"http://xinrui.com/image/1.png","state":"SUCCESS"]}
            jsonObject = imgcompressService.ueEditorUpload(request);
        }
        return jsonObject;
    }

    public JSONObject getConfig() {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("imageActionName", "uploadimage"); // 执行上传图片的action名称
        jsonObject.put("imageAllowFiles", new String[] { ".png", ".jpg", ".jpeg", ".gif", ".bmp" }); // 允许上传的图片类型
        jsonObject.put("imageFieldName", "upfile"); // 提交的图片表单名称
        jsonObject.put("imageMaxSize", "2048000"); // 上传大小限制,单位B
        jsonObject.put("imageCompressEnable", true); // 是否压缩图片,默认是true
        jsonObject.put("imageCompressBorder", 1600); // 图片压缩最长边限制
        jsonObject.put("imageInsertAlign", "none"); // 插入的图片浮动方式
        jsonObject.put("imageUrlPrefix", "http://xinrui.com/image/"); // 图片访问路径前缀
        jsonObject.put("imagePathFormat", "/{yyyy}{mm}{dd}/{time}{rand:6}"); // 上传保存路径,可以自定义保存路径和文件名格式
        return jsonObject;
    }

6、前端调用

(1)在相应页面引入js

   <script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" src="plugin/ueditor/ueditor.all.min.js"></script>
  <div class="form-group">
        <label class="col-sm-1 control-label">富文本描述:</label>
         <div class="col-md-9">
             <script id="container" type="text/plain"></script>
         </div>
  </div>

(2) js调用

<script>
     makeUeEditor('container');
     function makeUeEditor (id) {
          UE.delEditor(id);
          var ue = UE.getEditor(id, {
            autoHeight: false,
            wordCount: false,
           });
             return ue;
          },
     function setUeEditor (id, data) {  // 填充富文本
          var ue = UE.getEditor(id);
          ue.addListener("ready", function () {
             ue.setContent(data);
          });
      },
</script>

7、至此,已经可以使用简单的UEditor功能了,但是还要编写图片上传的处理代码

两只橙 CSDN认证博客专家 TensorFlow NLP 神经网络
全球AI挑战赛百强选手,曾任职于腾讯微信事业部,魅族flyme事业部,现任中国平安AI研发工程师。《深度学习500问》作译者,CSDN博客专家及签约讲师,指弹吉他爱好者,简书专栏作家。
在本地调试正常。上传到服务器后,浏览器控制台报错:后台配置项返回格式出错,上传功能将不能正常使用! ![图片说明](https://img-ask.csdn.net/upload/201705/01/1493628846_280248.png) ![图片说明](https://img-ask.csdn.net/upload/201705/01/1493628902_827771.png) 打开ueditor.all.js 8094行:var config = isJsonp ? r:eval("("+r.responseText+")"); 这句抛出异常。 打印isJsonp为false; 再打印r.responseText; 本地打印出: {"videoMaxSize":102400000,"videoActionName":"uploadvideo","fileActionName":"uploadfile","fileManagerListPath":"/upload/file/","imageCompressBorder":1600,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerListPath":"/upload/image/","fileMaxSize":51200000,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"fileManagerActionName":"listfile","snapscreenInsertAlign":"none","scrawlActionName":"uploadscrawl","videoFieldName":"upfile","imageCompressEnable":true,"videoUrlPrefix":"/MulinArticle","fileManagerUrlPrefix":"/MulinArticle","catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerActionName":"listimage","snapscreenPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"imageInsertAlign":"none","catcherPathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","catcherMaxSize":2048000,"snapscreenUrlPrefix":"/MulinArticle","imagePathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerUrlPrefix":"/MulinArticle","scrawlUrlPrefix":"/MulinArticle","scrawlFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenActionName":"uploadimage","catcherActionName":"catchimage","fileFieldName":"upfile","fileUrlPrefix":"/MulinArticle","imageManagerInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"filePathFormat":"/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","videoPathFormat":"/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","fileManagerListSize":20,"imageActionName":"uploadimage","imageFieldName":"upfile","imageUrlPrefix":"/MulinArticle","scrawlInsertAlign":"none","fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"catcherUrlPrefix":"/MulinArticle","imageManagerListSize":20,"catcherFieldName":"source","videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"]} 服务器打印出: <%@ page language="java" contentType="text/html; charset=UTF-8" import="com.baidu.ueditor.ActionEnter" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% request.setCharacterEncoding( "utf-8" ); response.setHeader("Content-Type" , "text/html"); String rootPath = application.getRealPath( "/" ); out.write( new ActionEnter( request, rootPath ).exec() ); %> 不知为何是这样的结果,有没有大神遇到过类似的问题?
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 59.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值