| 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","children","decorator","CompositeDecorator","strategy","contentBlock","callback","findEntityRanges","character","getType","component","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","styles","wrapper","btnListWrapper","_onBoldClick","_onCheckRange","_onLinkClick","_onEmojiClick","editorWrapper","Editor","defaultBlockRenderFn","Component"],"mappings":";;;;;;;;;;;;;;;;;;AAUA;AACA,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAgB;;8BAETA,KAAK,CAACC,YAAN,CAAmBC,SAAnB,CAA6BF,KAAK,CAACG,SAAnC,EAA8CC,OAA9C,EAFS;MAEjBC,GAFiB,yBAEjBA,GAFiB;;SAIrBC;IAAG,IAAI,EAAED;KACJL,KAAK,CAACO,QADX,CADJ;CAHJ;;;AAUA,IAAMC,SAAS,GAAG,IAAIC,aAAJ,CAAuB,CACvC;EACIC,QADJ,oBACcC,YADd,EAC4BC,QAD5B,EACsCX,YADtC,EACoD;;IAG5CU,YAAY,CAACE,gBAAb,CACI,UAACC,SAAD,EAAe;UACLX,SAAS,GAAGW,SAAS,CAACZ,SAAV,EAAlB;aAEIC,SAAS,KAAK,IAAd,IACAF,YAAY,CAACC,SAAb,CAAuBC,SAAvB,EAAkCY,OAAlC,OAAgD,MAFpD;KAHR,EAOO,YAAY;MACXH,QAAQ,MAAR;KARR;GAJR;EAgBII,SAAS,EAAEjB;CAjBwB,EAmBvC;EACEW,QADF,oBACYC,YADZ,EAC0BC,QAD1B,EACoCX,YADpC,EACkD;IAC9CU,YAAY,CAACE,gBAAb,CACE,UAACC,SAAD,EAAe;UACPX,SAAS,GAAGW,SAAS,CAACZ,SAAV,EAAlB;aAEEC,SAAS,KAAK,IAAd,IACAF,YAAY,CAACC,SAAb,CAAuBC,SAAvB,EAAkCY,OAAlC,OAAgD,OAFlD;KAHJ,EAOK,YAAY;MACbH,QAAQ,MAAR;KARJ;GAFJ;;EAeEI,SAAS,EAAE,mBAAChB,KAAD;WACTM;MAAG,KAAK,EAAE;QACNW,OAAO,EAAC,cADF;QAENC,MAAM,EAAC,MAFD;QAGNC,KAAK,EAAC,MAHA;QAINC,eAAe,qFAJT;QAKNC,cAAc,EAAC,WALT;QAMNC,KAAK,EAAC;;WAPD;;CAlC0B,CAAvB,CAAlB;;IA8CMC;;;;;0BAIQvB,KAAZ,EAAwC;;;;;0HAChCA,KAAN;;;;UACKwB,KAAL,GAAa;MACXC,WAAW,EAAEC,aAAW,CAACC,WAAZ,CAAwBnB,SAAxB;KADf;;UAGKoB,QAAL,GAAgB,UAACH,WAAD;aACd,MAAKI,QAAL,CAAc;QAAEJ,WAAW,EAAXA;OAAhB,CADc;KAAhB;;UAEKK,gBAAL,GAAwB,MAAKA,gBAAL,CAAsBC,IAAtB,gDAAxB;UACKC,mBAAL,GAA2B,MAAKA,mBAAL,CAAyBD,IAAzB,gDAA3B;;;;;;qCAIeE,SAA6BR,aAA0B;UAChES,QAAQ,GAAGC,cAAS,CAACL,gBAAV,CAA2BL,WAA3B,EAAwCQ,OAAxC,CAAjB;MACAG,OAAO,CAACC,GAAR,CAAY,WAAZ,EAAyBJ,OAAzB;MACAG,OAAO,CAACC,GAAR,CAAY,YAAZ,EAA0BH,QAA1B;;UACIA,QAAJ,EAAc;aACPN,QAAL,CAAcM,QAAd;eACO,SAAP;;;cAGMD,OAAR;aACO,WAAL;cACQhC,YAAY,GAAGwB,WAAW,CAACa,iBAAZ,EAArB;cACMC,cAAc,GAAGd,WAAW,CAACe,YAAZ,EAAvB;qBACiC,CAACD,cAAc,CAACE,cAAf,EAAD,EAAkCF,cAAc,CAACG,YAAf,EAAlC,CAHnC;cAGSC,WAHT;cAGsBC,SAHtB;;cAIMD,WAAW,KAAKC,SAApB,EAA+B;;YAE7BR,OAAO,CAACC,GAAR,CAAYE,cAAc,CAACM,YAAf,EAAZ;WANJ;;;;AADF;;aAiBO,aAAP;;;;mCAGa;WACRjB,QAAL,CAAcO,cAAS,CAACW,iBAAV,CAA4B,KAAKtB,KAAL,CAAWC,WAAvC,EAAoD,MAApD,CAAd;;;;mCAGa;UACLA,WADK,GACW,KAAKD,KADhB,CACLC,WADK;UAEPxB,YAAY,GAAGwB,WAAW,CAACa,iBAAZ,EAArB;UACMC,cAAc,GAAGd,WAAW,CAACe,YAAZ,EAAvB;UACMO,sBAAsB,GAAG9C,YAAY,CAAC+C,YAAb,CAA0B,MAA1B,EAAkC,SAAlC,EAA6C;QAC1E3C,GAAG,EAAE;OADwB,CAA/B;UAGMF,SAAS,GAAG4C,sBAAsB,CAACE,uBAAvB,EAAlB;UACMC,oBAAoB,GAAGC,cAAQ,CAACC,WAAT,CAC3BL,sBAD2B,EAE3BR,cAF2B,EAG3BpC,SAH2B,CAA7B;UAKMkD,cAAc,GAAG3B,aAAW,CAAC4B,IAAZ,CAAiB7B,WAAjB,EAA8ByB,oBAA9B,EAAoD,cAApD,CAAvB;WACKtB,QAAL,CAAcyB,cAAd;;;;kCAGYE,GAAqBC,WAAmB;UAC5C/B,WAD4C,GAC5B,KAAKD,KADuB,CAC5CC,WAD4C;UAE9CxB,YAAY,GAAGwB,WAAW,CAACa,iBAAZ,EAArB;UACMC,cAAc,GAAGd,WAAW,CAACe,YAAZ,EAAvB;UACMiB,WAAyB,GAAGxD,YAAY,CAAC+C,YAAb,CAA0B,OAA1B,EAAmC,WAAnC,EAAgD;QAAEQ,SAAS,EAATA;OAAlD,CAAlC;UACMrD,SAAS,GAAGsD,WAAW,CAACR,uBAAZ,EAAlB;UACMS,aAAa,GAAGP,cAAQ,CAACQ,UAAT,CAAoB1D,YAApB,EAAkCsC,cAAlC,EAAkD,GAAlD,EAAuDqB,SAAvD,EAAkEzD,SAAlE,CAAtB;UACMkD,cAAc,GAAG3B,aAAW,CAAC4B,IAAZ,CAAiB7B,WAAjB,EAA8BiC,aAA9B,EAA6C,mBAA7C,CAAvB,CAPoD;;;;;;WAa/C9B,QAAL,CAAcyB,cAAd;;;;oCAGc;MACdjB,OAAO,CAACC,GAAR,CAAY,KAAKb,KAAL,CAAWC,WAAX,CAAuBa,iBAAvB,EAAZ;MACAF,OAAO,CAACC,GAAR,CAAYwB,cAAY,CAAC,KAAKrC,KAAL,CAAWC,WAAX,CAAuBa,iBAAvB,EAAD,CAAxB;;;;wCAGkB3B,cAA4B;UACxCmD,IAAI,GAAGnD,YAAY,CAACI,OAAb,EAAb;aACO,EAAP;;;;yCAGmBJ,cAA4B;UACzCmD,IAAI,GAAGnD,YAAY,CAACI,OAAb,EAAb;aACOJ,YAAP;;;;6BAGO;;;UACCc,WADD,GACiB,KAAKD,KADtB,CACCC,WADD;aAGLnB;QAAK,SAAS,EAAEyD,MAAM,CAACC;SACrB1D;QAAK,SAAS,EAAEyD,MAAM,CAACE;SACrB3D;QAAQ,OAAO,EAAE,KAAK4D,YAAL,CAAkBnC,IAAlB,CAAuB,IAAvB;gBADnB,EAEEzB;QAAQ,OAAO,EAAE,KAAK6D,aAAL,CAAmBpC,IAAnB,CAAwB,IAAxB;iBAFnB,EAGEzB;QAAQ,OAAO,EAAE,KAAK8D,YAAL,CAAkBrC,IAAlB,CAAuB,IAAvB;gBAHnB,EAIEzB;QAAQ,OAAO,EAAE,iBAACiD,CAAD;iBAAyB,MAAI,CAACc,aAAL,CAAmBd,CAAnB,EAAsB,MAAtB,CAAzB;;iBAJnB,CADF,EAOEjD;QAAK,SAAS,EAAEyD,MAAM,CAACO;SACrBhE,6BAACiE,aAAD;QACE,WAAW,EAAE9C,WADf;QAEE,YAAY,EAAE,KAAKO,mBAFrB;QAGE,eAAe,EAAE,KAAKwC,oBAHxB;QAIE,gBAAgB,EAAE,KAAK1C,gBAJzB;QAKE,QAAQ,EAAE,KAAKF;QANnB,CAPF,CADF;;;;;EAnGyBtB,cAAK,CAACmE;;;;"}
|
