js 百度UEditor图片上传配置及默认使用远程url地址

图片上传配置成功了,图片也上传了,但是有个问题就是图片在保存的时候,使用的是相对地址。

红色部分是现在存在的问题,我想改成下面绿色部分的带有我网站的绝对地址。

在百度搜索了好久,遇到这个问题的不多,但是有个哥们确实也遇到我这个问题,参考:

http://blog.csdn.net/javaloverkehui/article/details/8465112

但是他修改的版本属于比较早的版本了。我发现在新版上根本没有这样的配置。或者说配置的地方不一样了。

没办法,我重回百度ueditor的官网,查看文档。发现这样一段:

文档说明
支持版本:支持 UEditor 1.4.2+ 的版本

1.4.2+ 以后路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项。

这两个配置项主要针对如下功能:

图片上传:imagePathFormat、imageUrlPrefix

涂鸦上传:scrawlPathFormat、scrawlUrlPrefix

截屏上传:snapscreenPathFormat、snapscreenUrlPrefix

附件上传:filePathFormat、fileUrlPrefix

视频上传:videoPathFormat、videoUrlPrefix

当前文档的例子是以 图片上传 为例介绍,其他配置方法类同。

imagePathFormat 介绍
作用:指定文件上传路径和返回路径,支持格式化

1.4.2+ 路径配置项无论是否以 "/" 开头,都是相对于 网站根目录 的路径。
例如,假设网站根目录是:"D://apache/www/",以下是 imagePathFormat 的配置值以及对应的存放目录。

 代码如下 复制代码

"/upload/{filename}" --> "D://apache/www/upload/"

"upload/{filename}" --> "D://apache/www/upload/"

"./upload/{filename}" --> "D://apache/www/upload/"

"../upload/{filename}" --> "D://apache/upload/"

1 指定文件保存目录
上传路径可以使用根路径和相对路径,推荐使用根路径的配置。

1.1 使用 "/" 开头的根路径
imagePathFormat 参数推荐使用 "/" 开头的配置,这样的值指相对于网站根目录的位置。

例子:网站根目录是 "D://apache/www/",imagePathFormat 参数设置为 "/upload/image/{filename}",那么上传位置在 "D://apache/www/upload/image/" 目录下。

1.2 使用非 "/" 开头的相对路径
imagePathFormat 参数使用非 "/" 开头的相对路径时,上传位置也是相对于网站根目录(asp、.net例外,相对于应用程序的目录)。

例子1:网站根目录是 "D://apache/www/",imagePathFormat 参数设置为 "ueditor/php/upload/{filename}",那么上传位置在 "D://apache/www/ueditor/php/upload/" 目录下。

例子2:网站根目录是 "D://apache/www/",imagePathFormat 参数设置为 "../upload/{filename}",那么上传位置在 "D://apache/upload/" 目录下。

2 控制插入到编辑器的路径
2.1 后台返回路径
后台执行上传结束后,返回路径是按照 imagePathFormat 配置项替换后的字符串,原样输出到前端。

例子1:上传文件名为 123.jpg,imagePathFormat 参数设置为 "/ueditor/php/upload/{filename}",那么返回路径是 "/ueditor/php/upload/123.jpg"。

例子2:上传文件名为 123.jpg,imagePathFormat 参数设置为 "../upload/{filename}",那么返回路径是 "../upload/123.jpg"。

2.2 通过 imageUrlPrefix 配置项给返回路径添加前缀
有一些情况下仅仅靠返回路径是不能得到正常的图片链接,需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。

有两种情况下需要配置 imageUrlPrefix:

asp和.net下,应用程序目录不是网站根目录,需要给路径添加前缀。

在跨域上传的情况下,就需要配置imageUrlPrefix前缀。假设页面在 a.com 域下,文件上传到 b.com 域下,这样要配置 imageUrlPrefix 为 "http://b.com" 才能得到正常路径。

最下面标红的部分就是我遇到的问题。根据后端语言不一样,修改文件路径不一样,但是都是修改:config.json

 代码如下 复制代码

/* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://192.168.3.9/ds/ueditor/net/", /* 图片访问路径前缀 */
将 "imageUrlPrefix": "http://192.168.3.9/ds/ueditor/net/", /* 图片访问路径前缀 */

修改成绝对地址即可。

这样问题就解决了。

ueditor其他问题:

1、设置高度:由于ueditor默认是将所有属性屏蔽的。高度是默认自适应的,可以通过修改ueditor.config.js注释的选项打开。

initialFrameHeight:500  //初始化编辑器高度,默认320

或者修改默认

2、后台config.json是通过后台类App_Code下的Config.cs读取的。这个地方我出过亏,如果发现修改config.json后配置没有变化的,可以在这个函数上做一下监控:

 代码如下 复制代码

var json = File.ReadAllText(HttpContext.Current.Server.MapPath("config.json"));
return JObject.Parse(json);

时间: 2025-01-21 15:35:19

js 百度UEditor图片上传配置及默认使用远程url地址的相关文章

CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)

CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还需要下载ckfinder. 首先去官方上下载源代码,然后分别解压缩在网站根目录里(默认ckeditor和ckfinder文件夹里,一般不需要改动) 在所需要的页面插入JS <script type="text/网页特效" src="/ckeditor/ckeditor.JS

gbk转utf-8 百度编辑器图片上传描述信息

问题描述 gbk转utf-8 百度编辑器图片上传描述信息 5C while((n=in.read(c))!=-1){ String gbk=new String(new String(c0n).getBytes(""GBK"")UTF-8""); String iso = new String(gbk.getBytes(""UTF-8"")ISO-8859-1""); System.ou

js HTML5多图片上传及预览实例解析(不含前端的文件分割)_javascript技巧

本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片  html+css+js代码  <!DOCTYPE html> <head> <meta http-e

如何在SAE上使用Ueditor图片上传功能

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath): ''''' 省略

thinkphp下ckeditor+ckfinder的图片上传配置详解

最新发布的CKFinder 1.4版 已经提供了对CKEditor3.0的支持CKFinder 1.4 下载地址:http://ckfinder.com/CKEditor3.0 下载地址:http://ckeditor.com/ 下载后直接解压得到ckeditor文件夹,包括如下内容: ck配置图片   其中sample为例子,source为源文件,为了减少editor的体积,直接删除.其他你也可删除一些,像语言只留zh-cn.然后将整个文件夹直接拷贝到网站htdocsnewtpPublicJs

node.js实现多图片上传实例_node.js

先上效果图: 这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的) 总共涉及到三处文件(常规来说) 1.路由入口文件(我这里是/routes.js,很多时候会在/app.js) 复制代码 代码如下:   //添加美食  app.all('/add', users.add); 2.路由控制器文件(我这里是/routes/users.js) 复制代码 代码如下: //添加美食exports.add = function (req, res) {   if (re

php+js实现异步图片上传实例分享_php实例

upload.php 复制代码 代码如下: <?phpif(isset($_FILES["myfile"])){$ret = array();$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;file_exists($dir) || (mkdir($di

WordPress自定义上传路径及生成文件的URL地址教程

WordPress 3.5以上的版本,隐藏了后台的媒体(Media)设置页面 上传路径(upload_path)和文件 URL 地址(upload_url_path)的设定,如下图所示.有些朋友却需要这个功能,那怎么办呢,这里给大家介绍两个办法来找回这个功能. 代码找回 将以下代码加入到functions.php中即可恢复该功能: //找回上传设置 if(get_option('upload_path')=='wp-content/uploads' || get_option('upload_p

百度编辑器UEditor图片上传路径更改方法

找到ueditor/php目录下的getRemoteImage.php, 法一:将第12行的savePath" => "upload/" 修改为  代码如下 复制代码 1 "savePath" => "upload/".date("Ymd")."/" 法二:将第80行  代码如下 复制代码 1 $tmpName = $savePath . rand( 1 , 10000 ) . tim