富文本编辑器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,把选 ...
随机推荐
- dict sorted by value. 字典根据 值排序
d = [('a', 24), ('g', 52), ('i', 12)] print(sorted(d),key = lambda x:x[1]) sorted (字典,排序的依据: 字典[key] ...
- Alpha版本第二周小结
软工作业---Alpha版本第二周小结 姓名 学号 周前计划 每周实际工作记录 自我打分 yrz 1417 协助原型设计的完善,督促组员完成个人任务 原型优化设计未完成,但体 ...
- 第五周作业:markdown语法小总结
第五周作业 markdown语法总结 早就想写这么一个文章了,关于markdown的语法,因为最近使用的比较多,所以特地总结一下 一,标题 首先要介绍的就是标题, 标题一共有六级 # h1 ## h2 ...
- 3星|华杉华楠《超级符号原理》:超级符号是指注册为商标的企业logo
“ 超级符号是私有财产,超级符号是通过对传统符号的改造,使之成为注册商标,成为私有化财产,通过占有它,让竞争对手无法使用.P112” 超级符号原理 作者: 华杉 华楠 出版社: 文汇出版社 出版年: ...
- Gym - 102012H Rikka with A Long Colour Palette N线段K色贪心染色
给你数轴上的N条线段和K种颜色 K和N1e5 要你把这N条线段染色 使得有K种不同颜色的线段长度最长 首先很容易想到被至少K段线段覆盖的区间是一定有贡献的 接下来就是怎么染色的问题 我们把这N个区间的 ...
- POJ1185 炮兵阵地 和 POJ2411 Mondriaan's Dream
炮兵阵地 Language:Default 炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34008 Accepted ...
- canvas小球动画
绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...
- KM 最大权匹配 UVA 1411/POJ 3565
#include <bits/stdc++.h> using namespace std; inline void read(int &num) { char ch; num = ...
- Swagger2 模拟请求头
前几天开发项目的时候,使用了Restful风格的接口.进行开发的时候,模拟请求头,带Token的时候遇到了一些问题.因为Api接口使用Swagger2进行搭建,所以找到了Swagger2 模拟head ...
- 使用jQuery快速高效制作网页交互特效---表单校验
表单基本验证技术 为什么需要表单验证 减轻服务器的压力 保证输入的数据符合要求 常用的表单验证 1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码 表单选择器 ...