十分鐘搞定 React Draft Wysiwyg文字編輯器

import React, { Component } from ‘react’;import { EditorState } from ‘draft-js’;import { Editor } from ‘react-draft-wysiwyg’;import ‘../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css’;
export default class TextEditor extends Component{
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};

this.onEditorStateChange = this.onEditorStateChange.bind(this);
}

onEditorStateChange(editorState) {
this.setState({editorState,});
};
render() {
const { editorState } = this.state;
return (
<div style={{border:"1px, solid, black", height:"600px"}}>
<Editor
initialEditorState={editorState}
wrapperClassName=”demo-wrapper”
editorClassName=”demo-editor”
onEditorStateChange={this.onEditorStateChange}
/>
)
}
}
<Editor
toolbar={{
options: [‘inline’, ‘blockType’, ‘fontSize’, ‘textAlign’,
‘history’, ‘colorPicker’],
inline: {
options: [“italic”],
bold: { className: “demo-option-custom” },
italic: { className: “demo-option-custom” },
underline: { className: “demo-option-custom” },
strikethrough: {className: “demo-option-custom” },
monospace: { className: “demo-option-custom” },
superscript: {className: “demo-option-custom”},
subscript: { className: “demo-option-custom” }
},
blockType: {className: “demo-option-custom-wide”,
dropdownClassName: “demo-dropdown-custom”},
fontSize: { className: “demo-option-custom-medium” }
}}
initialEditorState={editorState}
wrapperClassName=”demo-wrapper”
editorClassName=”demo-editor”
onEditorStateChange={this.onEditorStateChange}
/>
import { EditorState, convertToRaw } from ‘draft-js’;
npm install -s draftjs-to-htmlyarn add ‘draftjs-to-html’
import draftToHtml from “draftjs-to-html”;
npm install -s html-to-draftjsyarn add ‘html-to-draftjs’import htmlToDraft from ‘html-to-draftjs’
<div dangerouslySetInnerHTML={{__html: 你想顯示的值}}></div><div dangerouslySetInnerHTML={{__html: this.state.message}}></div>

--

--

Front-End Developer/Travel Guide Book Writer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store