wangEditor 有豐富的 API 和足夠的擴(kuò)展性，允許我們自定義開發(fā)菜單、模塊、插件等。在Vue、React中運(yùn)用也很方便。因此本文介紹下vue中富文本上傳圖片和視頻。
安裝引入后富文本有顯示上傳圖片按鈕，點(diǎn)擊上傳后會報(bào)沒有配置上傳地址的錯(cuò)誤，如下圖所示：
所以自定義上傳如下：
自定義上傳圖片/視頻
效果圖：
-
官網(wǎng)地址：https://www.wangeditor.com/v5/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
-
上傳圖片/視頻路徑配置代碼文章來源：http://www.zghlxwxcb.cn/news/detail-617347.html
data(){ // 自定義插入圖片/視頻 const handleUpload = async (file, insertFn) => { let form = new FormData(); form.append("file", file); form.append("dealType", this.$store.state.uploadData.dealType); let res = await uploadFile(form); //此方法返回上傳后的id // 最后插入圖片 insertFn方法參數(shù)(url, alt, href)，路徑根據(jù)自己的項(xiàng)目需求配置 insertFn(`${http://localhost:8183/}file/preview/${res}`, '', `${http://localhost:8183/}file/preview/${res}`) } //上傳圖片/視頻方法 const uploadFile = async (form) => { let res = await this.$http.file.upload(form); //此處換為自己的上傳接口地址 return res.data } //上傳的配置 const editorConfig = { placeholder: "請輸入內(nèi)容...", MENU_CONF: { uploadImage: { //上傳圖片配置 customUpload: handleUpload }, uploadVideo: { //上傳視頻配置 customUpload: handleUpload } } }; return{ editor: null, toolbarConfig: {}, content: "", editorConfig: editorConfig, mode: "default", content: "" } } -
運(yùn)用文章來源地址http://www.zghlxwxcb.cn/news/detail-617347.html
//先引入 <script> import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; </script> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="min-height: 500px" v-model="content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" /> </div>
到了這里，關(guān)于wangEditor富文本編輯器圖片/視頻上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
