Ueditor1.4.3.3 富文本编辑器在图片不显示问题

  最近在项目中碰倒一个需求,需要一个富文本来编辑一个一篇报告,于是乎百度了一下找到一个百度的 ueditor  富文本编辑器,由于帮助文档相比而言比较容易看懂,所以就选用了这个,但是也遇到了一些问题

  好了  不废话  直接上代码: 此项目是javaEE  项目

  首先在  官网下载  所需的文件   http://ueditor.baidu.com/website/download.html     依个人项目而定

  将项目下载下来的文件解压放入webconte 目录下:

  

    接下来看 JSP代码:初始化,引入相关JS  与  CSS  ,代码如下

    

      

       OK搞定这里,按照文档来讲,接下来配置ueditor  的两个文件  ueditor.config.js  ,config.json

       关于这两个文件 我这里只讲图片路径配置的问题

        在 ueditor.config.js   中

        

            这个URL一定要对应你项目中ueditor  文件夹的路径, 最好为相对路径,配置好了   此时访问将不会出现此问题

            OK,接下来上传图片,上传之后可能会出现下面效果,就是这个图已经上传到了本地但是没法显示

            

          这个原因就是要配置另一个 文件了    打开  config.json  文件

          

          这个就是你图片的访问路径,   上面这样配置   出来的路径为  http://localhost:8080/trade//ueditor/jsp/upload/image/20170712/1499828717927026044.jpg

          完成了这两步基本上就是OK,

          但是公司这项目限制了浏览器为IE ,   在插入图片时候 直接报错     不支持  "indexoOf "对象 属性或方法   ,特么百度了好久  ,原来是IE不支持这个方法,  ueditor  也没做兼容,无奈之下

只能修改源代码,  F12  点到 JS报错地方,  找到源文件   ,直接修改

            

        完了之后 问题得到解决。  最后在说一个值得注意的地方   :

在SSH项目中,struct2 core libraries中的jar包可能与ueditor中使用的jar包相冲突。

例如,对于上传文件最重要的common-io.jar和common-fileupload.jar,在struct2核心库中,版本为1.3.2和1.2.1,而ueditor 1.4.4要求的版本为1.3.1和2.4,部署后由于优先使用struc2核心库jar包而造成上传失败。

            

             

      

  

      

时间: 2024-07-31 06:37:43

Ueditor1.4.3.3 富文本编辑器在图片不显示问题的相关文章

UEditor富文本编辑器的图片上传 http://fex.baidu.com/ueditor/#server-deploy

http://fex.baidu.com/ueditor/#server-deploy http://fex.baidu.com/ueditor/#server-path 首先 editor配置文件中 ueditor.config.js 的请求借口路径为 (即服务器所在) // 服务器统一请求接口路径 , serverUrl: URL + "net/controller.ashx" 然后 net下面的 config.json中的 "imageUrlPrefix":

商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: 1 create table TEST.GOODS_TABLE 2 ( 3 gid NUMBER not null, 4 gname VARCHAR2(90), 5 gdetails CLOB, 6 gpicture VARCHAR2(100), 7 gprice NUMBER, 8 gleixing NUMBER, 9 gpi

springMVC -- 整合UEditor(富文本编辑器)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 1.编写controller 如下(该接口是ueditor前后台交互的统一路径) : package com.test.dcdp.controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet

springMVC -- 对接UEditor(富文本编辑器)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方式是直接修改源码,步骤如下: 1.编写controller 如下(该接口是ueditor前后台交互的统一路径) : package com.test.dcdp.controller; import java.io.IOException; import java.io.PrintWriter; im

百度富文本编辑器UEditor1.3上传图片附件等

今天一直在整我的一个项目的编辑器上传图片,我用的是百度UEditor 1.3版本的:现在已经有了1.4的了,不过还算比较新吧,但是官网上面没有上传图片这些的教程,而网上对于这方面的资料很少啊,折腾了我半天,看了一些以前版本的上传图片的问题,最后终于搞定了. 先说说我的这个项目的配置情况吧 用的是SSH框架:struts2.3.16 spring3.2.5 hibernate3.3.2 ueditor 1.3-utf-8-jsp版 jdk 1.7 开发工具用的是myeclipse10.7 直接把项

ueditor百度富文本编辑器使用解决方案

写网站的时候都是用asp.net2.0写的 但是看了百度的富文本编辑器使用说明都是.net framework 4.0 版本的 百度了半天看的各种的解决方案 我把最新版本的百度富文本编辑器下载下来 改了.sln 文件信息 可以用vs2008打开 当然会报一些错误 ..类名不存在等等 百度了半天还是没解决问题后来放弃了.(最终还是用了百度的) 于是就找了kindeditor但是觉得他长得有点丑..还是放弃了 又接着百度ueditor配置方法看到了一篇博文 http://blog.sina.com.

百度富文本编辑器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添加到pom

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

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器