tinymce vue 部分工具不显示_tinymce-vue使用问题及解决记录
一、本地圖片上傳：
1.轉(zhuǎn)成base64，轉(zhuǎn)換后的字符粘貼到notpadd++中看了下，有近20萬個字符，所以直接沒考慮
2.選擇圖片后調(diào)用后臺方法傳到服務器，保存后返回一個網(wǎng)絡地址，傳入success的回調(diào)方法，通過網(wǎng)絡地址的方式顯示。
前端配置代碼如下：
images_upload_handler: (blobInfo, success, failure) => {
if (blobInfo.blob().size > 1048576) {
failure('文件體積過大')
}
// 發(fā)送到后臺，傳送到阿里云oss，返回上傳后的網(wǎng)絡地址
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;
}
// 后臺返回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，切換到移動模式顯示，發(fā)現(xiàn)是mobile/theme.js中的報錯，原來是針對移動端有專門的js文件渲染，在/node_modules/tinymce/themes下存在兩個目錄，分別是silver和mobile，在封裝組件的時候只引用了這個：
import 'tinymce/themes/silver'
加上如下引用：
import 'tinymce/themes/mobile'
手機端即可成功渲染
總結(jié)
以上是生活随笔為你收集整理的tinymce vue 部分工具不显示_tinymce-vue使用问题及解决记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （安卓模拟器xp版）
- 下一篇： vue加跨域代理静态文件404_解决vu