Frames

nknkknm

0
1
2
3
1<!--
2Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
3
4This file provided by Facebook is for non-commercial testing and evaluation
5purposes only. Facebook reserves all rights not expressly granted.
6
7THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
8IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
10FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
mlm,m

11ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13-->
14<!DOCTYPE html>
15<html>
16 <head>
17 <meta charset="utf-8" />
18 <title>Draft • Convert from HTML</title>
19 <link rel="stylesheet" href="../../../dist/Draft.css" />
20 </head>
21 <body>
22 <div id="target"></div>
23 <script src="../../../node_modules/react/umd/react.development.js"></script>
24 <script src="../../../node_modules/react-dom/umd/react-dom.development.js"></script>
25 <script src="../../../node_modules/immutable/dist/immutable.js"></script>
26 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
27 <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
28 <script src="../../../dist/Draft.js"></script>
29 <script type="text/babel">
30 'use strict';
31
32 const {
33 CompositeDecorator,
34 ContentState,
35 Editor,
36 EditorState,
37 convertFromHTML,
38 convertToRaw,
39 } = Draft;
40
41 class HTMLConvertExample extends React.Component {
42 constructor(props) {
43 super(props);
44
45 const decorator = new CompositeDecorator([
46 {
47 strategy: findLinkEntities,
48 component: Link,
49 },
50 {
51 strategy: findImageEntities,
52 component: Image,
53 },
54 ]);
55
56 const sampleMarkup =
57 '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
58 '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
59 '<img src="image.png" height="112" width="200" />';
60
61 const blocksFromHTML = convertFromHTML(sampleMarkup);
62 const state = ContentState.createFromBlockArray(
63 blocksFromHTML.contentBlocks,
64 blocksFromHTML.entityMap,
65 );
66
67 this.state = {
68 editorState: EditorState.createWithContent(
69 state,
70 decorator,
71 ),
72 };
73
74 this.focus = () => this.refs.editor.focus();
75 this.onChange = (editorState) => this.setState({editorState});
76 this.logState = () => {
77 const content = this.state.editorState.getCurrentContent();
78 console.log(convertToRaw(content));
79 };
80 }
81
82 render() {
83 return (
84 <div style={styles.root}>
85 <div style={{marginBottom: 10}}>
86 Sample HTML converted into Draft content state
87 </div>
88 <div style={styles.editor} onClick={this.focus}>
89 <Editor
90 editorState={this.state.editorState}
91 onChange={this.onChange}
92 ref="editor"
93 />
94 </div>
95 <input
96 onClick={this.logState}
97 style={styles.button}
98 type="button"
99 value="Log State"
100 />
101 </div>
102 );
103 }
104 }
105
106 function findLinkEntities(contentBlock, callback, contentState) {
107 contentBlock.findEntityRanges(
108 (character) => {
109 const entityKey = character.getEntity();
110 return (
111 entityKey !== null &&
112 contentState.getEntity(entityKey).getType() === 'LINK'
113 );
114 },
115 callback
116 );
117 }
118
119 const Link = (props) => {
120 const {url} = props.contentState.getEntity(props.entityKey).getData();
121 return (
122 <a href={url} style={styles.link}>
123 {props.children}
124 </a>
125 );
126 };
127
128 function findImageEntities(contentBlock, callback, contentState) {
129 contentBlock.findEntityRanges(
130 (character) => {
131 const entityKey = character.getEntity();
132 return (
133 entityKey !== null &&
134 contentState.getEntity(entityKey).getType() === 'IMAGE'
135 );
136 },
137 callback
138 );
139 }
140
141 const Image = (props) => {
142 const {
143 height,
144 src,
145 width,
146 } = props.contentState.getEntity(props.entityKey).getData();
147
148 return (
149 <img src={src} height={height} width={width} />
150 );
151 };
152
153 const styles = {
154 root: {
155 fontFamily: '\'Helvetica\', sans-serif',
156 padding: 20,
157 width: 600,
158 },
159 editor: {
160 border: '1px solid #ccc',
161 cursor: 'text',
162 minHeight: 80,
163 padding: 10,
164 },
165 button: {
166 marginTop: 10,
167 textAlign: 'center',
168 },
169 };
170
171 ReactDOM.render(
172 <HTMLConvertExample />,
173 document.getElementById('target')
174 );
175 </script>
176 </body>
177</html>
178
vcvccvcvvcv