一、本地圖片上傳：
1.轉(zhuǎn)成base64，轉(zhuǎn)換后的字符粘貼到notpadd++中看了下，有近20萬(wàn)個(gè)字符，所以直接沒(méi)考慮
2.選擇圖片后調(diào)用后臺(tái)方法傳到服務(wù)器，保存后返回一個(gè)網(wǎng)絡(luò)地址，傳入success的回調(diào)方法，通過(guò)網(wǎng)絡(luò)地址的方式顯示。

前端配置代碼如下：

images_upload_handler: (blobInfo, success, failure) => {
                        if (blobInfo.blob().size > 1048576) {
                            failure('文件體積過(guò)大')
                        }
                        // 發(fā)送到后臺(tái)，傳送到阿里云oss，返回上傳后的網(wǎng)絡(luò)地址
                        const uploadImgUrl =this.GLOBAL.WebSite + "/article/imgUpload";
                        var xhr, formData;
                        //原先用axios發(fā)文件一直不成功，參照官方文檔。。第一次用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;
                            }
                          // 后臺(tái)返回json，對(duì)應(yīng)的值的key是"value"，所以這里為result.value
                            success(result.value);
                        }
                        xhr.send(formData);
                    }

阿里云買了個(gè)打折OSS服務(wù)器，上傳OSS服務(wù)器的后臺(tái)代碼如下：

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)，組件將圖片渲染為<img src="http://leslie1015.oss-cn-hangzhou.aliyuncs.com/1234.jpg"/>

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

二、桌面端富文本組件正常，移動(dòng)端不顯示
其實(shí)很簡(jiǎn)單。。。。愣是搞了半天
F12，切換到移動(dòng)模式顯示，發(fā)現(xiàn)是mobile/theme.js中的<!DOCTYPE html>報(bào)錯(cuò)，原來(lái)是針對(duì)移動(dòng)端有專門的js文件渲染，在/node_modules/tinymce/themes下存在兩個(gè)目錄，分別是silver和mobile，在封裝組件的時(shí)候只引用了這個(gè)：

import 'tinymce/themes/silver'

加上如下引用：

    import 'tinymce/themes/mobile'

手機(jī)端即可成功渲染