一、本地图片上传：
1.转成base64，转换后的字符粘贴到notpadd++中看了下，有近20万个字符，所以直接没考虑
2.选择图片后调用后台方法传到服务器，保存后返回一个网络地址，传入success的回调方法，通过网络地址的方式显示。
前端配置代码如下：
images_upload_handler: (blobInfo, success, failure) => {
if (blobInfo.blob().size > 1048576) {
failure('文件体积过大')
}
// 发送到后台，传送到阿里云oss，返回上传后的网络地址
const uploadImgUrl =this.GLOBAL.WebSite + "/article/imgUpload";
var xhr, formData;
//原先用axios发文件一直不成功，参照官方文档。。第一次用XMLHttpRequest这鬼东西
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', uploadImgUrl);
formData = new FormData();
formData.append('file', blobInfo.blob());
xhr.onload = function() {
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
const result = JSON.parse(this.responseText);
if (!result || typeof result.value != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
// 后台返回json，对应的值的key是"value"，所以这里为result.value
success(result.value);
}
xhr.send(formData);
}
阿里云买了个打折OSS服务器，上传OSS服务器的后台代码如下：
public static void uploadFile(MultipartFile multipartFile, String fileName) {
OSSClient ossClient = new OSSClient(AliyunOssConfig.getEndpoint(),
AliyunOssConfig.getAccessKeyId(), AliyunOssConfig.getAccessKeySecret());
try {
if (!ossClient.doesBucketExist(AliyunOssConfig.getDefaultBucketName())) {
ossClient.createBucket(AliyunOssConfig.getDefaultBucketName());
}
ossClient.putObject(AliyunOssConfig.getDefaultBucketName(), fileName,
multipartFile.getInputStream());
} catch (Exception e) {
logger.error(e,"uploadFile is error.");
} finally {
ossClient.shutdown();
}
}
上传成功后需要将阿里云OSS的文件获取路径返回给前端组件处理。具体格式为：bucketName.endpoint/fileName，
如：http://leslie1015.oss-cn-hangzhou.aliyuncs.com/1234.jpg，前端获取后传入success(url)，组件将图片渲染为
package com.leslie.silk.config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
/**
*阿里云OSS配置
/
@Component
public class AliyunOssConfig {
private static String endpoint;
private static String accessKeyId;
private static String accessKeySecret;
private static String defaultBucketName;
private static String endpointContent;
private AliyunOssConfig() {
}
public static String getEndpoint() {
return endpoint;
}
@Value("${aliyun.oss.endpoint}")
private void setEndpoint(String endpoint) {
AliyunOssConfig.endpoint = endpoint;
}
public static String getAccessKeyId() {
return accessKeyId;
}
@Value("${aliyun.oss.accessKeyId}")
private void setAccessKeyId(String accessKeyId) {
AliyunOssConfig.accessKeyId = accessKeyId;
}
public static String getAccessKeySecret() {
return accessKeySecret;
}
@Value("${aliyun.oss.accessKeySecret}")
private void setAccessKeySecret(String accessKeySecret) {
AliyunOssConfig.accessKeySecret = accessKeySecret;
}
public static String getDefaultBucketName() {
return defaultBucketName;
}
@Value("${aliyun.oss.defaultBucketName}")
private void setDefaultBucketName(String defaultBucketName) {
AliyunOssConfig.defaultBucketName = defaultBucketName;
}
public static String getEndpointContent() {
return endpointContent;
}
@Value("${aliyun.oss.endpointContent}")
public void setEndpointContent(String endpointContent) {
AliyunOssConfig.endpointContent = endpointContent;
}
}
二、桌面端富文本组件正常，移动端不显示
其实很简单。。。。愣是搞了半天
F12，切换到移动模式显示，发现是mobile/theme.js中的报错，原来是针对移动端有专门的js文件渲染，在/node_modules/tinymce/themes下存在两个目录，分别是silver和mobile，在封装组件的时候只引用了这个：
import 'tinymce/themes/silver'
加上如下引用：
import 'tinymce/themes/mobile'
手机端即可成功渲染
