富文本编辑器handyeditor，上传和预览图片的host地址不一样

矫情吗；* 2022-01-07 04:09 164阅读 0赞

使用富文本编辑器([官网][Link 1])时，大多时候都会用到图片上传，但是下载的富文本编辑器的默认配置是只有一个上传地址的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][http_he.catfish-cms.com_jibenshiyong]。

但是，此项目使用的是阿里云的oss服务，然后上传图片（使用了一个自己的中间服务）和预览图片使用了**两个host地址**。这个时候使用默认的配置，就会出现上传图片成功，但是编辑器图片却无法正常预览，如下图所示：

![1368523-20190617114226083-31838091.png][]

但其实图片是上传成功了：

![1368523-20190617114421424-867987804.png][]

这个时候，我们使用正常的预览host加上此路径，是可以正常预览的，编辑器中显示错误是因为host地址是上传的host，所以显示不了，同时导致生成的代码里边的img的src也是错误的。

**解决思路**：再配置一个预览地址，上传成功后，用预览地址的host代替上传的host拼接路径，然后正常打开，这样getHtml中的图片地址也就可以正常打开了。

按照这个思路，看了下他的源码HandyEditor，准备修改他的HE构造器，添加一个预览的host地址

![1368523-20190617115923027-649401923.png][]

修改预览地址（之前是 uploadPhotoUrl）：

![1368523-20190617120143572-584756971.png][]

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

![1368523-20190617120358431-1329197484.png][]

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

![1368523-20190617120527476-426301783.png][]

成功。

转载于:https://www.cnblogs.com/mufengforward/p/11039002.html

[Link 1]: http://he.catfish-cms.com/
[http_he.catfish-cms.com_jibenshiyong]: http://he.catfish-cms.com/#jibenshiyong
[1368523-20190617114226083-31838091.png]: /images/20211227/7551d47afd0a40d0886b123fc45c3a93.png
[1368523-20190617114421424-867987804.png]: /images/20211227/1b3d4032a39b449b93265bcccba981dd.png
[1368523-20190617115923027-649401923.png]: /images/20211227/33fe7c4eff474569acd36b3ece9cd1cc.png
[1368523-20190617120143572-584756971.png]: /images/20211227/6c6744f244a44446bebfe4f44d0fa3bc.png
[1368523-20190617120358431-1329197484.png]: /images/20211227/c0a4d268e714429aa95a49f9ea48b703.png
[1368523-20190617120527476-426301783.png]: /images/20211227/8398156bba254cea811dee3d34583072.png