使用百度富文本编辑器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应该就配置好了，至少上传图片这一块没有问题了。

转载于:https://www.cnblogs.com/ytpblog/p/5417817.html

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

百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）
前端安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...
百度富文本编辑器ueditor插入html代码
记录工作中遇到的问题需求: 文本编辑器左侧展示模板,点击左侧模板将模板展示到富文本编辑器内. 代码: // 点击模板时添加到编辑器内 $(".templates-con ul li&qu ...

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

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

最新文章

热门文章