富文本编辑器handyeditor,上传和预览图片的host地址不一样
使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的。
var he = HE.getEditor('editor', {
        autoHeight: true,
        autoFloat: false,
        topOffset: 0,
        uploadPhoto: true,
        uploadPhotoUrl: uploadDomain,
        uploadPhotoHandler: "",
        uploadPhotoSize: 200,
        uploadPhotoType: 'gif,png,jpg,jpeg',
        uploadPhotoSizeError: '不能上传大于2MB的图片',
        uploadPhotoTypeError: '只能上传gif,png,jpg,jpeg格式的图片',
        lang: 'zh-jian',
        skin: 'HandyEditor',
        externalSkin: '',
        item: ['bold', 'italic', 'strike', 'underline', 'fontSize', 'fontName', 'paragraph', 'color', 'backColor', '|', 'center', 'left', 'right', 'full', 'indent', 'outdent', '|', 'link', 'unlink', 'textBlock', 'code', 'selectAll', 'removeFormat', 'trash', '|', 'image', 'expression', 'subscript', 'superscript', 'horizontal', 'orderedList', 'unorderedList', '|', 'undo', 'redo', '|', 'html', '|', 'about']
    });
var content = he.getHtml() 获得html代码 具体配置可参考官网:http://he.catfish-cms.com/#jibenshiyong。
但是,此项目使用的是阿里云的oss服务,然后上传图片(使用了一个自己的中间服务)和预览图片使用了两个host地址。这个时候使用默认的配置,就会出现上传图片成功,但是编辑器图片却无法正常预览,如下图所示:
  
但其实图片是上传成功了:
  
这个时候,我们使用正常的预览host加上此路径,是可以正常预览的,编辑器中显示错误是因为host地址是上传的host,所以显示不了,同时导致生成的代码里边的img的src也是错误的。
解决思路:再配置一个预览地址,上传成功后,用预览地址的host代替上传的host拼接路径,然后正常打开,这样getHtml中的图片地址也就可以正常打开了。
按照这个思路,看了下他的源码HandyEditor,准备修改他的HE构造器,添加一个预览的host地址
  
修改预览地址(之前是 uploadPhotoUrl):
  
这样就可以在配置时多加一个构造参数,然后加载页面试试看,正常上传并且可以正常预览了。
  
正常预览(生成的代码也对):
  
成功。
富文本编辑器handyeditor,上传和预览图片的host地址不一样的更多相关文章
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
		
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
 - layui 魔改:富文本编辑器添加上传视频功能
		
甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...
 - js上传和预览图片
		
[1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
 - bbs项目富文本编辑器实现上传文件到media目录
		
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...
 - 给Django后台富文本编辑器添加上传文件的功能
		
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
 - 关于百度Editor富文本编辑器 自定义上传位置
		
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
 - ueditor编辑器视频上传不能预览的问题
		
ps:来源 https://blog.csdn.net/eadela/article/details/76264168 修改ueditor.all.js文件 ueditor.all.js,17769行 ...
 - js上传并且预览图片
		
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 - 【转】HTML5 jQuery图片上传前预览
		
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
 
随机推荐
- Make 和 Makefile快速入门
			
前言 一个项目,拥有成百上千的源程序文件,编译链接这些源文件都是有规则的.Makefile是整个工程的编译规则集合,只需要一个make命令,就可以实现“自动化编译”.make是一个解释makefile ...
 - WebApi 接口恶意请求限制
			
为了防止爬虫以及恶意请求,我们适当的为API增加一个请求限制 WebApiThrottle限流框架 WebApiThrottle支持自定义配置各种限流策略.可以根据不同场景配置多个不同的限制 ...
 - python2.7 安装pycrypto库报错
			
windows + python2.7 先安装VC包 https://download.microsoft.com/download/7/9/6/796EF2E4-801B-4FC4-AB28-B59 ...
 - jquery基础知识3
			
1.jquery的位置信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
 - appium+python+iOS   环境搭建,安装fbsimctl
			
(1)设置postBuffer的值 开始如下的安装之前,需先修改postBuffer的值,默认的比较下,会导致下载大文件时失败, 参考链接:http://blog.sina.com.cn/s/blog ...
 - 2019牛客暑期多校训练营(第九场)Knapsack Cryptosystem——哈希表&&二进制枚举
			
题意 有长度为 $n$($1\leq n\leq 36$)的数列,给出 $s$,求和为 $s$ 的子集,保证子集存在且唯一. 分析 答案肯定是来自左右半边两部分组成的. 如果我们用哈希表存一半,计算另 ...
 - linux 忘记root密码怎么处理。
			
这个是不少人纠结的地方.一台服务器,太久没使用,然后又没有一个文件txt,excel记录那些密码相关的东西.所以导致很多信息忘记了. 参考文章:https://blog.csdn.net/cranky ...
 - [AngularJS] Extend Controller
			
/** * Module definition and dependencies */ angular.module('App.Child', []) /** * Component */ .comp ...
 - IIS:URL Rewrite实现vue的地址重写
			
vue-router 全局配置 const router = new VueRouter({ mode: 'history', routes: [...] }) URL Rewrite 1.添加规则 ...
 - HDU 6168 - Numbers   |  2017 ZJUT Multi-University Training 9
			
/* HDU 6168 - Numbers [ 思维 ] | 2017 ZJUT Multi-University Training 9 题意: .... 分析: 全放入multiset 从小到大,慢 ...