使用百度富文本编辑器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应该就配置好了,至少上传图片这一块没有问题了。
使用百度富文本编辑器UEditor碰到的问题的更多相关文章
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
- Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
随机推荐
- javascript 学习总结(七)String对象
1.string对象中可以传正则的函数介绍 /* match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是 ...
- 在Android中自动实现横竖屏切换的问题
http://developer.android.com/training/basics/supporting-devices/screens.html参照Google推荐的做法 在你项目的res 文 ...
- Oracle左连接,右连接
Oracle左连接,右连接 数据表的连接有: 1.内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制 ...
- open打开窗口并且获得打开窗口的窗口对象
//主窗体 <script language="javascript" type="text/javascript"> function opens ...
- Git工作流:中心工作流(翻译)
使用Git作为版本控制器,有众多可能的工作流(Workflow),这使得我们这些新鸟不知道在实际工作中不知道该选择哪种工作流.这里我们对最常见的Git工作流做一个对比,为企业团队提供一个参考. 正如你 ...
- .net winForm 实现类似qq 弹出新闻
.net winForm 实现类似qq 弹出新闻 一.背景: echong 之前一直用 公司大牛c语言写的一个弹出托管,前几天写东西的时候发现com调用不是那么好使.而手头上写的这个东西又是.ne ...
- Binder机制,从Java到C (9. IPC通信过程)
1.一次IPC通信過程的幾個步驟 一次通信过程简单的说有下面5个步骤,第一眼看上去,肯定不知道什么玩意,多看几遍,慢慢看,其实是能理解的. 1. Client将数据封装成Parcel. (前面已经讲过 ...
- Google C++测试框架系列:入门
Google C++测试框架系列:入门 原始链接:V1_6_Primer 注 GTest或者Google Test: Google的C++测试框架. Test Fixtures: 这个词实在找不到对应 ...
- lnmp1.0 升级php.5.4.28 后出错 Nginx 502 Bad Gateway
碰到一个很奇怪的问题,用lnmp自带的./upgrade_php.sh升级 php5.4.27正常.但升级到php5.4.28就出错,访问p.php 提示:Nginx 502 Bad Gateway. ...
- 【Bootstrap】Bootstrap Datepicker使用
插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...