更新记录
1.0.0(2025-02-08)
下载此版本
目前已上线稳定运行,已修复已知的诸多缺陷,请放心下载使用,插件使用文档后续更新
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
× |
× |
√ |
√ |
√ |
√ |
√ |
这个是基于uni-app官方editor的api封装的组件,专为移动而开发,支持一个页面使用单个或者多个。目前已上线稳定运行,已修复已知的诸多缺陷,请放心下载使用,如果对你有帮助,可以赏杯奶茶,谢谢。
插件文档等有空了再完善
组件名称:editor-gx、本组件依赖uView ui组件库,运行前请 npm install 安装依赖
下面是一个基本使用示例
<template>
<view style="padding: 40rpx;">
<view v-for="(item,index) in editorOptionsList" :key="item.id">
<view class="grad">{{item.title}}</view>
<editor-gx @focus='editorFocus'
@editorChange='editorChange'
:content='item.content'
:editorId='item.id'
:toolIndex="item.id == currentId ? 999 : 0"
/>
</view>
</view>
</template>
<script>
import editorGx from '@/components/editor-gx/editor-gx.vue'
export default {
components: {editorGx},
data() {
return {
editorOptionsList: [{
id: "editorId",
title: "本周工作总结",
content: '<p>哈哈。我是本周工作<b>总结</b>内容</p>',
}],
currentId: "", //当前聚焦的编辑器id 默认空 聚焦时自动赋值
}
},
onLoad() {},
methods: {
// 编辑器聚焦时触发
editorFocus(currentId) {
this.currentId = currentId;
uni.hideTabBar()
},
//实时获取当前输入富文本内容 e富文本内容 、 currentId当前聚焦的输入框ID
editorChange(currentId, e) {
const content = e.detail.html;
const currentItem = this.editorOptionsList.find(item => item.id == currentId);
currentItem.content = content;
console.log(this.editorOptionsList)
}
}
}
</script>
<style lang="scss" scoped>
.grad {
background: #eee;
line-height: 35px;
margin: 10px 0;
padding-left: 10px;
border-radius: 8px;
font-size: 28rpx;
}
</style>