-
Notifications
You must be signed in to change notification settings - Fork 0
/
P1.js
99 lines (93 loc) · 2.32 KB
/
P1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
* Rich Editor Example
* @author tangzehua
* @since 2019-06-24 14:52
*/
import React from 'react'
import {
Button,
KeyboardAvoidingView,
SafeAreaView,
ScrollView,
StyleSheet,
View,
} from 'react-native'
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor'
const initHTML = '<br/><b>Pell.js Rich Editor</b>'
export class P1 extends React.Component {
save = async () => {
// Get the data here and call the interface to save the data
let html = await this.richText.getContentHtml()
// console.log(html);
alert(html)
}
onPressAddImage = () => {
// insert URL
this.richText.insertImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png'
)
// insert base64
// this.richText.insertImage(`data:${image.mime};base64,${image.data}`);
this.richText.blurContentEditor()
}
onHome = () => {
this.props.navigation.push('index')
}
render() {
let that = this
return (
<>
{/* //{' '}
<SafeAreaView style={styles.container}> */}
<View style={styles.nav}>
<Button title={'HOME'} onPress={that.onHome} />
<Button title="Save" onPress={that.save} />
</View>
<ScrollView style={styles.scroll}>
<RichEditor
ref={rf => (that.richText = rf)}
initialContentHTML={initHTML}
style={styles.rich}
on
/>
</ScrollView>
<KeyboardAvoidingView behavior={'padding'}>
<RichToolbar
style={styles.richBar}
getEditor={() => that.richText}
iconTint={'#000033'}
selectedIconTint={'#074B81'}
selectedButtonStyle={{ backgroundColor: 'transparent' }}
// onPressAddImage={that.onPressAddImage}
/>
</KeyboardAvoidingView>
{/* //{' '}
</SafeAreaView> */}
</>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 5,
},
rich: {
minHeight: 80,
borderWidth: 1,
borderColor: 'red',
// flex: 1,
},
richBar: {
height: 50,
backgroundColor: '#F5FCFF',
},
scroll: {
backgroundColor: '#ffffff',
},
})