前面使用的是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. C#用WebClient下载File时操作超时的问题

    原文:C#用WebClient下载File时操作超时的问题 今天很SB,被这个问题卡住了.那段代码也是网上找的.结果发现只能下载一个文件,第二次下载的时候就会出现“操作超时”的问题. 这个是原代码: ...

  2. 学习html5的WebSocket连接

    1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...

  3. javascript 学习总结(九)面向对象编程

    1.面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; ...

  4. 处理动态SQL语句的参数

    原文:处理动态SQL语句的参数 经常对SQL进行开发,写动态的SQL语句,是少之不了的,但是在使用动态语句中,常是因为有动态的参数的出现.参考下面代码示例: 正因为有了标记1的动态条件代码,而让SQL ...

  5. 完整的堆栈JavaScript路(十五)HTML5 focus 扩大 (扩展点)

    HTML5 加入辅助管理 focus 产品特点,  有办法获得焦点文档; 页面加载,用户输入(通常由tab债券).和 调用代码focus()功能. HTML5新的属性和方法,辅助管理的重点: docu ...

  6. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  7. 百度地图SDK for Android v2.1.3全新发布

    2013年8月1日 Android SDK:V2.1.3产品上线 新增: 增加短串分享接口(poiDetailShareURLSearch.poiRGCShareURLSearch) 驾车路线检索增加 ...

  8. REST 测试工具

    两款 REST 测试工具 用CURL命令行测试REST API 无疑是低效率的,这里把最近使用的两款 Chrome 插件总结下 POSTMAN 简单易用 REST Console 功能强大 使用的话用 ...

  9. jquery简单异步读取xml文件

    $.ajax({            url: '../XmlFiles/Sm.xml',            async: true,            cache: false,      ...

  10. .NET 类库研究

    .NET 类库研究必备参考 添加微软企业库源码 前不久,为大家提供了一个.NET 类库参考源码的网站,扣丁格鲁(谐音“coding guru”),使用了段时间,发现一些不方便的地方,特意做了一些更改, ...