在管理后臺系統中，這次使用的是百度編輯器
首先在vue的目錄結構static下面，把從網上下載的UE解壓放進去，如圖
然后在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">點擊上傳</el-button>
</el-upload>
</div>
</div>
產品要求目前只需要展示這幾個功能，其次為了更簡單的使用編輯器，所在的環境又是elementui，所以上傳圖片直接借用element ui 里面的上傳組件，結合七牛云，這樣更利于操作。
editor:null,
config: {
//可以在此處定義工具欄的內容
? toolbars: [
['fullscreen','','undo','redo','bold','italic','insertimg']
],
autoHeightEnabled:true,
autoFloatEnabled:true,
initialContent:'請輸入內容',//初始化編輯器的內容
? autoClearinitialContent:true,//是否自動清除編輯器初始內容
? 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進行初始化設置
同時多加一個鉤子函數
destroyed() {
this.editor.destroy();
},
上傳圖片
imgUrl：是后臺給的上傳圖片到七牛云的地址
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里面存放所有圖片
下回主要展示一下圖片和文字 一起結合 起來上傳，不錯位
下面是點擊插入圖片綁定的事件
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>這是一個測試<img src="http:/XXXX/XXXXX"/>看看能不能成功<img src="http://XXXXX/XXXXX"/></p>
到這邊就全部完成 了。
下面是對element ui 上傳組件的詳細步驟
其中包含上傳一張圖片 和多張圖片
這個是上傳一張圖片
<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" //這個是后臺給你調的關于七牛云的接口
? :show-file-list="true"http://上傳文件之后是否展示文件名字
? :with-credentials="true"http://本地調試是否允許攜帶cookie，可以跨域
? :on-success="handleSuccess"http://上傳成功之后返回的信息
? :on-error="handleError"http://上傳錯誤返回的信息
? :before-upload="beforeUpload"http://上傳之前要做什么
????imageUrl里面綁定的就是圖片的地址
handleSuccess(res, file) {
????this.imageUrl = res.data.url + res.data.fileName;
//這個res其實就是調接口返回的值
},
handleError() {
this.$message.error('網絡有誤請稍后再試～');
},
beforeUpload(file) {?
//這個根據需求圖片要為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">點擊上傳</el-button>
</el-upload>
? :multiple=true? :limit=9? //多張上傳，限制九張
? :on-exceed="handleExceed" //文件超出個數限制時的鉤子
? :on-preview="handlePreview"http://點擊文件列表中已上傳的文件時的鉤子
? :on-remove="handleRemove"http://刪除文件
? :on-success="handleMultSuccess" //在這個里面要把每次上傳的圖片地址都存進一個數組里面
handleMultSuccess(file, fileList) {
let url = fileList.response.data.url + fileList.response.data.fileName;
this.fileList.push(url);
},
最后fileList里面拿到的就是上傳多張圖片的地址
這是時隔一段時間寫的，只記得填了一些坑，但是不記得哪個代碼填了哪個坑，，所以就把完整的寫下來了。
