Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Using Editable of React Input Fields

01.03.2021 (👁11823)

Using Editable of React Input Fields

 

If you want to use an HTML editable input field in React, you only have to insert the Attibut contentEditable into the HTML tag.

However, react automatically converts HTML elements into the DOM document when you insert text that represents HTML.

This is a central element in HTML itself, and doesn't even come from React.

 

What does that mean?

1.               You cannot connect the value of a ContentEditable field with a React state variable

2.               You have to initialize the innerHTML content with _html once when loading

3.               Then you can find the inner HTML worth after changes by text input by the element with getElementByID and read the innerHTML

 

 

Editable Div Field in React

<div id="ctleditor_html" className="edit_texteditor"

 contentEditable={true} suppressContentEditableWarning={true}

  dangerouslySetInnerHTML={{ __html: this.state.htmlcontent }}


/>

When sending, only the InnerHTML is used

 

        let element = document.getElementById('ctleditor_html');

        let editor_innerhtml = element.innerHTML;

 

 

Code to send ContentEditable content

    async send_Data_to_Api() {

        //------< send_Data_to_Api() >------

        console.log(this.state);

        //< get text >

        let element = document.getElementById('ctleditor_html');

        let editor_innerhtml = element.innerHTML;

        let text_of_htmleditor = element.innerText;

        //</ get text >

        //--< prepare send >--

        const requestOptions = {

            method: 'PUT',

            headers: { 'Content-Type': 'application/json' },

            body: JSON.stringify(

                {

                    //< data to send >

                    idarticle: this.state.idarticle,

                    iduser: this.state.iduser,

                    title: this.state.title,

                    htmlcontent: editor_innerhtml,

                    textcontent: text_of_htmleditor,

                    folder: this.state.folder,

                    keywords: this.state.keywords,

                    //</ data to send >

                })

        };

        //--</ prepare send >--

        //< send >

        const response = await fetch('api/articles/' + this.state.idarticle, requestOptions); //*SEND DATA

        //</ send >

        if (response.status !== 200) {

            //-< error: sending >-

            if (response.status === 400) alert("Bad Data Request");

            else if (response.status === 403) alert("User is not Owner");

            else alert('send error');

            //-</ error: sending >-

        }

        else {

            //-< ok: sending result >-

            const data = await response.json();

            //*refresh return values

            this.setState({

                idarticle: data.idArticle,

                iduser: data.idUser,

                title: data.title,

                htmlcontent: data.htmlcontent,

                folder: data.folder,

                keywords: data.keywords,

                loading: false,

                status: "data ok"

            });

            //-</ ok: sending result >-

        }

        //------</ send_Data_to_Api() >------

    }