使用百度富文本编辑器UEditor碰到的问题

前面使用的是kindEditor,但是发现这个已经不再维护,并且bug不少,而我又不会改,哈哈,所以我就放弃了。

原来想过要用百度的这个UEditor,但是在配置的时候遇到了很多问题,基本上加载不出来,但是最后还是硬着头皮把那些bug都解决了,顺利跑通。

问题1:按百度Demo的配置我发现连最基本的编辑器都不出来。

原因:下面的配置的顺序不能错,顺序错了可能会导致加载不出来的情况。

<!-- 配置文件 -->
<script type="text/javascript" src="/common/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/common/ueditor/ueditor.all.js"></script>

下面是我的配置

<!-- 实例化编辑器 -->
<script type="text/javascript">
    UEDITOR_CONFIG.UEDITOR_HOME_URL = ‘/common/ueditor/‘; //一定要用这句话,否则你需要去ueditor.config.js修改路径的配置信息
    var ue = UE.getEditor(‘container‘,{
        toolbars: [
            [‘fullscreen‘, ‘source‘, ‘undo‘, ‘redo‘, ‘|‘, ‘fontsize‘, ‘|‘, ‘blockquote‘, ‘horizontal‘, ‘|‘, ‘removeformat‘, ‘formatmatch‘, ‘link‘, ‘unlink‘, ‘}‘, ‘simpleupload‘, ‘insertimage‘, ‘preview‘],
            [‘bold‘, ‘italic‘, ‘underline‘, ‘forecolor‘, ‘backcolor‘, ‘|‘, ‘indent‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyjustify‘, ‘|‘,
                ‘rowspacingtop‘, ‘rowspacingbottom‘, ‘lineheight‘, ‘|‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘|‘, ‘imagenone‘, ‘imageleft‘, ‘imageright‘, ‘imagecenter‘]
        ]
        ,autoHeightEnabled: false
        ,autoFloatEnabled: true
        ,initialFrameWidth : 1000//编辑器宽度,默认1000
        ,initialFrameHeight : 500//编辑器高度,默认320
        ,maximumWords : 1000//最大字符数
    });
</script>

问题2:上传图片功能加载失败

  我使用的是springmvc idea

总的原因:编辑器初始化的时候会发送一个请求,去请求ueditor/jsp/controller.jsp文件,但是它报了500错误,不能正确的返回json配置。

原因1:jar包没有导入到项目中。

解决:在ueditor/jsp/lib下面有几个jar文件,需要把这几个jar文件导入到项目中,最好是直接复制到WEB-INF/lib下面,不然可能也会出现问题。 

问题又来了,我使用的是maven管理项目的,这个ueditor-1.1.2.jar在中央仓库里面没有,需要自己手动添加到本地仓库中

ueditor/jsp/lib目录下打开命令窗口,运行下面代码

mvn install:install-file -Dfile=ueditor-1.1.2.jar -Dpackaging=jar -DgroupId=com.baidu.ueditor -DartifactId=ueditor -Dversion=1.1.2

原因2:ueditor/jsp/controller.jsp文件里面会有错误。

解决:1、里面 <%@ page trimDirectiveWhitespaces="true" %> 这句报错,我直接注释了,百度了一下,这个应该是用来jsp输出html时去除多余的空行的。注释影响不大。

  2、里面write方法提示不能处理String类型的变量,这个我想是springmvc的原因,因为我发现我使用springmvc的时候所有的内置对象都没有使用struts2的时候不一样了,这个还不知道为什么会这样。

out.write( new ActionEnter( request, rootPath ).exec() );

改成了

response.getWriter().write( new ActionEnter( request, rootPath ).exec() );

这些都配置好,这个UEditor应该就配置好了,至少上传图片这一块没有问题了。

时间: 2024-10-30 17:16:34

使用百度富文本编辑器UEditor碰到的问题的相关文章

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

Jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的controller) 后台添加该路由指定的controller package com.sandu.mega.admin.ueditor; import com.jfinal.aop.Clear; import com.jfinal.core.Controller; import com.jfinal.kit.Ret; import com.jfinal.upload.UploadFile; im

百度富文本编辑器ueditor添加到pom

<!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> <scope>system</scope> <systemPath>${project.basedir}/src/main/webap

百度富文本编辑器ueditor/jsp版的简单使用,可上传图片和附件

~~经过一上午的时间,终于把ueditor编辑器搞出来了,仅做记录 #完成的样子 1,首先在官网下载对应的插件 [附下载地址:http://ueditor.baidu.com/website/download.html]    本人使用的是Java语言 ,框架是ssm+maven 2,解压文件,在自己项目的根目录下新建文件夹 ueditor,把utf8-jsp中文件复制粘贴到ueditor文件夹下 3,新建一个ueditorTest.jsp,把文件夹中index.html中的HTML代码复制粘贴

百度富文本编辑器UEDITOR

前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包. 配置: 1.将开发包放到mvc4项目中,在我的项目中我放到了Content目录下 2.在模板页中引入js和样式文件: 3.在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/website/document.html 下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版) 2. 从官网上下载完整源码包,解压

解决百度富文本编辑器 UEditor 插入视频后没有路径的问题

在 Update ueditor.config.js 文件中,xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url)_src/plugins/video.js里处理的是_url,而不是_src. 修改ueditor.config.js: img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-

百度富文本编辑器UEditor自定义上传图片接口

如下图:  然后修改ueditor.all.js 

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG