Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

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

    }

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de