富文本编辑器demo（react-native）主要功能是字

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

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

返回 指定命令 在对象内的状态码（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参数