Как анализировать и отображать текстовые данные из TinyMCE - PullRequest
Новая
       3

Как анализировать и отображать текстовые данные из TinyMCE

0 голосов
/ 13 июля 2020

Я работаю над проектом блога, используя React и Node, чтобы создать интерфейс и его серверную часть. Я пытаюсь реализовать TinyMCE в своем интерфейсе администратора, и он работает, то есть я вижу редактор на странице, могу писать в нем и сохранять то, что пишу, в базе данных. НО, когда я получаю статьи из базы данных и визуализирую их на странице, я вижу следующее: &lt;p&gt;This is an example.&lt;&#x2F;p&gt; Я читаю документы, но не могу найти ответа, как правильно отрисовать контент. Я пробовал использовать html -parser, но вместо &lt;p&gt; он показывает тег <p>. Я не уверен, нужно ли мне изменять способ сохранения текста с помощью tinyMCE или способ его отображения при выполнении запроса GET. Это компонент, в который встроен редактор: 

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import Navbar from './navbar';
import authHeader from '../services/authHeader';
import { Editor } from '@tinymce/tinymce-react';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [text, setText] = useState('');
  const [errors, setErrors] = useState([]);
  const history = useHistory();

  const handleEditorChange = (content, editor) => {
    setText(content);
  };

  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      const post = {
        title,
        text,
      };

      const request = await fetch('http://localhost:5000/api/posts/create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: authHeader(),
        },
        mode: 'cors',
        body: JSON.stringify(post),
      });

      const response = await request.json();
      if (request.status === 400) {
        setErrors(response);
        return;
      } else {
        console.log(response);
        history.push('/');
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <Navbar></Navbar>
      <div className='container mt-5'>
        {errors.length > 0
          ? errors.map((error) => (
              <p className='alert alert-warning mb-0 mt-4' key={error.msg}>
                {error.msg}
              </p>
            ))
          : ''}
        <form onSubmit={(e) => handleSubmit(e)}>
          <div className='form-group'>
            <label htmlFor='title'>Title</label>
            <input
              className='form-control'
              type='text'
              name='title'
              id='title'
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <Editor
            initialValue={text}
            init={{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount',
              ],
              toolbar:
                'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help',
            }}
            onEditorChange={handleEditorChange}
          />
          <button className='btn btn-primary mt-3'>Create Post</button>
        </form>
      </div>
    </div>
  );
};

export default CreatePost;
...