설명 없음

app.js 1.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. }
  14. render() {
  15. return (
  16. <View style={styles.container}>
  17. <RichTextEditor
  18. ref={(r)=>this.richtext = r}
  19. style={styles.richText}
  20. initialTitleHTML={'Title!!'}
  21. initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
  22. editorInitializedCallback={() => this.onEditorInitialized()}
  23. />
  24. <RichTextToolbar
  25. getEditor={() => this.richtext}
  26. />
  27. <KeyboardSpacer/>
  28. </View>
  29. );
  30. }
  31. onEditorInitialized() {
  32. this.setFocusHandlers();
  33. this.getHTML();
  34. }
  35. async getHTML() {
  36. const titleHtml = await this.richtext.getTitleHtml();
  37. const contentHtml = await this.richtext.getContentHtml();
  38. //alert(titleHtml + ' ' + contentHtml)
  39. }
  40. setFocusHandlers() {
  41. this.richtext.setTitleFocusHandler(() => {
  42. //alert('title focus');
  43. });
  44. this.richtext.setContentFocusHandler(() => {
  45. //alert('content focus');
  46. });
  47. }
  48. }
  49. const styles = StyleSheet.create({
  50. container: {
  51. flex: 1,
  52. flexDirection: 'column',
  53. backgroundColor: '#F5FCFF',
  54. paddingTop: 40
  55. },
  56. richText: {
  57. alignItems:'center',
  58. justifyContent: 'center',
  59. backgroundColor: 'transparent',
  60. },
  61. });