富文本编辑器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）：

这样就可以在配置时多加一个构造参数，然后加载页面试试看，正常上传并且可以正常预览了。

正常预览（生成的代码也对）：

 成功。

移动端预览（双指缩放移动）富文本编辑器上传的图片(代码片段)

通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。1.安装插件npminstallvue-photo-preview--save2.main引入importpreviewfrom'vue-photo-preview'import'vue-photo-preview/dist/skin.css'Vue.use 查看详情

富文本编辑器-1-选型

...团队的业务多为后台管理系统，部分业务需要使用富文本编辑器。早期团队选用了百度编辑器，但存在bug多、无人维护、扩展性差等问题，且后续业需要更灵活的编辑器。为了解决这些问题，决定重选编辑器。基于以下原因，笔... 查看详情

用mvc框架中页面用的jquery，在使用dialog是使用tinymce的图片上传以及富文本编辑器，

图片上传的时候，是路径不对，找不到页面。在使用富文本编辑器时编辑框上面的编辑器出不来。参考技术A不是很明白你的问题TinyMce我没有用过，还有，上传图片和dialog是什么样的关系？你是用dialog预览还是用于上传后显示？ 查看详情

Summernote富文本编辑器-限制图片高于特定高度和宽度

】Summernote富文本编辑器-限制图片高于特定高度和宽度【英文标题】：Summernoterichtexteditor-restrictimageaboveparticularheightandwidth【发布时间】：2021-11-2822:58:46【问题描述】：当我在编辑器中上传图片时，我可以找到它的大小。但我希望... 查看详情

百度富文本编辑器ueditor自定义上传图片接口

如下图： 然后修改ueditor.all.js   查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情

simditor富文本编辑器多选图片上传视频连接插入(代码片段)

simditor 是一个基于浏览器的所见即所得的文本编辑器。Simditor富文本编辑器,支持多选图片上传,视频连接插入,HTML代码编辑以及常用富文本按钮，支持的浏览器：IE10、Firefox、Safari。点击这里下载zip文件。你也可以安装Simditorbow... 查看详情

使用百度umeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用UEDITOR：百度开发的插件，lite版是UMEasyUI编... 查看详情

轻量级富文本编辑器quilleditor结合iview的使用

...ue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有... 查看详情

vuetinymce控制图片大小上传，以及富文本编辑框在dialog的问题

参考技术A项目需求需要用到富文本编辑框，表格中操作富文本编辑框，最后选择用弹框的形式显示，注意弹框和富文本编辑框的坑原因：第一次弹框tinymce组件未销毁，因此先于第二次dialog弹出，而第二次dialog中的传值也就后于... 查看详情

editor富文本编辑器配置不含图片上传

一，下载地址：http://ueditor.baidu.com/website/download.html　　1）根据需要下载相应版本　　　例 Java：选择jsp+utf-8；二，放置在项目中　　1）解压下载文件，并重命名为editor；　　2）复制文件放置在项目webapp目录下；　　3）把edi... 查看详情

富文本编辑器quill上传图片与视频

image与video在Quillformats中属于Embeds，要在富文本中插入图片或者视频需要使用insertEmbedapi。insertEmbedinsertEmbed(index:Number,type:String,value:any,source:String=‘api‘):Delta插入图片需要位置，内容类型以及图片的url：quill.insertEmbed(10,‘image‘,... 查看详情

kindeditor富文本框编辑器上传图片功能实现，基于java项目

1.HTML标签与jquery代码<textareaid="editor_id"style="width:200px;height:200px;"></textarea><scripttype="text/javascript"src="../js/jquery.min.js"></script> <scripttype="text/javas 查看详情

富文本编辑框比较

几种知名开源富文本编辑器记录和对比（仅供参考）搬运出处: https://www.jianshu.com/p/002eb6277f9d1、UEditor百度的。优点：插件多，基本满足各种需求，类似贴吧中的回复界面。缺点：不再维护，文档极少，使用并不普遍，图片只... 查看详情

后台产品设计之编辑器

...多精彩可以点击下方链接查看。后台产品设计指南富文本编辑器富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于OfficeWord的编辑功能，可以帮助用户快速地添加文字、图片、表格等内容并设置格式... 查看详情

editor富文本编辑器（图片上传）

效果图下面是页面index.jsp<%@pagelanguage="java"import="java.util.*"contentType="text/html;charset=gb2312"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+&... 查看详情

editor富文本编辑器（图片上传）

效果图下面是页面index.jsp<%@pagelanguage="java"import="java.util.*"contentType="text/html;charset=gb2312"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+&... 查看详情

vue：富文本编辑器quill-editor上传图片导致url太长导致请求报错

参考技术A用Vue插件quill-editor添加图片的时候默认会被转为base64编码导致数据很长，因此上传数据的时候会发生错误1，创建quill-config.js文件需要特别注意这一行，把服务器返回的URL赋值到富文本的img进行展示2,Vue页面使用 查看详情