### piaoyiEditor 富文本编辑器
**使用方法:**
```
<template>
<view class="richtext">
<piaoyiEditor :values="values" :maxlength="3000" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/>
<view class="">
{{txt}}
</view>
</view>
</template>
<script>
import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
export default {
data() {
return {
readOnly: false, //是否只读
photoUrl: 'http://test.com', //服务器图片域名或者ip
api: '/upload', //上传图片接口地址
txt: '',
name: 'file',
values: '<div>11111222</div>'
};
},
components: {
piaoyiEditor
},
methods: {
saveContens(e) {
this.txt = e.html
}
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '多功能富文本编辑器!',
path: '/pages/editor/editor'
}
},
onShareTimeline(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: '多功能富文本编辑器!'
}
}
}
</script>
<style lang="scss">
</style>
```
#### 事件说明
使用上传图片功能时需要注意查看代码里面的uni.uploadFile方法,因为它的返回值取决于自己后端接口的值,所以可以根据实际情况就行更改即可
| 事件名 | 返回值 | 描述 |
| :---------: | :----: | :------------: |
| @saveContens | {html: html片段, length: html长度} | 文本框内容回调 |
#### Prop
| 参数名称 | 默认值 | 描述 |
| -------- | ------------------------------ |
| maxlength| 300 | 输入最大长度 |
| readOnly | false | 是否只读 |
| api | 空 | 上传图片接口地址 |
| photoUrl | 空 | 服务器图片域名或者ip |
| name | 'file' | 上传图片接口的key |
| values | '' | 富文本编辑器默认值 |
### 注:近期收到使用用户反馈,存在以下两个问题(如有好的建议,期待私信,谢谢)
1、当组件在页面中部或者底部的时候,进入页面,页面会自动滚动到富文本编辑器的区域
属于正常现象;
官网文档有这么一句话:编辑器聚焦时页面会被上推,系统行为以保证编辑区可见;
作者建议这种情况,进入页面初始设置富文本编辑器为只读,然后页面滚动到一定距离的时候取消这个只读;
2、组件粘贴文字出现软键盘闪烁,导致文字粘贴不了
目前暂未发现解决方法,本插件是在官方的editor基础上开发的,这个组件存在这个问题;
经测试长按出现粘贴后,手不松开滑动到粘贴字样上就不会出现闪烁,然后松开手,点击粘贴就可以;
3、有些上传图片接口是需要token的,接口需要token的话可以在组件内搜索uni.uploadFile,加上headers头部参数
### 可接定制化组件开发
### 右侧有本人代表作小程序二维码,可以扫码体验
### 如使用过程中有问题或有一些好的建议,欢迎加QQ群互相学习交流:120594820
uni-app 富文本编辑 回显富文本和修改富文本!
需积分: 5 44 浏览量
2023-11-21
09:23:31
上传
评论
收藏 25KB ZIP 举报
小杨小杨、努力变强!
- 粉丝: 3003
- 资源: 31
最新资源
- 基于Android的学生信息管理2.rar
- 3e9ef566-ba13-47b0-a252-77aa9e4b040f8412130.apk
- 毕业设计基于SSM的房屋租赁系统源【源码+lw+部署+讲解】
- 基于Android男装出口管理系统的app.rar
- 工资表生成工资条Excel模版
- 位运算、状态压缩、枚举子集汇总.html
- C++毕业设计快递分拣机器人系统源码+论文文件+资料.zip
- 锐龙处理器 体质分析工具,体质越好越稳定,越容易超频 tool1007/Win V/F
- IOS Swift3 四种单例模式详解及实例《PPT文档》
- Swin-Unet网络预训练模型,swin-tiny-patch-window7-224.pth
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈