1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import React, { Component } from 'react';
- import {
- StyleSheet,
- Text,
- View
- } from 'react-native';
- import {RichTextEditor, RichTextToolbar} from 'react-native-ZSSRichTextEditor'
- import KeyboardSpacer from 'react-native-keyboard-spacer';
-
- export default class RichTextExample extends Component {
-
- constructor(props) {
- super(props);
- this.getHTML = this.getHTML.bind(this);
- this.setFocusHandlers = this.setFocusHandlers.bind(this);
- }
-
- render() {
- return (
- <View style={styles.container}>
- <RichTextEditor
- ref={(r)=>this.richtext = r}
- style={styles.richText}
- initialTitleHTML={'Title!!'}
- initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
- editorInitializedCallback={() => this.onEditorInitialized()}
- />
- <RichTextToolbar
- getEditor={() => this.richtext}
- />
- <KeyboardSpacer/>
- </View>
- );
- }
-
- onEditorInitialized() {
- this.setFocusHandlers();
- this.getHTML();
- }
-
- async getHTML() {
- const titleHtml = await this.richtext.getTitleHtml();
- const contentHtml = await this.richtext.getContentHtml();
- //alert(titleHtml + ' ' + contentHtml)
- }
-
- setFocusHandlers() {
- this.richtext.setTitleFocusHandler(() => {
- //alert('title focus');
- });
- this.richtext.setContentFocusHandler(() => {
- //alert('content focus');
- });
- }
- }
-
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection: 'column',
- backgroundColor: '#ffffff',
- paddingTop: 40
- },
- richText: {
- alignItems:'center',
- justifyContent: 'center',
- backgroundColor: 'transparent',
- },
- });
-
|