前面使用的是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碰到的问题的更多相关文章

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

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

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  3. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  4. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  5. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  6. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  7. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

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

    ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...

  9. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

随机推荐

  1. javascript 学习总结(七)String对象

    1.string对象中可以传正则的函数介绍 /* match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是 ...

  2. 在Android中自动实现横竖屏切换的问题

    http://developer.android.com/training/basics/supporting-devices/screens.html参照Google推荐的做法 在你项目的res 文 ...

  3. Oracle左连接,右连接

    Oracle左连接,右连接 数据表的连接有: 1.内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制 ...

  4. open打开窗口并且获得打开窗口的窗口对象

    //主窗体 <script language="javascript" type="text/javascript"> function opens ...

  5. Git工作流:中心工作流(翻译)

    使用Git作为版本控制器,有众多可能的工作流(Workflow),这使得我们这些新鸟不知道在实际工作中不知道该选择哪种工作流.这里我们对最常见的Git工作流做一个对比,为企业团队提供一个参考. 正如你 ...

  6. .net winForm 实现类似qq 弹出新闻

    .net winForm 实现类似qq 弹出新闻   一.背景: echong 之前一直用 公司大牛c语言写的一个弹出托管,前几天写东西的时候发现com调用不是那么好使.而手头上写的这个东西又是.ne ...

  7. Binder机制,从Java到C (9. IPC通信过程)

    1.一次IPC通信過程的幾個步驟 一次通信过程简单的说有下面5个步骤,第一眼看上去,肯定不知道什么玩意,多看几遍,慢慢看,其实是能理解的. 1. Client将数据封装成Parcel. (前面已经讲过 ...

  8. Google C++测试框架系列:入门

    Google C++测试框架系列:入门 原始链接:V1_6_Primer 注 GTest或者Google Test: Google的C++测试框架. Test Fixtures: 这个词实在找不到对应 ...

  9. 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. ...

  10. 【Bootstrap】Bootstrap Datepicker使用

    插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...