更新记录
1.1(2022-04-02) 下载此版本
修复一些体验上的问题
1.0(2020-04-18) 下载此版本
无
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
jin-edit 基于editor的富文本编辑器
兼容性
这是一个uni-app的通用组件,兼容微信小程序端、安卓端、ios端(未测试)、H5端。作者因没有ios设备无法对ios端进行测试,其他端测试无问题。
微信小程序 | APP | H5 |
---|---|---|
√ | √ | √ |
我的HbuilderX版本2.6.7,不同的版本可能会造成不兼容的问题。
使用方式
- 将此组件进入你的项目中的 /components/ 目录中
-
在某个页面中使用该插件
-
在
script
中引用组件import jinEdit from '../../components/jin-edit/jin-edit.vue'; export default { data() { return { } }, components: { jinEdit }, methods: { // 点击发布 editOk(res) { console.log(res); } } }
- 在
template
中使用组件<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jinEdit>
-
Demo
参数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
showImgSize | Boolean | false | 点击图片时显示图片大小控件 |
showImgToolbar | Boolean | false | 点击图片时显示工具栏控件 |
showImgResize | Boolean | false | 点击图片时显示修改尺寸控件 |
placeholder | String | '' | 编辑器占位符 |
uploadFileUrl | String | '#' | 图片上传的服务器地址 |
fileKeyName | String | 'file' | 图片上传时的name |
header | Object | - | 图片上传http请求的header |
html | String | - | 初始化的html |
height | String | - | 组件高度 |
方法
方法名 | 参数 | 说明 |
---|---|---|
editOk | e={html,text,delta,isPublic} | 点击发布按钮触发 |
以上
如何解决编辑器聚焦时,底部操作栏无法附在软键盘上方的问题
可在pages.json中加入如下配置:
"globalStyle": {
"app-plus": {
"softinputMode": "adjustResize"
}
},