CODEWITHSUNDEEP
reactjsfroala
sugandh_g
sugandh_g

Reputation: 397

Display html using text created in Froala Editor in React

I have used Froala editor in react web app. It working perfectly fine. Now how should I display the created html page from it? Do I need to create a save button that shows me the created HTML file on my browser? Or the component '' displays it itself? But I used this component and it shows me another editor. What should I do? Please help me. Here is my attempt.

import React from 'react';
import FroalaEditor from 'react-froala-wysiwyg';
import FroalaEditorView from 'react-froala-wysiwyg';
import $ from 'jquery';
window.$ = $;

class Test1 extends React.Component {
constructor() {
    super();
    this.state = {
        modelNew: 'Example text'
    };
}

handleModelChange = (modelNew) => {
    this.setState({modelNew: modelNew});
    this.props.updateState(this.state.modelNew);
}
render() {
    console.log("modelNew", this.state.modelNew);
    return (
        <div>
            <FroalaEditor
                tag='textarea'
                config={this.config}
                modelNew={this.state.modelNew}
                onModelChange={this.handleModelChange}/>
                 <FroalaEditorView model={this.state.modelNew}/>
        </div>
    );
 }
}
export default Test1;

Here FroalaEditorView takes model={this.state.content} but I have changed it to model={this.state.modelNew} . I have found this (https://www.froala.com/wysiwyg-editor/examples/live-content-preview). How do I do this in React?

Upvotes: 0

Views: 3293

Answers (2)

Nakul Nagargade
Nakul Nagargade

Reputation: 11

It looks like you are importing FroalaEditorView wrong. It should be 

import FroalaEditor from 'react-froala-wysiwyg';
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';

Upvotes: 1

st3fan
st3fan

Reputation: 1640

It looks you're mixing modelNew with model. It should work like this:

<FroalaEditor
                tag='textarea'
                config={this.config}
                model={this.state.modelNew}
                onModelChange={this.handleModelChange}/>

<FroalaEditorView model={this.state.modelNew}/>

Upvotes: 0

Related Questions