Freelance Project Requests 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() >------


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


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





Contact for Jobs, Project Requests: