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