引入插件 然后使用
<piaoyiEditor :values="meetingContent" :maxlength="3000" @changes="saveContens" :readOnly="false" :photoUrl="photoUrl" :api="api" :name="name"/>
import piaoyiEditor from '../components/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
components: {
piaoyiEditor
},
data() {
return {
photoUrl: this.$Url, //服务器图片域名或者ip
api: '/common/upload', //上传
meetingContent:""
}
},
methods: {
saveContens(e) {
this.form.meetingContent = e.html;
},
}
事件说明
使用上传图片功能时需要注意查看代码里面的uni.uploadFile方法,因为它的返回值取决于自己后端接口的值,所以可以根据实际情况就行更改即可
事件名 | 返回值 | 描述 |
---|---|---|
@saveContens | {html: html片段, length: html长度} | 文本框内容回调 |
配置参数
参数名称 | 默认值 | 描述 |
---|---|---|
maxlength | 300 | 输入最大长度 |
readOnly | false | 是否只读 |
api | 空 | 上传图片接口地址 |
photoUrl | 空 | 服务器图片域名或者ip |
name | 'file' | 上传图片接口的key |
values | '' | 富文本编辑器默认值 |
插件路径:https://download.csdn.net/download/qq_42717015/88557070