Simple React component for a rich editor text and the conversion to render HTML
npm install mx-react-wysiwyg --save
import { Wysiwyg, ConvertToHTML } from "mx-react-wysiwyg";
import 'semantic-ui-css/semantic.min.css';
class App extends Component {
constructor(){
super()
this.state = {
content: null
}
}
updateValue(content){
this.setState({content})
}
render {
const { content } = this.state
return (
<div>
<Wysiwyg
onChange={this.updateValue.bind(this)}
value={this.state.value}
/>
<ConvertToHTML
html={this.state.value}
/>
</div>
);
}
}
Format | Required | What it does ? | |
---|---|---|---|
onChange | {function} |
YES | Takes a function that return the content of the editor |
value | Object |
NO | You can make Wysiwyg a controlled component by giving it a draft-js map value |
bold | Bool |
NO | default to true pass it to false to disable bold style |
underline | Bool |
NO | default to true pass it to false to disable underline style |
italic | Bool |
NO | default to true pass it to false to disable italic style |
h1, h2, h3, h4, h5, h6 | Bool |
NO | default to true pass it to false to disable h1, etc... style |
blockQuote | Bool |
NO | default to true pass it to false to disable blockquote style |
list | Bool |
NO | default to true pass it to false to disable list style |
numberedList | Bool |
NO | default to true pass it to false to disable list numbered style |
code | Bool |
NO | default to true pass it to false to disable code style |
Format | Required | What it does ? | |
---|---|---|---|
html | Object |
YES | Object from the Wysiwyg editor |
- Francois Aubeut (@MeXaaR)
MIT Licensed