富文本編輯器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）：

　　

 

這樣就可以在配置時多加一個構造參數，然后加載頁面試試看，正常上傳並且可以正常預覽了。

　　

正常預覽（生成的代碼也對）：

　　

 

 成功。