//更新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(在移动端使用)的更多相关文章

  1. Odoo Website 替换 Summernote 为第三方富文本编辑器

    随着用odoo的人越来越多,奇葩的需求也是越来越多.... 这不,有同学就想替换掉website forum里边的summernote控件,花了点时间研究了一下,先说结论:替换是可行的. 先上替换之后 ...

  2. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  3. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. vue elementui弹框内 富文本编辑器的使用,及踩坑

    最近vue项目中遇到弹框内使用富文本编辑器,遇到最大的问题是,在打开弹框后才能创建富文本编辑器,并且只能创建一次,多次点击弹框,报错: Error in v-on handler: "Err ...

  6. 【重点突破】—— React实现富文本编辑器

    前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.   一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...

  7. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  8. react富文本编辑器

    首先安装两个插件 yarn add react-draft-wysiwyg draftjs-to-html --save 使用的代码如下 import React from 'react' impor ...

  9. 【React】富文本编辑器 清空文本内容 获取HTML

    富文本编辑器  React  传入 import React,{Component } from 'react'; import { Card, Button, Table, Form, Select ...

  10. React+wangeditor+node富文本处理带图片上传

    最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要 ...

随机推荐

  1. 【开发宝典】Java并发系列教程(四)

    作者:京东零售 刘跃明 Monitor概念 Java对象的内存布局 对象除了我们自定义的一些属性外,还有其它数据,在内存中可以分为三个区域:对象头.实例数据.对齐填充,这三个区域组成起来才是一个完整的 ...

  2. 学习Java Day27

    今天在B站学习了什么是清单文件以及可执行的JAR文件,和不同版本下的JAR文件的差异

  3. C++练习9 函数的重载

    函数的重载是用一个函数名定义多个函数,但是这些同名函数的形参列表(参数个数,类型,顺序)必须不同. 函数重载的规则: 1.函数名称必须相同. 2.参数列表必须不同(个数不同.类型不同.参数排列顺序不同 ...

  4. 软件教程 | Jupyter&stata之stata_kernel攻略

    ![](http://mdimg.yxj1010.top/xlbxs_ydt2.png) 目录: 目录 一.什么是stata_kernel 1. stata_kernel简介 2. 为什么要使用sta ...

  5. 记一次google手机恢复出厂设置到root抓包全过程

    前言 开始因为手机密码忘记了,不想重置,不然找店家root的工具都没了,自己也不会google root的操作,之前听说还挺麻烦的.操作了半天好了,确实是挺麻烦的,做个记录. 一.恢复出厂设置 还原教 ...

  6. LeetCode-380 O(1)时间插入、删除和获取随机元素

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/insert-delete-getrandom-o1 题目描述 实现RandomizedSet 类 ...

  7. [引擎开发] 深入GPU和渲染优化(基础篇)

    https://blog.csdn.net/ZJU_fish1996/article/details/109269448

  8. Mogeaver 连接数据库

    下载安装Mogeaver是一款开源软件,下载地址如下:https://docs.mogdb.io/zh/mogdb/v3.0/mogeaver-release-notes 根据您的操作系统选择相应的安 ...

  9. 苹果iPhone 日历查询功能异常

    2022年底苹果发布了IOS16.2版本系统,此时间段内所有升级的用户都将会出现日历查询功能失效,字符错乱等诸多问题. 与客服沟通后告知,日历记录内容查询是没有时间限制的,可以无限期查询全部内容,于是 ...

  10. Ubuntu离线安装 MySQL 5.7

    来源:https://www.ngui.cc/article/show-581968.html?action=onClick 一.所需环境 操作系统:Ubuntu 20.04数据库:MySQL 5.7 ...