Ingen beskrivning

app.js 1.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import React, { Component } from 'react';
  2. import {
  3. StyleSheet,
  4. Text,
  5. View
  6. } from 'react-native';
  7. import {RichTextEditor, RichTextToolbar} from 'react-native-ZSSRichTextEditor'
  8. import KeyboardSpacer from 'react-native-keyboard-spacer';
  9. export default class RichTextExample extends Component {
  10. constructor(props) {
  11. super(props);
  12. this.getHTML = this.getHTML.bind(this);
  13. this.setFocusHandlers = this.setFocusHandlers.bind(this);
  14. }
  15. render() {
  16. return (
  17. <View style={styles.container}>
  18. <RichTextEditor
  19. ref={(r)=>this.richtext = r}
  20. style={styles.richText}
  21. initialTitleHTML={'Title!!'}
  22. initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
  23. editorInitializedCallback={() => this.onEditorInitialized()}
  24. />
  25. <RichTextToolbar
  26. getEditor={() => this.richtext}
  27. />
  28. <KeyboardSpacer/>
  29. </View>
  30. );
  31. }
  32. onEditorInitialized() {
  33. this.setFocusHandlers();
  34. this.getHTML();
  35. }
  36. async getHTML() {
  37. const titleHtml = await this.richtext.getTitleHtml();
  38. const contentHtml = await this.richtext.getContentHtml();
  39. //alert(titleHtml + ' ' + contentHtml)
  40. }
  41. setFocusHandlers() {
  42. this.richtext.setTitleFocusHandler(() => {
  43. //alert('title focus');
  44. });
  45. this.richtext.setContentFocusHandler(() => {
  46. //alert('content focus');
  47. });
  48. }
  49. }
  50. const styles = StyleSheet.create({
  51. container: {
  52. flex: 1,
  53. flexDirection: 'column',
  54. backgroundColor: '#ffffff',
  55. paddingTop: 40
  56. },
  57. richText: {
  58. alignItems:'center',
  59. justifyContent: 'center',
  60. backgroundColor: 'transparent',
  61. },
  62. });