Skip to content

Instantly share code, notes, and snippets.

@erikras
Created October 28, 2016 12:23
Show Gist options
  • Save erikras/5ca8dc618bae5dbc8faf7d2324585d01 to your computer and use it in GitHub Desktop.
Save erikras/5ca8dc618bae5dbc8faf7d2324585d01 to your computer and use it in GitHub Desktop.
Using react-rte with redux-form
import React, { Component, PropTypes } from 'react'
class RichTextMarkdown extends Component {
static propTypes = {
input: PropTypes.shape({
onChange: PropTypes.func.isRequired,
value: PropTypes.string
}).isRequired
}
constructor(props) {
super(props)
this.state = { value: undefined }
}
componentDidMount() {
this.RichTextEditor = window.RichTextEditor
this.setState({
value: this.props.input.value ?
this.RichTextEditor.createValueFromString(this.props.input.value, 'markdown') :
this.RichTextEditor.createEmptyValue()
})
}
handleChange = value => {
this.setState({ value })
let markdown = value.toString('markdown')
if(markdown.length === 2 && markdown.charCodeAt(0) === 8203 && markdown.charCodeAt(1) === 10) {
markdown = ''
}
this.props.input.onChange(markdown)
}
render() {
const { RichTextEditor, state: { value }, handleChange } = this
return RichTextEditor ? <RichTextEditor value={value} onChange={handleChange}/> : <div/>
}
}
export default RichTextMarkdown
@riflemanIm
Copy link

@Dem0n3D
Thanks!

@probabble
Copy link

based on this thread, I changed the componentWillRecieveProps in order to support React 16

sstur/react-rte#242 (comment)

componentWillReceiveProps(nextProps) {    
    this.state.value.setContentFromString(nextProps.value, "html");
}

@DemiJiang33
Copy link

@Dem0n3D
Thank you so much!

@victorpavlenko
Copy link

@Dem0n3D
Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment