0

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:

introducir la descripción de la imagen aquí

1 respuesta 1

1

Jona. Prueba con estos editores enriquecidos: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html o https://www.tiny.cloud/docs/integrations/react/

Estos te ahorran tiempo :)

En firebase puedes guardar html. Almacena la data entregada por los componente en una variable de tipo string. Y cuando quieras mostrarla, la recuperas y se la pasas a los mismos, ellos se encangaran de convertirlo a texto enriquecido listo para editarse. DEMO: https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

1
  • ¡Gracias Carlos!, probaré a ver cómo me va.
    – jonat lop
    Commented el 26 may. 2020 a las 1:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.