react native 第三方富文本编辑器 wxik/react-native-rich-editor(在移动端使用)
//更新2021年8月23日
(1)wxik/react-native-rich-editor 个人认为功能比较全,推荐使用

关于使用的案例,官网上有,我直接粘贴我遇到的几个问题
1. 软键盘弹出时,不把RichToolbar顶上去的解决方法
// 在android/app/src/mian/AndroidManifest.xml
android:windowSoftInputMode="stateAlwaysHidden|adjustPan"`将这个替换成`android:windowSoftInputMode="adjustResize"
2. ScrollView没有向上滚动的原因是它没产生滚动条,那么如何让其产生滚动条呢
答:给ScrollView外层添加一个View,给View设置一个固定高度(事实上外层View有两个值,RichEditor获得焦点时和没获得焦点),那么如何设置这两个值呢,需要通过.keyboard软键盘的显示和隐藏状态
3. 解决ScrollView向上滚动问题
<View style={{height: this.state.scrollViewHeight}}>
<ScrollView
ref={(r)=>this.scrollRef = r}
style={{backgroundColor:"#fff",flex:1}}
>
<RichEditor
ref={(r) => this.richtext = r}
placeholder="写下来,思考才会越来越清晰"
editorInitializedCallback={() => this.onEditorInitialized()}
onChange = {e=>this.state.htmlText=e}
initialHeight={this.state.scrollViewHeight}
onCursorPosition={(currentHeight)=>this.handleScroll(currentHeight)}
onFocus={(a)=>this._getFoucs(a)} //这里我暂时,没法获得“焦点位置的当前高度”
/>
< /ScrollView>
</view>
handleScroll(currentHeight){
this.scrollRef.scrollTo({y: currentHeight - 30, animated: true});
}
4. 插入图片,我使用的是 react-native-image-picker,它目前使用时有问题
我的react native版本:0.63.4 ,安装完这个包后,运行时报错,项目启动不了,报错信息如下
Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:react-native-image-picker]
解决方法:其实react-native-image-picker 最低要求是21的版本,那么我直接在build.gradle中,将minSdkVersion 修改为21即可
5. 点击某个位置时,ScrollView无法准确滚动到那个位置
答:未完成,因为onFocus属性的回调函数的参数,没有当前位置的高度(未解决)
6. 插入图片后能否自动换行
答:因为不换行,只会显示图片的一部分,换行后,一切才显示正常(未解决)。
另一个富文本编辑器 react-native-cn-richtext-editor
https://github.com/imnapo/react-native-cn-richtext-editor

react native 第三方富文本编辑器 wxik/react-native-rich-editor(在移动端使用)的更多相关文章
- Odoo Website 替换 Summernote 为第三方富文本编辑器
随着用odoo的人越来越多,奇葩的需求也是越来越多.... 这不,有同学就想替换掉website forum里边的summernote控件,花了点时间研究了一下,先说结论:替换是可行的. 先上替换之后 ...
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- vue elementui弹框内 富文本编辑器的使用,及踩坑
最近vue项目中遇到弹框内使用富文本编辑器,遇到最大的问题是,在打开弹框后才能创建富文本编辑器,并且只能创建一次,多次点击弹框,报错: Error in v-on handler: "Err ...
- 【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
- 富文本编辑器TinyMCE的使用(React Vue)
富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...
- react富文本编辑器
首先安装两个插件 yarn add react-draft-wysiwyg draftjs-to-html --save 使用的代码如下 import React from 'react' impor ...
- 【React】富文本编辑器 清空文本内容 获取HTML
富文本编辑器 React 传入 import React,{Component } from 'react'; import { Card, Button, Table, Form, Select ...
- React+wangeditor+node富文本处理带图片上传
最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要 ...
随机推荐
- Pulsar负载均衡原理及优化
前言 前段时间我们在升级 Pulsar 版本的时候发现升级后最后一个节点始终没有流量. 虽然对业务使用没有任何影响,但负载不均会导致资源的浪费. 和同事沟通后得知之前的升级也会出现这样的情况,最终还是 ...
- JSONPath 处理特殊字符
JSONPath 处理特殊字符 先来看看jsonpath的基础 语法 $ 表示文档的根元素 @ 表示文档的当前元素 .node_name 或 ['node_name'] 匹配下级节点 [index] ...
- Typora下载与安装 0.9.75版本
Typora下载与安装 效果图 一.简介 一款 Markdown 编辑器和阅读器 (0.9.75 版本 不需购买) 二.下载 下载地址:Typora 三.安装 1.下载文件后双击安装 2. 选择存放的 ...
- RabbitMQ.Client.Exceptions.BrokerUnreachableException:“None of the specified endpoints were reachabl
1.问题复现 RabbitMQ新建账户进行具体操作时报如题错误,没有一个指定的端点是可到达的 2.解决办法 ① 控制台命令进入sbin所在文件夹 ② 输入命令设置权限 rabbitmqctl set_ ...
- 多重背包问题 II
有 NN 种物品和一个容量是 VV 的背包. 第 ii 种物品最多有 sisi 件,每件体积是 vivi,价值是 wiwi. 求解将哪些物品装入背包,可使物品体积总和不超过背包容量,且价值总和最大.输 ...
- 叠堆柱状图(带折线版+2y轴)
叠堆柱状图(带折线+2y轴) 代码 var chartDom=document.getElementById("stackBarAddLine"); var myChart=ech ...
- 队列——queue的用法(及洛谷B3616)
队列的概念 在说队列之前,先回忆一下栈是什么,我们一般说栈是一个先进后出的数据结构,而队列就是先进先出的数据结构. 队列是定在表的一端进行插入,表的另一端进行删除. 通常,我们称进数据的一端为队尾,出 ...
- echart折线图异常多出一条连接线
开发背景:vue3父传子,父中调子组件echarts图表 问题:第一次进入数据图表正常,再次进入不更新图表数据的情况下,图表异常多出来一条开始到结尾的连接线 原因:上次数据没清空 解决:请求完接口后先 ...
- CF825F - String Compression
题意:压缩字符串,把字符串分成若干个子串,每个子串可以被压缩成"循环次数 \(+\) 循环节"的形式,求最小长度. dp 求 lcp 先 \(O(n^2)\) dp 求出所有后缀对 ...
- (五) Mysql 之锁详细篇
一.锁的分类1.范围:全局锁.表级锁.行级锁2.功能分类:共享锁.排它锁 二.数据库的全局锁 加锁:mysql> flush tables with read lock; 释放锁:mysql&g ...