ueditor使用中遇到的问题和解决方案

ueditor的是百度推出的一款在线编辑组件,功能很强大。所以引入到工具平台中来,大家可以自己做一些笔记或记录。

1、点击单图片上传按钮无反应:

在ueditor.config.js

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    //console && console.error("***URL***:"+URL);
    /**
     * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径,这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径 "http://localhost:8080" +
        ,serverUrl: URL + "jsp/controller.jsp" 

在jsp页面中增加一句定义UEDITOR_HOME_URL

<script type="text/javascript">
  window.UEDITOR_HOME_URL = "/BBC-KIT/assets/js/ueditor/";  //使得serverUrl是指向controller.jsp的路径</script>

2、选择图片后,编辑框中显示一直在加载,使用chrome开发工具检查,有报错:

Uncaught ReferenceError: errorHandler is not defined

检查ueditor.config.json中配置少了一个逗号

{

"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "http://localhost:8080/BBC-KIT",
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/*自己调整过路径,这里少了一个逗号*/

"scrawlActionName": "uploadscrawl",
......
}

3、自定义上传图片路径,报400(bad request)

按ueditor得文档自定义路径重写了getActionUrl 。其中uploadArticleImage.do是自己写得图片上传请求

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
         UE.Editor.prototype.getActionUrl = function(action) {
             if (action == ‘uploadimage‘ || action == ‘uploadscrawl‘ || action == ‘uploadimage‘) {
                 return ‘opt/uploadArticleImage.do‘;
             } else if (action == ‘uploadvideo‘) {
                 return ‘uploadVideo.do‘;
             } else if (action == ‘uploadfile‘) {
                 return ‘uploadFile.do‘;
             } else {
                 return this._bkGetActionUrl.call(this, action);
             }
         }

但选择图片后,ueditor做实时上传,报错经确认是upfile没有获取到。这个对象是在ueditor.config.json中配置的。检查没有问题。

最终确认需要在spring-mvc.xml中补一段上传文件类型设置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
    </bean>
时间: 2024-10-05 04:45:15

ueditor使用中遇到的问题和解决方案的相关文章

ueditor百度富文本编辑器使用解决方案

写网站的时候都是用asp.net2.0写的 但是看了百度的富文本编辑器使用说明都是.net framework 4.0 版本的 百度了半天看的各种的解决方案 我把最新版本的百度富文本编辑器下载下来 改了.sln 文件信息 可以用vs2008打开 当然会报一些错误 ..类名不存在等等 百度了半天还是没解决问题后来放弃了.(最终还是用了百度的) 于是就找了kindeditor但是觉得他长得有点丑..还是放弃了 又接着百度ueditor配置方法看到了一篇博文 http://blog.sina.com.

ueditor使用中的坑

项目中要使用富文本编辑于是采用了百度的开源富文本编辑器 ueditor    官网 http://ueditor.baidu.com/website/ 使用方法就按照官方的来的. 经过使用记录以下要点: 1.config文件要在 umeditor.min.js之前加载 就是位置靠前 2.mini版本中的Uploader生成方式在vs 2010中设为 内容 否则一直提示同时位于C盘xx...等

Html map 实际使用中遇到的问题及解决方案

前言:百度了一下html map,嗯嗯,介绍的挺详细的,如果是初学者,直接看他们的教程,挺好的,就不用我再多说了. 不过我发现一个问题,就是都是介绍map有什么属性怎么用的,这明显就是照搬文档自己再改一下嘛,难道你们在使用中没遇到什么特别的需求或者什么问题?怎么不写出来? 所以我就不介绍map了,直接说遇到的问题. 问题一:如果图片原始尺寸是900px,但是你展示的尺寸是450px,那map就定位不准了,怎么破? 问题二:如果一个页面有多张图片需要map,怎么做? 一.素材图片: 1.这是一张9

spring 持久层框架的使用中遇到的一些问题解决方案汇总

1.解决Mybatis有查询结果,但存不进实体类的问题(通用Mapper也是一样的) 原文地址:https://www.cnblogs.com/lkc9/p/11737304.html

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

北京赛车平台出租度富文本编辑器UEditor的改造

在Java项目中,做内容管理功能时,需要用到富文本编辑器北京赛车平台出租(www.1159880099.com)QQ1159880099,目前流行的富文本编辑器还是比较多的,因为项目中用的是百度的UEditor,所以对UEditor使用中的一些问题做个总结吧. 因为是Java项目所以使用的是只能选择jsp版本的UEditor,使用方式还是比较简单的,按照UEditor官方的文档来就好了. 首先说下踩过的坑,我项目一开始是用的war部署的方式,大家都知道war部署时是会解压到tomcat的weba

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

Windows 常见错误总结

本篇主要记录Windows 系统使用中存在的问题和解决方案,会保持持续更新...(若你们遇到的问题或有更好的解决方法,还望在评论区留言,谢谢) 1.win10 unable to save C:\windows\system32\drivers\etc\hosts error:拒绝访问 (权限问题) 解决方案:https://blog.csdn.net/jianglianye21/article/details/79757935 原文地址:https://www.cnblogs.com/zwes

百度ueditor 实例化 Cannot set property &#39;innerHTML&#39; of null 完美解决方案

此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中. 1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并