react native 第三方富文本编辑器 wxik/react-native-rich-editor（在移动端使用）
<p><span style="font-size: 18px"><strong>//更新2021年8月23日</strong></span><span style="font-size: 16px"> </span></p><p><span style="font-size: 16px">（1）wxik/react-native-rich-editor 个人认为功能比较全，推荐使用</span></p>
<p><span style="font-size: 16px"> </span></p>
<p><img src="https://img2020.cnblogs.com/blog/1723157/202007/1723157-20200721213019782-396758375.png"></p>
<p> </p>
<h3><span style="font-size: 16px">关于使用的案例，官网上有，我直接粘贴我遇到的几个问题</span></h3>
<p><span style="font-size: 16px; font-family: 宋体">1. <span class="md-plain md-expand">软键盘弹出时，不把RichToolbar顶上去的解决方法</span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在android/app/src/mian/AndroidManifest.xml</span>
android:windowSoftInputMode="stateAlwaysHidden|adjustPan"`将这个替换成`android:windowSoftInputMode="adjustResize"</pre>
</div>
<p> </p>
<p><span style="font-size: 16px; font-family: 宋体">2. ScrollView没有向上滚动的原因是它没产生滚动条，那么如何让其产生滚动条呢<span class="md-plain md-expand"><br></span></span></p>
<p><span style="font-size: 16px; font-family: 宋体">答：给ScrollView外层添加一个View，给View设置一个固定高度（事实上外层View有两个值，RichEditor获得焦点时和没获得焦点），那么如何设置这两个值呢，需要通过.keyboard软键盘的显示和隐藏状态</span></p>
<p> </p>
<p><span style="font-size: 16px; font-family: 宋体">3. 解决ScrollView向上滚动问题</span></p>
<div class="cnblogs_code">
<pre><View style={{height: this.state.scrollViewHeight}}></pre>
<pre><<span style="color: rgba(0, 0, 0, 1)">ScrollView
ref</span>={(r)=><span style="color: rgba(0, 0, 255, 1)">this</span>.scrollRef =<span style="color: rgba(0, 0, 0, 1)"> r}
style</span>={{backgroundColor:"#fff",flex:1<span style="color: rgba(0, 0, 0, 1)">}}
</span> >
<<span style="color: rgba(0, 0, 0, 1)">RichEditor
ref</span>={(r) => <span style="color: rgba(0, 0, 255, 1)">this</span>.richtext =<span style="color: rgba(0, 0, 0, 1)"> r}
placeholder</span>="写下来，思考才会越来越清晰"<span style="color: rgba(0, 0, 0, 1)">
editorInitializedCallback</span>={() => <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.onEditorInitialized()}
onChange </span>= {e=><span style="color: rgba(0, 0, 255, 1)">this</span>.state.htmlText=<span style="color: rgba(0, 0, 0, 1)">e}
initialHeight</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.scrollViewHeight}
onCursorPosition</span>={(currentHeight)=><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.handleScroll(currentHeight)}
onFocus</span>={(a)=><span style="color: rgba(0, 0, 255, 1)">this</span>._getFoucs(a)}<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">这里我暂时，没法获得“焦点位置的当前高度” </span>
/>
< /ScrollView> <br></view></pre>
<pre><span>handleScroll(currentHeight){
this.scrollRef.scrollTo({y: currentHeight - 30, animated: true<span>});
}</span></span></pre>
</div>
<p> </p>
<p><span style="font-size: 16px; font-family: 宋体"> 4. 插入图片，我使用的是 <span class="md-plain md-expand">react-native-image-picker，它目前使用时有问题</span></span></p>
<p><span class="md-plain md-expand">我的react native版本：</span>0.63.4 ，安装完这个包后，运行时报错，项目启动不了，报错信息如下</p>
<div class="cnblogs_code">
<pre>Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared <span style="color: rgba(0, 0, 255, 1)">in</span> library [:react-native-image-picker]</pre>
</div>
<p>解决方法：其实<span class="md-pair-s md-expand"><code>react-native-image-picker</code><span class="md-plain md-expand"> 最低要求是21的版本，那么我直接在build.gradle中，将minSdkVersion 修改为21即可</span></span></p>
<p> </p>
<p class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体; font-size: 16px">5. 点击某个位置时，ScrollView无法准确滚动到那个位置</span></p>
<p class="md-end-block md-p"><span class="md-plain">答：未完成，因为onFocus属性的回调函数的参数，没有当前位置的高度（未解决）</span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体; font-size: 16px">6. 插入图片后能否自动换行</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">答：因为不换行，只会显示图片的一部分，换行后，一切才显示正常（未解决）。</span></p>
<p> </p>
<p> </p>
<h2><span style="font-size: 18px">另一个富文本编辑器 react-native-cn-richtext-editor </span></h2>
<p><em id="__mceDel"><span style="font-size: 16px">https://github.com/imnapo/react-native-cn-richtext-editor</span><br><br> <img src="https://img2020.cnblogs.com/blog/1723157/202007/1723157-20200721213129543-1421171142.png"></em></p>
<p> </p>
<p> </p>
<p><br><br></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/tengyuxin/p/13357565.html
頁:
[1]