CODEWITHSUNDEEP
reactjswysiwygfroala
A.S.J
A.S.J

Reputation: 637

Froala in ReactJS application: Inline editing

I'm building an application in which I want to include froala editor. I'm very new to using these kinds of plugins and I'm having trouble "translating" it to ReactJS. I read through Froala's ReactJS docs, however, I couldn't seem to make it work.

This is the JS code they suggest to use for inline editing on a <div id="froala-editor">:

 <script>
     $(function() {
         $('div#froala-editor').froalaEditor({
             toolbarInline: true,
             charCounterCount: false,
             toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'],
            toolbarVisibleWithoutSelection: true
        })
  });
</script>

In their docs it says to use pass options as component attributes, therefore I tried this:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            model : "Edit me"
        }
    }
    render() {
        return (
            <FroalaEditor 
                tag='textarea'
                model={this.state.model}
                toolbarInline={true}
                charCounterCount={false}
                toolbarButtons={ ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']}
                toolbarVisibleWithoutSelection={true}
            />
        );
    }
}

Defining configurations as variable did not work either. Could someone tell me what I'm doing wrong and what's the right way to do it?

Upvotes: 1

Views: 884

Answers (1)

A.S.J
A.S.J

Reputation: 637

Nevermind, I just got it to work. In case anyone else encounters this problem:

I added 

config={this.state.configs}

as an attribute to the <FroalaEditor>-component and specified the configurations in the state. These are the settings that I specified for my case:

configs : {
            toolbarInline: true,
            charCounterCount: false,
            toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'],
            toolbarVisibleWithoutSelection: true
        }

Upvotes: 3

Related Questions