在b站跟着咸虾米老师学的

editor组件

<template><view class="edit"><view class="title"><input type="text" v-model="artObj.title" placeholder="请输入完整的标题" placeholder-class="placeholderClass"></view><view class="content"><editor			class="myEdit"placeholder="写点什么吧~~"show-img-sizeshow-img-toolbarshow-img-resize@ready="onEditReady"@focus="onFocus"@statuschange="onStatuschange"></editor></view><view class="btnGroup"><u-button @click="onSubmit" type="primary" text="确认发表" :disabled="!artObj.title.length"></u-button></view><view class="tools"v-if="toolShow"><view class="item" @click="clickHead"><text class="iconfont icon-zitibiaoti" :class="headShow ? 'active' : ''"></text> </view><view class="item" @click="clickBold"><text class="iconfont icon-zitijiacu" :class="boldShow ? 'active': ''"></text> </view><view class="item" @click="clickItalic"><text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text> </view><view class="item" @click="clickDivider"><text class="iconfont icon-fengexian"></text> </view><view class="item" @click="clickInsertImage"><text class="iconfont icon-charutupian"></text> </view><view class="item" @click="editOk"><text class="iconfont icon-duigou_kuai"></text> </view></view></view>
</template><script>import {getImgSrc,getProvince} from "@/utils/tools.js"	const db=uniCloud.database()export default {		data() {return {toolShow:false,headShow:false,boldShow:false,italicShow:false,artObj:{title:"",content:"",description:"",picurls:"",province:""}};},		onLoad(){getProvince().then(res=>{				this.artObj.province=res})},methods:{//点击提交按钮onSubmit(){this.editorCtx.getContents({success:res=>{this.artObj.description=res.text.slice(0,80);this.artObj.content=res.html;this.artObj.picurls=getImgSrc(res.html)uni.showLoading({title:"发布中..."})						this.addData();}})},addData(){db.collection("quanzi_article").add({...this.artObj}).then(res=>{					uni.hideLoading();uni.showToast({title:"发布成功"})setTimeout(()=>{uni.reLaunch({url:"/pages/index/index"})},800)})},//初始化onEditReady(){uni.createSelectorQuery().in(this).select('.myEdit').fields({size:true,context:true},res=>{					this.editorCtx=res.context}).exec()},checkStatus(name, detail, obj) {if (detail.hasOwnProperty(name)) {this[obj] = true;					} else {this[obj] = false;}},// 当样式发生改变的时候onStatuschange(e){let detail=e.detailthis.checkStatus("header",detail,"headShow");this.checkStatus("bold",detail,"boldShow");this.checkStatus("italic",detail,"italicShow");				},//添加图像clickInsertImage(){uni.chooseImage({					success:async res=>{uni.showLoading({title:"上传中请稍后",mask:true})for (let item of res.tempFiles) {let suffix = item.path.substring(item.path.lastIndexOf("."));let randomName=Date.now() + "" + String( Math.random() ).substr(3,6)+suffixlet res= await uniCloud.uploadFile({filePath:item.path,cloudPath:item.name || randomName})this.editorCtx.insertImage({src:res.fileID})							}uni.hideLoading()}})},//点击工具条的确认editOk(){this.toolShow=	false;},//加粗clickBold(){this.boldShow=!this.boldShowthis.editorCtx.format("bold")},//设置倾斜clickItalic(){this.italicShow=!this.italicShow;this.editorCtx.format("italic")},//添加大标题clickHead(){this.headShow=!this.headShowthis.editorCtx.format("header",this.headShow ? 'H2':false)},//添加分割线clickDivider(){this.editorCtx.insertDivider();},//离开焦点onFocus(){this.toolShow=true}}}
</script><style lang="scss">
/deep/ .ql-blank::before{font-style: normal;color:#e0e0e0;
}.edit{padding:30rpx;.title{input{height: 120rpx;font-size: 46rpx;border-bottom:1px solid #e4e4e4;margin-bottom:30rpx;color:#000;}.placeholderClass{color:#e0e0e0;}}.content{.myEdit{height: calc(100vh - 500rpx);margin-bottom:30rpx;}		}.tools{width: 100%;height: 80rpx;background: #fff;border-top:1rpx solid #f4f4f4;position: fixed;left:0;bottom:0;display: flex;justify-content: space-around;align-items: center;.iconfont{font-size: 36rpx;color:#333;&.active{color:#0199FE}}}
}
</style>

tool.js

//获取富文本内的图片url地址
export function getImgSrc(richtext,num=3) {let imgList = [];richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {imgList.push(capture);});imgList=imgList.slice(0,num)return imgList;
}//向外导出省份
export function getProvince(){return new Promise((resolve,reject)=>{let historyProvince=uni.getStorageSync("historyProvince");if(historyProvince){			if((Date.now() - historyProvince.time) > 1000*60*60){				getIp().then(res=>{resolve(res)}).catch(err=>{reject(err)})	}else{				resolve(historyProvince.province);}}else{			getIp().then(res=>{resolve(res)}).catch(err=>{reject(err)})		}	})
}//获取所在省市
function getIp(){return new Promise((resolve,reject)=>{uni.request({url:"https://restapi.amap.com/v3/ip?key=5dc28e6573b0d00e3fe7141156d18c88",success:res=>{				let str=""				typeof(res.data.province) == "string" ? str=res.data.province :str="火星"resolve(str)let obj={province:str,time:Date.now()}uni.setStorageSync("historyProvince",obj);				},fail:err=>{reject(err)}})})	
}