S
S
Sergey Filnor2019-02-06 13:21:40
Text editors
Sergey Filnor, 2019-02-06 13:21:40

How to output data to the module of pages that are created using the Rich Text Editor in a React project?

Good afternoon!
Now, on a project whose back works on Laravel, there is a need to add a page module.
There are several entities that work on different engines:
1) Client (React)
2) ... A lot of all sorts of services related to the client that work on React.
3) Superadmin panel + API for all items above (Laravel)
The main administrator of the project can create any page using the Rich Text Editor ( Quill ) through the admin panel on Lara, and we must display it on the client in React.
The question is actually what - in ordinary projects, it was possible to get just a piece of markup, which then output to the client, in the form in which the user entered it. In React, this type of code insertion is unsafe and can ruin the whole project for us.
I read it in Google beforehand - everyone strongly advises not to do this + it all looks like one big crutch, which I try to avoid.
Quill has its own data format in which it can return data in addition to pure HTML markup.
But it turns out that if I need to transform this data back into JSX, then I will need the editor itself, which will be connected on the client in read mode (since we call the transformation method from the editor context) and in which I can transform this data from the delta already to the normal markup?
Honestly, it even sounds like a rare garbage and I would like to understand how to implement it correctly without crutches.
Beck is ready to cooperate, he says, tell me in what format you need to give or save, we will do everything. But the problem is that I do not fully understand this very algorithm how to implement such a case.
Please share your experience on how to do something like this. Thank you!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Filnor, 2019-03-22
@filnor

The only adequate solution to this problem was the following:

class Page extends React.Component{
    pasteHTML = ( node ) =>  node.innerHTML = this.props.page.data.text;
    render = () => (
        <>
            <section 
                className="page__data" 
                ref={ node => this.pasteHTML( node ) } 
            />
        </>
    )
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question