在管理后臺(tái)系統(tǒng)中，這次使用的是百度編輯器
首先在vue的目錄結(jié)構(gòu)static下面甲捏，把從網(wǎng)上下載的UE解壓放進(jìn)去，如圖
然后在main.js中引入
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'
在需要用的vue組件中寫入
<div class="editor">
<script id="editor" type="text/plain"></script>
<div class="uploadDal">
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadImgs">插入圖片</el-button>
<el-upload
? ? ? class="upload-demo"
? ? ? :action="imgUrl"
? ? ? :multiple=true? ? ? :with-credentials="true"
? ? ? :on-exceed="handleExceed"
? ? ? :on-preview="handlePreview"
? ? ? :on-remove="handleRemove"
? ? ? :on-success="handleMultSuccess2"
? ? ? :on-error="handleError"
? ? ? :before-upload="beforeUpload2"
? ? ? :file-list="fileList3"
? ? ? list-type="picture">
<el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>
</div>
</div>
產(chǎn)品要求目前只需要展示這幾個(gè)功能，其次為了更簡(jiǎn)單的使用編輯器钾唬，所在的環(huán)境又是elementui，所以上傳圖片直接借用element ui 里面的上傳組件侠驯，結(jié)合七牛云抡秆，這樣更利于操作。
editor:null,
config: {
//可以在此處定義工具欄的內(nèi)容
? toolbars: [
['fullscreen','','undo','redo','bold','italic','insertimg']
],
autoHeightEnabled:true,
autoFloatEnabled:true,
initialContent:'請(qǐng)輸入內(nèi)容',//初始化編輯器的內(nèi)容
? autoClearinitialContent:true,//是否自動(dòng)清除編輯器初始內(nèi)容
? initialFrameWidth:800,
initialFrameHeight:450,
UEDITOR_HOME_URL:'./static/UE/'
},
以上編輯器的配置放在data()里面
mounted() {
// 初始化UE
? const _this =this;
this.editor =UE.getEditor('editor',this.config);// 初始化UE
? baidu.editor.commands['insertimg'] = {
execCommand:function () {
let $el =document.querySelectorAll('.editor .uploadDal')[0] ;
$el.style.display =$el.style.display=="none"?'block':"none";
return true;
},queryCommandState:function () {
}
};
},
mounted進(jìn)行初始化設(shè)置
同時(shí)多加一個(gè)鉤子函數(shù)
destroyed() {
this.editor.destroy();
},
上傳圖片
imgUrl：是后臺(tái)給的上傳圖片到七牛云的地址
beforeUpload2(file){
const isJPG =/^image\/\w+$/.test(file.type)
return isJPG
},
上傳圖片之前控制它的圖片格式?
handleMultSuccess2(file, fileList) {
let url = fileList.response.data.url + fileList.response.data.fileName;
this.fileList4.push(url);
}
//fileList4里面存放所有圖片
下回主要展示一下圖片和文字 一起結(jié)合 起來(lái)上傳吟策，不錯(cuò)位
下面是點(diǎn)擊插入圖片綁定的事件
uploadImgs() {
var $this =this;
this.fileList4.forEach(
function(v,i,arr){
$this.editor.execCommand('insertHtml',"<img style='max-width:90%!important;display: block!important;' src='"+v+"' />")
})
let $el =document.querySelectorAll('.editor .uploadDal')[0] ;
$el.style.display ="none";
this.fileList4 = [];
},
this.editor.getContent();
//<p>這是一個(gè)測(cè)試<img src="http:/XXXX/XXXXX"/>看看能不能成功<img src="http://XXXXX/XXXXX"/></p>
到這邊就全部完成 了儒士。
下面是對(duì)element ui 上傳組件的詳細(xì)步驟
其中包含上傳一張圖片 和多張圖片
這個(gè)是上傳一張圖片
<el-upload
? class="avatar-uploader"??
? :action="imgUrl"??
? :show-file-list="true"
? :with-credentials="true"
? :on-success="handleSuccess"
? :on-error="handleError"
? :before-upload="beforeUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
?:action="imgUrl" //這個(gè)是后臺(tái)給你調(diào)的關(guān)于七牛云的接口
? :show-file-list="true"http://上傳文件之后是否展示文件名字
? :with-credentials="true"http://本地調(diào)試是否允許攜帶cookie，可以跨域
? :on-success="handleSuccess"http://上傳成功之后返回的信息
? :on-error="handleError"http://上傳錯(cuò)誤返回的信息
? :before-upload="beforeUpload"http://上傳之前要做什么
????imageUrl里面綁定的就是圖片的地址
handleSuccess(res, file) {
????this.imageUrl = res.data.url + res.data.fileName;
//這個(gè)res其實(shí)就是調(diào)接口返回的值
},
handleError() {
this.$message.error('網(wǎng)絡(luò)有誤請(qǐng)稍后再試～');
},
beforeUpload(file) {?
//這個(gè)根據(jù)需求圖片要為jpg的格式檩坚，大小要小于2M着撩。
const isJPG =/^image\/\w+$/.test(file.type)
const isLt2M = (file.size /1024 /1024 <2) && (file.size /1024 >200);
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('圖片大小控制在200k-2M之間!');
}
return isJPG &&isLt2M;
},
上傳多張圖片
<el-upload
? class="upload-demo"
? :action="imgUrl"
? :multiple=true? :limit=9? :with-credentials="true"
? :on-exceed="handleExceed"
? :on-preview="handlePreview"
? :on-remove="handleRemove"
? :on-success="handleMultSuccess"
? :on-error="handleError"
? :before-upload="beforeUpload"
? :file-list="fileList2"
? list-type="picture">
<el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>
? :multiple=true? :limit=9? //多張上傳，限制九張
? :on-exceed="handleExceed" //文件超出個(gè)數(shù)限制時(shí)的鉤子
? :on-preview="handlePreview"http://點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子
? :on-remove="handleRemove"http://刪除文件
? :on-success="handleMultSuccess" //在這個(gè)里面要把每次上傳的圖片地址都存進(jìn)一個(gè)數(shù)組里面
handleMultSuccess(file, fileList) {
let url = fileList.response.data.url + fileList.response.data.fileName;
this.fileList.push(url);
},
最后fileList里面拿到的就是上傳多張圖片的地址
這是時(shí)隔一段時(shí)間寫的效床，只記得填了一些坑睹酌，但是不記得哪個(gè)代碼填了哪個(gè)坑，剩檀，所以就把完整的寫下來(lái)了憋沿。
