filnor
@filnor
¯\_( ツ)_/¯

Как выводить данные в модуль страниц, которые создаются при помощи Rich Text Editora в проекте с реактом?

Добрый день!
Сейчас на проекте, бек которого работает на ларавеле возникла потребность добавить модуль страниц.
Там есть несколько сущностей, которые работают на разных движках:
1) Клиент (React)
2) ... Много всяких сервисов связанных с клиентом которые работают на реакте.
3) Суперадминка + API для всех пунктов выше (Laravel)

Главный администратор проекта, может через админку на Ларе создать любую страничку используя Rich Text Editor (Quill), а мы должны её отобразить на клиенте в реакте.

Вопрос собственно в чем - в обычных проектах, можно было получить просто кусок разметки который потом выводить на клиент, в том виде, в котором его ввел пользователь. В Реакте же такого типа вставки кода, являются небезопасными и могут положить нам весь проект.
Почитал предварительно в гугле - все советуют настоятельно так не делать + выглядит это все как один большой костыль, которых я стараюсь избегать.

У Quill есть свой формат данных в которых он может отдать данные помимо чистой HTML разметки.
Но выходит, что если мне нужно будет эти данные трансформировать назад в JSX, то мне нужен будет сам редактор, который будет подключен на клиенте в режиме для чтения (Так как метод преобразования мы вызываем из контекста редактора) и в котором я смогу преобразовать эти данные с дельты уже в нормальную разметку?
Честно, даже звучит как редкая фигня и хотелось бы понять как это правильно реализовать без костылей.

Бек готов сотрудничать, говорит скажи в каком формате нужно отдавать или сохранять все сделаем. Но проблема как раз в том, что я не до конца понимаю этот самый алгоритм как такой кейс реализовать.
Поделитесь опытом, как такую штуку можно правильно сделать. Спасибо!
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
filnor
@filnor Автор вопроса
¯\_( ツ)_/¯
Единственным адекватным решением этой задачи стало следующее:

class Page extends React.Component{
    pasteHTML = ( node ) =>  node.innerHTML = this.props.page.data.text;
    render = () => (
        <>
            <section 
                className="page__data" 
                ref={ node => this.pasteHTML( node ) } 
            />
        </>
    )
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы