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);

},