Question

我在反应网络应用中使用了Froala编辑器。它工作得很好。现在我应该如何显示创建的html页面呢？我是否需要创建一个保存按钮，在我的浏览器上显示创建的HTML文件？或者组件＆＃39;＆＃39;显示它本身？但我使用了这个组件，它向我展示了另一个编辑器。我该怎么办？请帮我。这是我的尝试。

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;

这里FroalaEditorView采用model = {this.state.content}，但我已将其更改为model = {this.state.modelNew}。我找到了这个（https://www.froala.com/wysiwyg-editor/examples/live-content-preview）。我如何在React中做到这一点？

Answer 1

似乎您导入的FroalaEditorView错误。应该是

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

Answer 2

看起来你正在将modelNew与模型混合在一起。它应该像这样工作：

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

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

使用在React中的Froala编辑器中创建的文本显示html

2 个答案: