Estoy haciendo una página en la que los usuarios pueden crear blogs. Actualmente el contenido de los blogs lo recibo como texto plano a través de un textarea, sin embargo, necesito hacer uso de un Rich text editor que me permita guardar el contenido en el formato de Firebase Realtime Database, y poder consultar dicho contenido para mostrarlo con el formato con el que se editó. El código del componente para crear artículos es el siguiente:
import { mainTopics } from "./topics.js";
const INITIAL_STATE = {
title: "",
date: "",
topic: "",
article: "",
error: null,
};
class PostForm extends Component {
constructor(props) {
super(props);
this.state = {
...INITIAL_STATE,
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(event) {
this.props.onSubmit(
event,
this.props.postInfo
? {
postId: this.props.postInfo.id,
title: this.state.title,
date: this.state.date,
topic: this.state.topic,
article: this.state.article,
}
: {}
);
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value,
});
this.props.onChange(event);
}
render() {
const { title, date, topic, article, error } = this.state;
const isInvalid =
title === "" ||
article === "" ||
topic === "" ||
topic === "-" ||
date === "";
return (
<div className="form-container">
<form className="post-form" onSubmit={this.handleSubmit}>
<input
className="new-post-input"
name="title"
value={title}
onChange={this.handleChange}
type="text"
placeholder="Title"
/>
<input
className="new-post-input"
name="date"
value={date}
onChange={this.handleChange}
type="date"
placeholder="Date of creation"
/>
<section>
<label htmlFor="topic">Select the topic of your text: </label>
<select
name="topic"
value={topic}
onChange={this.handleChange}
>
{mainTopics.map((topic, index) => (
<option key={index} value={topic}>
{topic}
</option>
))}
</select>
</section>
<textarea
className="article-text-area"
name="article"
value={article}
onChange={this.handleChange}
placeholder="This is the body of your post"
/>
<button disabled={isInvalid} type="submit">
Post it
</button>
{error && <p>{error.message}</p>}
</form>
</div>
);
}
}
Cuando el usuario hace click en submit, el siguiente código se ejecuta:
handleSubmit(event, object) {
const { title, date, topic, article } = this.state;
const newPublication = {
title,
date,
topic,
article,
};
const { email, uid } = this.props.firebase.auth.currentUser;
this.props.firebase.userPosts(uid).push(newPublication);
let postKey;
this.props.firebase
.userPosts(uid)
.limitToLast(1)
.on("child_added", snapshot => {
postKey = snapshot.key;
});
const keyEmail = email.substring(0, email.indexOf("@"));
this.props.firebase.setByTopic(topic, `${keyEmail}${postKey}`, {
email,
...newPublication,
});
this.setState({ editing: false });
this.handleDatabaseUpdate(false);
event.preventDefault();
}
Esto es lo que se guarda en firebase
Y así es como se ve una publicación en la sección de publicaciones: