| 1 |
- {"version":3,"file":"index.js","sources":["../../src/components/Editor/RichTextEditor/index.tsx"],"sourcesContent":["import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Editor, EditorState, DraftEditorCommand, RichUtils, Modifier, ContentState, convertToRaw, ContentBlock, CompositeDecorator, Entity, SelectionState, AtomicBlockUtils } from \"draft-js\";\r\nimport styles from \"./RichTextEditor.less\";\r\n\r\ninterface RichTextEditorProps {}\r\ninterface RichTextEditorState {\r\n editorState: EditorState;\r\n}\r\n\r\n// 自定义组件，用于超链接\r\nconst Link = (props: any) => {\r\n // 这里通过contentState来获取entity�，之后通过getData获取entity中包含的数据\r\n const { url } = props.contentState.getEntity(props.entityKey).getData();\r\n return (\r\n <a href={url}>\r\n {props.children}\r\n </a>\r\n )\r\n}\r\n// decorator，用于超链接\r\nconst decorator = new CompositeDecorator([\r\n {\r\n strategy (contentBlock, callback, contentState) {\r\n\r\n // 这个方法接收2个函数作为参数，如果第一个参数的函数执行时�返回true，就会执行第二个参数函数，同时会�将匹配的�字符的起始位置和结束位置传递给第二个参数。\r\n contentBlock.findEntityRanges(\r\n (character) => {\r\n const entityKey = character.getEntity();\r\n return (\r\n entityKey !== null &&\r\n contentState.getEntity(entityKey).getType() === 'LINK'\r\n );\r\n }, (...arr) => {\r\n callback(...arr)\r\n }\r\n );\r\n },\r\n component: Link\r\n },\r\n {\r\n strategy (contentBlock, callback, contentState) {\r\n contentBlock.findEntityRanges(\r\n (character) => {\r\n const entityKey = character.getEntity();\r\n return (\r\n entityKey !== null &&\r\n contentState.getEntity(entityKey).getType() === 'EMOJI'\r\n );\r\n }, (...arr) => {\r\n callback(...arr);\r\n }\r\n )\r\n },\r\n // component: (props: any) => (<span style={{ color: 'red' }}>[Emoji]</span>)\r\n component: (props: any) => (\r\n <i style={{\r\n display:'inline-block',\r\n height:'18px',\r\n width:'18px',\r\n backgroundImage:`url(https://i.pinimg.com/originals/03/7e/79/037e79b2fb52127537be79110891ae3f.png)`,\r\n backgroundSize:'100% 100%',\r\n color:'transparent'\r\n }}>{`e`}</i>)\r\n }\r\n]);\r\n\r\nclass RichTextEditor extends React.Component<\r\n RichTextEditorProps,\r\n RichTextEditorState\r\n> {\r\n constructor(props: RichTextEditorProps) {\r\n super(props);\r\n this.state = {\r\n editorState: EditorState.createEmpty(decorator)\r\n };\r\n this.onChange = (editorState: EditorState) =>\r\n this.setState({ editorState });\r\n this.handleKeyCommand = this.handleKeyCommand.bind(this);\r\n this.defaultBlockStyleFn = this.defaultBlockStyleFn.bind(this);\r\n }\r\n\r\n onChange: (editorState: EditorState) => void;\r\n handleKeyCommand(command: DraftEditorCommand, editorState: EditorState) {\r\n const newState = RichUtils.handleKeyCommand(editorState, command);\r\n console.log('command: ', command);\r\n console.log('newState: ', newState);\r\n if (newState) {\r\n this.onChange(newState);\r\n return \"handled\";\r\n }\r\n\r\n switch (command) {\r\n case 'backspace': \r\n const contentState = editorState.getCurrentContent();\r\n const selectionState = editorState.getSelection();\r\n const [startOffset, endOffset] = [selectionState.getStartOffset(), selectionState.getEndOffset()];\r\n if (startOffset === endOffset) {\r\n // 未选中状态\r\n console.log(selectionState.getAnchorKey());\r\n }\r\n // 选中状态\r\n\r\n break;\r\n case 'backspace-word': \r\n case 'backspace-to-start-of-line':\r\n break;\r\n }\r\n \r\n return \"not-handled\";\r\n }\r\n\r\n _onBoldClick() {\r\n this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));\r\n }\r\n\r\n _onLinkClick() {\r\n const { editorState } = this.state;\r\n const contentState = editorState.getCurrentContent();\r\n const selectionState = editorState.getSelection();\r\n const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {\r\n url: 'http://www.zombo.com',\r\n });\r\n const entityKey = contentStateWithEntity.getLastCreatedEntityKey();\r\n const contentStateWithLink = Modifier.applyEntity(\r\n contentStateWithEntity,\r\n selectionState,\r\n entityKey,\r\n );\r\n const newEditorState = EditorState.push(editorState, contentStateWithLink, 'apply-entity');\r\n this.onChange(newEditorState);\r\n }\r\n\r\n _onEmojiClick(e: React.MouseEvent, emojiCode: string) {\r\n const { editorState } = this.state;\r\n const contentState = editorState.getCurrentContent();\r\n const selectionState = editorState.getSelection();\r\n const EMOJIEntity: ContentState = contentState.createEntity('EMOJI', 'IMMUTABLE', { emojiCode });\r\n const entityKey = EMOJIEntity.getLastCreatedEntityKey();\r\n const ncsWithEntity = Modifier.insertText(contentState, selectionState, 'e', undefined, entityKey);\r\n const newEditorState = EditorState.push(editorState, ncsWithEntity, 'insert-characters');\r\n // const newEditorState = AtomicBlockUtils.insertAtomicBlock(\r\n // editorState,\r\n // entityKey,\r\n // ' '\r\n // );\r\n this.onChange(newEditorState);\r\n }\r\n\r\n _onCheckRange() {\r\n console.log(this.state.editorState.getCurrentContent());\r\n console.log(convertToRaw(this.state.editorState.getCurrentContent()));\r\n }\r\n\r\n defaultBlockStyleFn(contentBlock: ContentBlock) {\r\n const type = contentBlock.getType();\r\n return \"\";\r\n }\r\n\r\n defaultBlockRenderFn(contentBlock: ContentBlock) {\r\n const type = contentBlock.getType();\r\n return contentBlock;\r\n }\r\n\r\n render() {\r\n const { editorState } = this.state;\r\n return (\r\n <div className={styles.wrapper}>\r\n <div className={styles.btnListWrapper}>\r\n <button onClick={this._onBoldClick.bind(this)}>Bold</button>\r\n <button onClick={this._onCheckRange.bind(this)}>Check</button>\r\n <button onClick={this._onLinkClick.bind(this)}>Link</button>\r\n <button onClick={(e: React.MouseEvent) => this._onEmojiClick(e, '0011')}>Emoji</button>\r\n </div>\r\n <div className={styles.editorWrapper}>\r\n <Editor\r\n editorState={editorState}\r\n blockStyleFn={this.defaultBlockStyleFn}\r\n blockRendererFn={this.defaultBlockRenderFn}\r\n handleKeyCommand={this.handleKeyCommand}\r\n onChange={this.onChange}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default RichTextEditor;\r\n"],"names":["Link","props","contentState","getEntity","entityKey","getData","url","React","createElement","href","children","decorator","CompositeDecorator","strategy","contentBlock","callback","findEntityRanges","character","getType","component","style","display","height","width","backgroundImage","backgroundSize","color","RichTextEditor","state","editorState","EditorState","createEmpty","onChange","setState","handleKeyCommand","bind","defaultBlockStyleFn","command","newState","RichUtils","console","log","getCurrentContent","selectionState","getSelection","getStartOffset","getEndOffset","startOffset","endOffset","getAnchorKey","toggleInlineStyle","contentStateWithEntity","createEntity","getLastCreatedEntityKey","contentStateWithLink","Modifier","applyEntity","newEditorState","push","e","emojiCode","EMOJIEntity","ncsWithEntity","insertText","undefined","convertToRaw","type","className","styles","wrapper","btnListWrapper","onClick","_onBoldClick","_onCheckRange","_onLinkClick","_onEmojiClick","editorWrapper","Editor","blockStyleFn","blockRendererFn","defaultBlockRenderFn","Component"],"mappings":"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"}
|
