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

Verwenden Editierbaren von React Eingabefeldern

01.03.2021 (👁618)


Wenn man in React ein HTML Editierbares Eingabefeld verwenden möchte, dann muss man nur das Attibut contentEditable in das HTML Tag einfügen.

Allerdings wird ja bei React beim Einfügen von Text, der HTML darstellt, automatisch in HTML-Elemente in der DOM Document umgewandelt.

Das ist ein zentrales Element in HTML selbst, und kommt noch nicht einmal von React.

Was bedeutet das?

1)    Man kann den Value eines ContentEditable Feldes nicht mit einer React state variable anbinden

2)    Man muss den innerHTML-Content mit _html einmalig beim Laden initialisieren

3)    Anschliessend kann man den Inneren HTML wert nach Änderungen durch Texteingaben durch das Element mit getElementByID ausfindig machen und den innerHTML auslesen

Editierbares Div-Feld in React

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

 contentEditable={true} suppressContentEditableWarning={true}

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

/>

Beim Senden wird nur der InnerHTML verwendet

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

        let editor_innerhtml = element.innerHTML;

 

 

Code zum Senden von ContentEditable Inhalt

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

    }