Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

app.js 1.8KB

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