依賴js檔案：
html 文字內容：
相關**
上傳**
提交js指令碼內容：
一、npm 安裝
vue-quill-editor
二、在main.js中引入
import vuequilleditor from 'vue-quill-editor'
vue.use(vuequilleditor)
api事件，定義乙個隱藏的
input
當前已輸入
}個字元，您還可以輸入
}個字元。
插入中,請稍候
">
點選上傳
css部分：
.quill-editor
}.limit
}.ql-snow .ql-editor img
.ql-editor .ql-video
js部分：
import vue from 'util/vueext'
import from 'vue-property-decorator'
import * as template from './editor.vue'
import * as quill from 'quill' // 引入編輯器
const staticdomain = ''
const statvideo = ''
@component()
export default class editor extends vue // 編輯器選項
addrange: any = new array()
uploaddata = {}
photourl = '' // 上傳位址
fullscreenloading = false
$refs:
get nowlength()
get surpluslength() else
}// 上傳七牛的
actiond
位址 get qnlocation()
return ''
}// 上傳前獲得資料
token
資料 qnupload(file) _$.$`, token: res}})
return this.api.getvideoqntoken().then(res => _$.$`, token: res}})
}}// 上傳之前調取的函式 beforeupload(file)
// 上傳成功** 插入到編輯器中 upscuccess(e, file, filelist) else if (this.uploadtype === 'video')
if (url != null && url.length > 0) else 插入失敗`)}
this.$refs['upload'].clearfiles() // 插入成功後清除
input
的內容 }
// 點選
icon
觸發事件 imghandler(state)
this.uploadtype = 'image'
}icon
觸發事件 videohandler(state)
this.uploadtype = 'video'
}// 編輯器游標離開 將編輯器內容發射給父元件 oneditorblur(editor)
// 編輯器獲得游標 oneditorfocus(editor)
// 編輯器文字發生變化 oneditorchange()
this.$emit('getvalue', this.content)
}// 清除編輯器內容 callmethod()
// 為
icon
繫結事件
getmodule
為編輯器的內部屬性
this.$refs.myquilleditor.quill.getmodule('*******').addhandler('image', this.imghandler)
icon
繫結事件 }
}
vue 檔案上傳
class upload demo ref upload action doupload limit 1 file list filelist before upload beforeupload slot trigger size small type primary 選取檔案el button ...
Vue上傳檔案
file 構造器建立新的file物件例項 語法 let myfile newfile bits,name options 示例 let myfile newfile foo foo.txt blob 建構函式返回乙個新的blob物件。blob的內容由引數陣列中給出的值的串聯組 語法 let ablo...
vue上傳檔案
批量上傳 點選上傳按鈕時觸發的事件,開啟檔案選擇框 clickuploadspider 選完檔案後觸發的 事件 async uploadspider e uploadfile url,e 參考 設定引數 let formdata new formdata array.from files forea...