#javascript #html #reactjs #draftjs
#javascript #HTML #reactjs #draftjs
Вопрос:
Я рассматриваю возможность использования draft.js и мне интересно, как я могу создать редактор, и пока кто-то вводит, результаты будут отображаться как html, но с фактической разметкой (т. Е. если я выделю жирным шрифтом, вывод будет выделен жирным шрифтом).
У меня возникли проблемы с тем, чтобы заставить это работать. Я пытался dangerouslySetInnerHTML
, но, похоже, это не сработало.
<div dangerouslySetInnerHTML={{ __html: this.state.editorContentHtml }}></div>
import React from "react";
import { Editor, EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";
class ExampleEditor1 extends React.Component {
constructor(props) {
super(props);
this.state = { editorState: EditorState.createEmpty() };
this.onChange = editorState => {
this.setState({
editorState,
editorContentHtml: stateToHTML(editorState.getCurrentContent())
});
};
}
render() {
return (
<div>
<div className="editor-container" style={{ border: "1px solid #000" }}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
<h4>Editor content as HTML</h4>
<div>{this.state.editorContentHtml}</div>
</div>
);
}
}
export default ExampleEditor1;
Ответ №1:
Я еще не использовал draft-js-export-html
package и я ленив. Итак, я не указываю на причину, по которой ваш код не сработал.
Но следующий код должен выполнить задачу:
import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';
const styles = {
editor: {
border: "1px solid gray",
display: "block",
minHeight: "15em"
}
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
preview: null
};
this.onChange = editorState => this.setState({
editorState,
preview: editorState.getCurrentContent().getPlainText()
});
this.setEditor = ref => {
this.editor = ref;
};
this.focusEditor = () => {
if (this.editor) {
this.editor.focus();
}
};
}
render() {
return (
<React.Fragment>
<div style={styles.editor} onClick={this.focusEditor}>
<Editor
ref={this.setEditor}
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
<div
style={{ minHeight: "200px" }}
dangerouslySetInnerHTML={{ __html: this.state.preview }}
/>
</React.Fragment>
);
}
}
export default App;