es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo precargar CkEditor con datos utilizando React.js?

22 Jul, 2023 Programación

Estoy creando un blog y quiero darle al usuario la capacidad de actualizar su publicación, pero no estoy seguro de cómo pasar los datos de contenido desde la publicación original a mi editor de texto enriquecido.

import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

function UpdatePost() {
  const [content, setContent] = useState('')
  const { post_id } = useParams();

  useEffect(() => {
    const fetchPost = async () => {
      const formData = await getPost(post_id);
      setContent(formData.content);
    };
    fetchPost();
  }, [post_id]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const updated = await updatePost({
      post_id,
      content: content,
    })
  };

  return (
    <div>
        <form onsubmit="{handleSubmit}">
          <h1 class="create-post-header-text">Actualizar Publicación</h1>
            <ckeditor config="{{" placeholder:="" "contenido..."="" }}="" class="ck-editor" editor="{ClassicEditor}" onchange="{(event," editor)=""> {
                const data = editor.getData()
                setContent(data)
              }}
            />

        </ckeditor></form>
    </div>
  );
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar los datos de contenido de la publicación original al CKEditor para su actualización, puedes seguir los siguientes pasos:

    1. En primer lugar, crea una variable de estado para almacenar los datos de contenido.
    const [content, setContent] = useState('')
    1. A continuación, deberás obtener los datos de la publicación original mediante el uso del post_id.
    const { post_id } = useParams();

useEffect(() => {
  const fetchPost = async () => {
    const formData = await getPost(post_id);
    setContent(formData.content);
  };
  fetchPost();
}, [post_id]);

    En el hook useEffect, obtenemos la publicación utilizando post_id y luego establecemos la variable de estado de datos de contenido con el contenido de la publicación obtenida.

    1. Pasa la variable de estado de contenido como valor inicial para los datos de CKEditor.
    <ckeditor config="{{" placeholder:="" "contenido..."="" }}="" class="ck-editor" editor="{ClassicEditor}" data="{content}" onchange="{(event," editor)=""> {
    const data = editor.getData()
    setContent(data)
  }}
/>

    Al pasar la variable de estado de contenido como valor inicial para los datos de CKEditor, el contenido de la publicación original se mostrará en el CKEditor para su actualización. Luego, cualquier actualización realizada por el usuario se guardará en la variable de estado setContent al enviar el formulario.

    Con los pasos anteriores, podrás pasar los datos de contenido de la publicación original a tu CKEditor para su actualización.

Comments are closed.