CodeDocu.com

 

 

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 }}

 

/>

 

Using Editable of React Input Fields

 

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() >------

    }

 


Software Entwicklung Stuttgart NĂ¼rtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel