使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的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地址不一样的更多相关文章

  1. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  2. layui 魔改:富文本编辑器添加上传视频功能

    甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...

  3. js上传和预览图片

    [1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  5. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  6. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  7. ueditor编辑器视频上传不能预览的问题

    ps:来源 https://blog.csdn.net/eadela/article/details/76264168 修改ueditor.all.js文件 ueditor.all.js,17769行 ...

  8. js上传并且预览图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

随机推荐

  1. jquery-deferred应用

    我们说jquery1.5之后用的用deferred,那么deferred到底是个什么东西,看个例子 var wait = function(){ var task = function(){ cons ...

  2. MySQL 是怎样运行的:从根儿上理解 MySQL:字符集和比较规则

    本文章借鉴自https://juejin.im/book/5bffcbc9f265da614b11b731 字符集和比较规则简介 一些重要的字符集 ASCII字符集 共收录128个字符,包括空格.标点 ...

  3. 【原创】SPFA判负环

    [定义与概念] 给定一张有向图,若其中存在一个环的所有权值之和为负数,这个环称为负环. [算法实现] 当然,负环的求解可以暴搜,但是时间复杂度就难以入眼了,我们回到求解单源最短路径算法上面,看看它们能 ...

  4. 《The One!》团队作业4:基于原型的团队项目需求调研与分析

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)体验以原型设计为基础的团队软件项目需求获取技巧与方法.(2)学习利用UML模 ...

  5. 并发编程:Thread和Runable-01

      1.继承Thread类(不推荐) 代码很简单,就不说了 public class ThreadTest02 { public static void main(String[] args) { n ...

  6. fsLayuiPlugin入门使用

    简介 源码下载后,不能直接打开,必须运行在容器下,例如:nginx.tomcat.jetty等容器. 源码中默认配置了nginx容器,可以直接启动nginx访问. 本文主要介绍下载源码后的使用,避免在 ...

  7. HDU 2454 Degree Sequence of Graph G——可简单图化&&Heavel定理

    题意 给你一个度序列,问能否构成一个简单图. 分析 对于可图化,只要满足度数之和是偶数,即满足握手定理. 对于可简单图化,就是Heavel定理了. Heavel定理:把度序列排成不增序,即 $deg[ ...

  8. 16Vue 表单的输入绑定

    基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的 ...

  9. python AES对称加密

    1.首先需要安装第三方库 pip install pycryptodome 2.实例代码,亲测可用 # coding:utf-8 import base64 from Crypto.Cipher im ...

  10. AirtestIde的安装(win10)

    Airtest 是网易出品的一款基于图像识别和poco控件识别的一款UI自动化测试工具. Airtest IDE是这个项目的一个IDE,就像Eclipse.Pycharm一样,是一个集成开发工具. A ...