RD17 / react-trumbowyg

React wrapper for lightweight WYSIWYG editor Trumbowyg
MIT License
146 stars 21 forks source link

Failed prop type: Required prop `id` was not specified in `t` #2

Closed Deelux closed 7 years ago

Deelux commented 7 years ago

When I add this to my application I get this error in my console.

Any idea how to fix it?

Also I was wondering how do I get the data typed in Trumbowyg out of the component?

sochix commented 7 years ago

Hi! Just add id prop to your component.

you can receive data in onChange callback. Example:

 (data) => console.log(data)
Deelux commented 7 years ago

Ow wauw, that is exellent! Sorry to bother you again, but how would I then save the value of this object in a const or in the current state. The object I see in console.log is so big, I'm new to this.

Thanks a lot for your quick answer!

sochix commented 7 years ago

@Deelux you should select data.innerHtml or smthng like this. Try to explore an object in debugger by yourself. I bet you'll find a property that store innerHtml

ashleydb commented 7 years ago

This is a bug that was closed too soon. The ES6 example code is missing the id prop, which is why we're seeing an error.

The second question about getting the data out, I just went through myself.

First add an onChange, e.g.:

                    <Trumbowyg id='react-trumbowyg'
                        buttons={
                            [
                                ['formatting'],
                                'btnGrp-semantic',
                                ['link'],
                                'btnGrp-justify',
                                'btnGrp-lists',
                                ['fullscreen']
                            ]
                        }
                        data='Some text'
                        placeholder='Type your text!'
                        onChange={this.onTextChange}
                    />

And then create that onTextChange callback, looking for the target.innerHTML:

    onTextChange: function(editor) {
        this.setState({ text: editor.target.innerHTML });
    },