vue 引用tinymce(富文本)遇到的坑,以及添加本地圖片上傳

1.安裝

npm install tinymce 

2.組件初始化：

在須要用到富文本的組件內，import tinymce from 'tinymce'

而後初始化  tinymce.init

3.加載富文本須要的資源文件，放在static目錄下

4.webpack配置

webpack.dev.conf.js

webpack.prod.conf.js

5.本地開發環境，谷歌和火狐瀏覽器都能完美兼容，打包後谷歌瀏覽器沒問題，火狐瀏覽器存在問題，報的是ip+/themes/modern/theme.js 找不見。

解決方法：

在當前組件配置baseURL：

判斷開發環境仍是生產環境，改變引用資源的相對路徑，保證富文本能加載到所需資源文件.

if (process.env.BASE_API.indexOf('openManage') >= 0) {

　　window.tinymce.baseURL = './static/js';

}

 

6.本地圖片上傳------------------------組件初始化的時候，添加圖片上傳地址，以及上傳監聽

主要參考tinymce文檔：https://www.tiny.cloud/docs/general-configuration-guide/upload-images/  

(1)添加本地圖片上傳地址，本地調試容許跨域

(2)圖片上傳回調

images_upload_handler(blobInfo, success, failure) {

let xhr = '';

let formData = '';

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', `${process.env.BASE_API}/common/fileUpload`);

xhr.onload = () => {

let json = {};

if (xhr.status !== 200) {

 　 failure('HTTP Error: ', xhr.status);

  　return;

}

json = JSON.parse(xhr.responseText);

　success(json.content.preAddr);

};

formData = new FormData();

formData.append('upFile', blobInfo.blob());

xhr.send(formData);

},