tinymce-vue使用问题及解决记录

一、本地图片上传：
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)，组件将图片渲染为<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;
  }
}

二、桌面端富文本组件正常，移动端不显示
其实很简单。。。。愣是搞了半天
F12，切换到移动模式显示，发现是mobile/theme.js中的<!DOCTYPE html>报错，原来是针对移动端有专门的js文件渲染，在/node_modules/tinymce/themes下存在两个目录，分别是silver和mobile，在封装组件的时候只引用了这个：

import 'tinymce/themes/silver'

加上如下引用：

    import 'tinymce/themes/mobile'

手机端即可成功渲染