今夕是何年冠骄，回首過往瑞躺，已許久沒有寫文章了，主要是過去太忙，沒有太多閑暇時光捷泞，主要還是自己太懶了吧??到推。廢話不多說底循，今天主要是記錄使用vue3集成百度編輯器解決上傳圖片的問題踱卵，我一直以為百度編輯器沒有更新了，很久沒有關注了郑临，直到最近在gitee上面刷到了UEditor-Plus項目栖博，才知道有新的維護了，體驗了一下感覺還是蠻不知錯的厢洞。在實際項目中也用過很多編輯器仇让，有的時候一些功能就很難滿足需求，之前用過wangEditor使用很方便躺翻，集成也非常簡單丧叽，但是表格功能沒有合并單元格功能，最近作者也說停止維護更新了公你，找一款好用的編輯器尤為重要蠢正，百度編輯器功能這塊還是蠻豐富的，所以今天就簡單記錄一下我集成的過程和所采的坑省店。
第一步：1.先解決前端集成問題嚣崭，現(xiàn)在vue比較主流，相關的組件已經(jīng)封裝好了懦傍，官網(wǎng)直達就知道怎么用了vue-ueditor-wrap雹舀，通過以下命令之間安裝就ok了。
# vue-ueditor-wrap v3 僅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn add vue-ueditor-wrap@3.x
2.在main.js中配置
import {VueUeditorWrap} from "vue-ueditor-wrap";
app.use(VueUeditorWrap)
- 在具體的頁面中使用
<template>
<vue-ueditor-wrap v-model="content"
editor-id="editor"
:config="editorConfig"
:editorDependencies="['ueditor.config.js','ueditor.all.js']"
style="height:500px;"/>
</template>
<script>
const content = ref('')
const editorConfig=ref({
zIndex:10000, //設置層級
initialFrameWidth:'100%', //設置編輯器寬度
serverUrl: 'http://xx.xx.xx/uEditor' //統(tǒng)一請求服務器地址(上傳接口地址)
// 配置 UEditorPlus 的靜態(tài)資源根路徑粗俱，可以是 CDN 的靜態(tài)資源地址
UEDITOR_HOME_URL: '/UEditor/', //在vue項目public目錄中導入的編輯器靜態(tài)資源
UEDITOR_CORS_URL: '/UEditor/'
})
</script>
靜態(tài)資源在vue-ueditor-wrap文檔里面有說明说榆，安裝組件的下一步下載UEeitor資源即可。
根據(jù)需要自己下載合適的版本寸认，下載后將目錄拷貝至vue的public目錄,命名一個文件夾签财，這個和上述UEDITOR_HOME_URL: '/UEditor/' 有關，比如我的目錄叫UEditor,這樣配置就可以了偏塞，這些配置好以后唱蒸，編輯器就可以展示出來了,效果如下:
ok,出現(xiàn)這個效果說明配置OK了，但是此時灸叼，圖片上傳是不行的神汹，提示上傳插件配置異常
解決這個問題，需要結合后端配置,接下來我們就該處理圖片上傳的問題了古今。
第二步：處理圖片及文件上傳問題屁魏，百度編輯器和其他編輯器不太一樣的地方是提供了后臺相關的開發(fā)包demo，我們根據(jù)自己的需要進行下載參考捉腥。https://open-doc.modstart.com/ueditor-plus/backend.html#uploadimage 閱讀這個文檔我們得知文件上傳的接口規(guī)范信息
GET {"action": "config"} //讀取配置的action名稱
GET {"action": "uploadimage"} //上傳圖片的action名稱
POST "upfile": File Data //上傳文件的name名稱
上傳返回格式:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg"
}
有了這些消息氓拼，就知道怎么處理接口了，在我們下載的資源包里面有個jsp/config.json文件抵碟，這個就是返回配置的具體內容桃漾，拷貝至springboot項目的resources目錄
定義編輯器文件上傳接口
/**
* UEditor編輯器上傳處理
* @param action
* @param upfile
* @return
*/
@RequestMapping("/uEditor")
public Object uEditor(@RequestParam("action") String action,@RequestParam(value = "upfile",required = false) MultipartFile upfile) {
//判斷action:為config時，返回config.json的內容即可
switch (action){
case "config":
final InputStream resourceAsStream =
App.class.getResourceAsStream("/uEditor/config.json");
assert resourceAsStream != null;
try(BufferedReader reader = new BufferedReader(new InputStreamReader(resourceAsStream))){
String line;
final StringBuilder sb = new StringBuilder();
while ((line=reader.readLine())!=null){
sb.append(line);
}
return sb.toString();
} catch (IOException e) {
e.printStackTrace();
return null;
}
//圖片上傳
case "uploadimage":
if(upfile!=null){
//todo 具體保存文件邏輯(偽代碼)請?zhí)鎿Q自己的邏輯
FileInfo fileInfo = uploadService.upload(upfile)
final HashMap<Object, Object> map = new HashMap<>(4);
map.put("state","SUCCESS");
map.put("title",fileInfo.getOriginalName());
map.put("original",fileInfo.getOriginalName());
map.put("url",fileInfo.getUrl());
return map;
}
}
}
Q1:這樣就可以了嗎立磁？呈队？？不行唱歧，發(fā)現(xiàn)還是不能上傳宪摧，還是提示插件加載失敗,原因是什么呢？問題在前端的編輯器資源包中ueditor.all.js颅崩，因為我的springboot是支持跨域請求的几于，而ueditor.all.js中有個加載配置請求，跨域的話是使用jsonp來請求的沿后，而我們的接口又不支持jsonp請求沿彭，所以這個接口訪問config配置的時候加載失敗，找到ueditor.all.js,改一下邏輯,將jsonp請問標識改成fasle尖滚，讓ajax發(fā)起非jsonp請求即可
ok喉刘，再刷新頁面看看瞧柔，圖片上傳插件就加載成功了,至此上傳圖片的配置就完成了，當然了其他的視頻睦裳、附件等也是同理只是不同的action標識而已造锅，如果方便的話都改成統(tǒng)一的action名稱就可以了，單獨處理就判斷action名稱就可以了廉邑。
Q2:加了接口了哥蔚，改了serverUrl,還是顯示加載插件失敗，需要在組件里面要加這個配置 :editorDependencies="['ueditor.config.js','ueditor.all.js']" 這個配置必須加上蛛蒙，否則不會執(zhí)行ajax獲取配置的請求,確保訪問action=config的時候返回config.json的內容即可糙箍。
Q3:上傳的圖片設置img標簽圖片寬度自適應,網(wǎng)上很多人說在靜態(tài)資源包themes下的iframe.css里面加樣式
img{width:100%}
的確，加了之后上傳圖片是會自動適應編輯器了牵祟，但是圖片本身是沒有樣式的深夯，放到前端展示還是會有問題，除非自己單獨設置img的樣式课舍，不然還是會不適配塌西。那怎么自動給img標簽加上style樣式呢，還是在ueditor.all.js里面修改
修改1:
修改2 :
loader.setAttribute('style','max-width:100%');
這樣就可以了筝尾，上傳圖片成功后,img標簽會自動加style屬性捡需，這樣富文本中的圖片在前端展示的時候就會自適應了，不需要額為加css控制了筹淫。
總結: 本篇文章主要通過以上兩步站辉，介紹了UEditor-plus的集成以及相關問題的處理，這就是我這使用UEditor-plus編輯器過程會遇到的問題以及處理方法损姜，當然這不是唯一的饰剥，得具體問題具體分析。希望能夠幫助到有需要的朋友摧阅，有問題歡迎留言交流汰蓉，喜歡我的文章記得關注我哦??！
