-
Notifications
You must be signed in to change notification settings - Fork 14
/
demo.js
85 lines (68 loc) · 1.67 KB
/
demo.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
import './kattappa.scss';
import './style.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Kattappa from './';
var initBlock = [{
type: "text",
data: '<p>Hello World</p>',
key: Kattappa.uuid()
}, {
type: "image",
key: Kattappa.uuid(),
data: {
url: "http://www.nutritionsecrets.com/wp-content/uploads/2015/04/Feature3_image2_vitD.jpg",
subtext: "nutritionsecrets.com",
hyperlink: "",
}
}];
const { Blocks, Editor } = Kattappa;
const { EmbedTypes } = Blocks.embed;
function getBlocks() {
return initBlock;
}
function onChange(position, content) {
initBlock[position].data = content;
}
function onSave(blocks) {
console.log(blocks);
}
function onFilesAdded(files, success=null, error=null) {
if (success) {
success.call(null, files[0].preview);
console.log('Success');
}
}
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
blocks: initBlock,
};
this.save = this.save.bind(this);
this.getBlocks = this.getBlocks.bind(this);
this.onChange = (blocks) => this.setState({ blocks });
}
getBlocks() {
return this.state.blocks;
}
save() {
console.log(this.state.blocks);
}
render() {
return (
<div>
<button onClick={this.save}>console.log</button>
<Editor
blocks={this.state.blocks}
onChange={this.onChange}
availableBlocks={Blocks}
EmbedTypes={EmbedTypes}
splitter="<p><br></p>"
getBlocks={this.getBlocks}
onFilesAdded={onFilesAdded} />
</div>
);
}
}
ReactDOM.render(<Container />, document.getElementById('editor-content'));