先判断用户有没有写标题
用户写了内容才允许提交
在输入框中对data中定义的artObj进行双向绑定，当用户在刷入框中输入了值，就保存到artObj中，这样，在按钮中对这个值的title属性的长度进行判断，如果有值，就表示用户写了标题，就将按钮的状态置为可用
<input type="text" v-model="artObj.title" placeholder="请输入标题" placeholder-class="placeholderClass"/>
<u-button type="primary" text="确定发表" :disabled="!artObj.title.length"></u-button>
// 用户提交内容
artObj:{
title:"",
content:""
}
获取内容
当用户输入内容后，点击按钮，需要获取到用户输入的内容 文档位置： uniapp.dcloud.net.cn/api/media/e…
这个方法是当用户点击按钮提交内容时用，所以给按钮加一个点击事件 然后在点击事件中，通过上下文调用获取用户输入内容的方法
<u-button @click="onSubmit" type="primary" text="确定发表" :disabled="!artObj.title.length"></u-button>
// 点击按钮 提交内容
onSubmit(){
this.editorCtx.getContents({
success:res=>{
console.log(res);
}
})
},
这是控制台返回的getContents方法的返回值结果
里面包含了html格式的内容和text格式的内容
如果是添加图片，文件能保存到云存储，但是无法渲染到页面，还是跨域问题
在用户提交的信息中，截取正文的前80个字符作为摘要，先在data中添加一个变量来保存摘要
// 用户提交内容
artObj:{
title:"",
content:"",
description:""
}
// 点击按钮 提交内容
onSubmit(){
this.editorCtx.getContents({
success:res=>{
// 截取正文的前50个字符作为摘要
this.artObj.description = res.text.slice(0,80)
console.log(this.artObj);
}
})
},
保存的内容是带图文混排的html格式的，图片是url地址，需要用正则来把url地址从一堆html内容中信息匹配出来
正则单独写在一个文件里，在项目根目录下新建一个文件夹utils，把正则文件放在这里面
utils这个文件就是这个项目的公共的库，用来存放一些js文件
在tools文件里写一个公共类，里面放正则表达式
//获取富文本内的图片url地址
// 传入一段富文本,num限制个数
export function getImgSrc(richtext,num=3) {
// 保存图像的src地址
let imgList = [];
// 通过全局检索替换
richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
// 把结果push到上面的数组中
imgList.push(capture);
});
// 截取前三个
imgList=imgList.slice(0,num)
return imgList;
}
通过import在页面中引入文件
<script>
import {getImgSrc} from "@/uatils/tools.js"
将要提交的内容保存到data中，这些信息就是接下来用来做首页信息的
// 点击按钮 提交内容
onSubmit(){
this.editorCtx.getContents({
success:res=>{
// 截取正文的前50个字符作为摘要
this.artObj.description = res.text.slice(0,80)
this.artObj.content = res.html;
// 通过引入的正则表达式方法截取出图片url
// 第二个参数是默认3,获取3张图的url,这里如果是3可以不写,其他的数就需要写
this.artObj.picurls=getImgSrc(res.html);
console.log(this.artObj);
}
})
},
