demo地址：https://github.com/LiYaMei94/rich_editor_react_native。

富文本编辑器demo（react-native）主要功能是字体设置（颜色、大小、下划线、加粗、斜体）、上传图片，对齐方式、标题、插入有序和无序列表等，其他功能可以根据document.execCommand参数说明自行添加。

项目/src/components/richWebView/目录下的editor.js文件中使用的document.execCommand和Document.queryCommandState()

document.execCommand

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。具体使用方法及参数可前往document.execCommand详情查看。

Document.queryCommandState()

返回 指定命令 在对象内的状态码（1表示指定命令在对象内已执行；0表示指定命令在对象内未执行，处于可执行状态；-1表示指定命令在对象内处于不可用状态），详细使用方法可前往Document.queryCommandState()详情查看。

使用

安装依赖

yarn add react-native-syan-image-picker //图片选择
yarn add react-native-webview //和h5交互

放入字体

在项目android/app/src/main/assets/fonts目录下放入你的字体图标，同时修改项目根目录src/components/richWebView/下的RichToolbar.js文件，修改内容如下

editorIconfont: {
   fontFamily: "你的字体文件名",
    fontSize: 24
},

简单使用

/*
 * @Descripttion: 使用编辑器
 * @version: 
 * @Author: liyamei
 * @Date: 2019-11-12 17:05:53
 * @LastEditors: liyamei
 * @LastEditTime: 2019-11-14 11:22:15
 */
import React from 'react';
import {
    StyleSheet,
    View,
    ScrollView
} from 'react-native';
import { actions } from '../../components/richWebView/const';
import RichEditor from '../../components/richWebView/RichEditor';
import RichToolbar from '../../components/richWebView/RichToolbar';
import ImagePicker from 'react-native-syan-image-picker';
import {STATUS_BAR_HEIGHT,ScreenHeight} from '../../assets/css/common';
const options = {
    imageCount: 1,//最大选择图片数目
    isRecordSelected: true,//记录当前已选中的图片
    isCamera: false,//是否允许用户在内部拍照
    isCrop: false,//是否允许裁剪，imageCount 为1才生效
    enableBase64: true//是否返回base64图片
};
export default class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    /**
     *
     *上传图片
     * @returns
     * @memberof Editor
     */
    _onPressAddImage() {
        return new Promise((resolve, reject) => {
            ImagePicker.asyncShowImagePicker(options)
                .then(photos => {
                    resolve(photos);
                })
                .catch(err => {
                    reject(err)
                })
        });
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <RichEditor
                        height={ScreenHeight-90}
                        ref={ref => this.richText = ref}
                        editorInitializedCallback={()=>{
                            this.richText.focusContentEditor();//初始化完成之后聚焦
                        }}
                    />
                </ScrollView>
                <RichToolbar
                        getEditor={() => this.richText}
                        onPressAddImage={() => this._onPressAddImage()}
                    />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
})

参数

RichEditor参数

RichToolbar参数

效果图