Как мне отобразить данные, созданные SunEditor, в приложении ReactJS

#reactjs #suneditor

#reactjs #suneditor

Вопрос:

Я только начал работать с SunEditor, и до сих пор я успешно добавил его в компонент React и сохраняю полученный документ в MongoDB при нажатии кнопки сохранить. Пока это половина дела. Теперь я хочу отобразить сохраненный документ, и у меня есть данные из базы данных в том же компоненте, но когда я отображаю его, отображается весь HTML (см. Изображение). Мне трудно найти документацию по правильному отображению этих данных. Кто-нибудь знает, как правильно это сделать?

скриншот

Ответ №1:

Хорошо, итак, я потратил некоторое время на размышления об этом, и мне пришло в голову, что сам редактор — это то место, где вы отображаете текст. Тогда имело смысл, что если вы хотите показать документы, созданные в SunEditor, вы помещаете в них содержимое и скрываете панель инструментов, если вы собираетесь просматривать данные только для чтения.

Вот фрагмент метода рендеринга в моем компоненте, который это делает:

         return (
            <Auxi>
                <Logo />
                <SunEditor 
                    setOptions={editorOptions} 
                    setContents={contents} 
                    showToolbar={showToolbar} />
            </Auxi>
        );
  

Комментарии:

1. Я бы добавил несколько опций <SunEditor disable={true} enableToolbar={false} showToolbar={false} setContents={details} width=»100%» height=»100%» setOptions={{ resizingBar: false, showPathLabel: false }} />

2. Вы можете использовать параметр ‘defaultValue’ для установки начального содержимого параметра, поскольку вы не хотите, чтобы запускалась функция onChange