百度富文本编辑器使用小结

素颜马尾好姑娘i 2022-05-18 02:07 238阅读 0赞

转自：[https://blog.csdn.net/ck3345143/article/details/52231540][https_blog.csdn.net_ck3345143_article_details_52231540]

1.ueditor 官方地址：[http://ueditor.baidu.com/website/index.html][http_ueditor.baidu.com_website_index.html]

开发文档地址：[http://ueditor.baidu.com/website/document.html][http_ueditor.baidu.com_website_document.html]

下载地址：[http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html] （这里可选开发版，或MINI版

2. **从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：**

\_examples：编辑器完整版的示例页面

dialogs：弹出对话框对应的资源和JS文件

themes：样式图片和样式文件   php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择php

third-party：第三方插件(包括代码高亮，源码编辑等组件）

editor\_all.js：\_src目录下所有文件的打包文件（用于发布版本）

editor\_api.js: API接口配置文件（开发版本）

editor\_all\_min.js：editor\_all.js文件的压缩版，建议在正式部署时才采用

editor\_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

3.**编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下**：

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

4.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器，示例代码如下：

html:

javascript:

<script type="text/javascript">
    
    var URL = getRootPath();
    
    
    
    var ue = UE.getEditor('projectBasis', {
    
    //为编辑器实例添加一个路径，这个不能被注释
    
    UEDITOR_HOME_URL: URL + '/styles/ueditor/',
    
    // 服务器统一请求接口路径
    
    serverUrl: '<%=basePath%>/styles/ueditor/jsp/controller.jsp',
    
    //这里可以选择自己需要的工具按钮名称
    
    toolbars:[[
    
    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    
    'Undo', 'Redo','Bold','test', 'simpleupload', 'insertimage','|',
    
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
    
    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow'
    
    ]],
    
    //focus时自动清空初始化时的内容
    
    autoClearinitialprojectBasis:true,
    
    //关闭字数统计
    
    //wordCount:false,
    
    maximumWords:8000, //允许的最大字符数
    
    //关闭elementPath 元素路径
    
    elementPathEnabled:false,
    
    //默认的编辑区域高度
    
    initialFrameHeight:300,
    
    initialFrameWidth:1000 //初始化编辑器宽度,默认1000
    
    });
    
    
    
    //自定义请求地址
    
    
    
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    
    UE.Editor.prototype.getActionUrl = function(action) {
    
    if (action == 'uploadimage' || action == 'uploadimage') {
    
    return '<%=basePath%>/management/project/projectApplication/upload/img';
    
    } else {
    
    return this._bkGetActionUrl.call(this, action);
    
    }
    
    }
    
    
    
    /**
    
    * js获取项目根路径，如： http://localhost:8083/project
    
    */
    
    function getRootPath(){
    
    //获取当前网址，如： http://localhost:8083/project/share/meun.jsp
    
    var curWwwPath=window.document.location.href;
    
    
    
    //获取主机地址之后的目录，如： project/share/meun.jsp
    
    var pathName=window.document.location.pathname;
    
    
    
    var pos=curWwwPath.indexOf(pathName);
    
    
    
    //获取主机地址，如： http://localhost:8083
    
    var localhostPaht=curWwwPath.substring(0,pos);
    
    
    
    //获取带"/"的项目名，如：/project
    
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    
    
    
    //return localhostPaht + projectName;
    
    return localhostPaht + projectName;
    
    }
    
    
    
    </script>

**需要的jar包**：

ueditor/jsp/controller.jsp做一下修改，以便【在线管理】功能才能显示图片处理。

在实例化是已经自定义

//为编辑器实例添加一个路径，这个不能被注释

// UEDITOR\_HOME\_URL: URL

// 服务器统一请求接口路径

//, serverUrl: URL + "jsp/controller.jsp"

所以这边要注释掉。

**然后就到后台action了：**

/**
    
    * 图片上传
    
    * @author CK
    
    * @param upfile
    
    * @param request
    
    * @param response
    
    * @return
    
    * @throws Exception
    
    *
    
    */
    
    @RequestMapping("/upload/img")
    
    @ResponseBody
    
    public String upload(@RequestParam("upfile") MultipartFile upfile,HttpServletRequest request, HttpServletResponse response) throws Exception {
    
    request.setCharacterEncoding("utf-8");
    
    response.setCharacterEncoding("utf-8");
    
    String result = null;
    
    String originalName = upfile.getOriginalFilename();//返回客户端文件的原始名称，eg:atv1.png
    
    
    
    String imgFileSuffix = "";//图像文件的后缀
    
    String mimeType = upfile.getContentType();
    
    String supportedFormatTable[][] = {
    
    {"image/png", ".png"},
    
    {"image/bmp", ".bmp"},
    
    {"image/jpg", ".jpg"},
    
    {"image/gif", ".gif"},
    
    {"image/jpeg", ".jpg"}
    
    };
    
    
    
    for (int i = 0; i < supportedFormatTable.length; ++i) {
    
    if (supportedFormatTable[i][0].equals(mimeType)) {
    
    imgFileSuffix = supportedFormatTable[i][1];
    
    break;
    
    }
    
    }
    
    
    
    //文件的前缀，eg:201503271453000025
    
    String imgFilePrefix = new SimpleDateFormat("yyyyMMddHHmmssssss").format(Calendar.getInstance().getTime());
    
    String newImgFileName = imgFilePrefix + imgFileSuffix;
    
    
    
    String uploadPath = request.getSession().getServletContext().getRealPath("upload") + "/image";
    
    
    
    // 拼装uuid
    
    String uuid = "img_" + imgFilePrefix;
    
    
    
    //删除已存在的文件
    
    File uploadedFile1 = new File(uploadPath, newImgFileName);
    
    
    
    if (uploadedFile1.exists()) {
    
    uploadedFile1.delete();
    
    }
    
    
    
    //保存到数据库以及保存到相应的目录文件里
    
    Resource oldResource = resourceService.get(uuid);
    
    
    
    if (oldResource != null) {
    
    File uploadedFile = new File(uploadPath, newImgFileName);
    
    org.apache.commons.io.FileUtils.writeByteArrayToFile(uploadedFile, upfile.getBytes());
    
    oldResource.setName(upfile.getOriginalFilename());
    
    oldResource.setFileSize(FileUtils.getHumanReadableFileSize(upfile.getSize()));
    
    oldResource.setUploadTime(new Date());
    
    oldResource.setUuid(uuid);
    
    oldResource.setStoreType(StoreType.IMAGE);
    
    resourceService.update(oldResource);
    
    } else {
    
    File uploadedFile = new File(uploadPath, newImgFileName);
    
    org.apache.commons.io.FileUtils.writeByteArrayToFile(uploadedFile, upfile.getBytes());
    
    Resource resource = new Resource();
    
    resource.setName(newImgFileName);
    
    resource.setFileSize(FileUtils.getHumanReadableFileSize(upfile.getSize()));
    
    resource.setUploadTime(new Date());
    
    resource.setUuid(uuid);
    
    resource.setStoreType(StoreType.IMAGE);
    
    resourceService.save(resource);
    
    }
    
    
    
    String projectUrl = "http://" + request.getServerName() //服务器地址
    
    + ":"
    
    + request.getServerPort() //端口号
    
    + request.getContextPath(); //项目名称
    
    
    
    //{"name":"10571402926855858.jpg", "originalName": "china.jpg", "size": 43086, "state": "SUCCESS", "type": ".jpg", "url": "upload/20140616/10571402926855858.jpg"}
    
    // result返回的url参照IndexController._file方法
    
    
    
    result = "{\"name\":\""+ newImgFileName +"\", \"originalName\": \""+ originalName +"\", \"size\": "+ upfile.getSize() +", \"state\": \"SUCCESS\", \"type\": \""+FileUtils.getFileExt(originalName)+"\", \"url\": \"" + projectUrl + "/upload/image/" + newImgFileName +"\"}";
    
    result = result.replaceAll( "\\\\", "\\\\" );
    
    return result;
    
    }

需要返回的格式：

{
    
    "name": "201608171525000017.png",
    
    "originalName": "check-radio.png",
    
    "size": 4572,
    
    "state": "SUCCESS",
    
    "type": "png",
    
    "url": "http://localhost:8080/project/upload/image/201608171525000017.png"
    
    }

[https_blog.csdn.net_ck3345143_article_details_52231540]: https://blog.csdn.net/ck3345143/article/details/52231540
[http_ueditor.baidu.com_website_index.html]: http://ueditor.baidu.com/website/index.html
[http_ueditor.baidu.com_website_document.html]: http://ueditor.baidu.com/website/document.html
[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html