使用Froala Editor富文本插件 react版本

使用Froala Editor富文本插件 react版本

原地址： https://www.froala.com/wysiwyg-editor/
react版本地址： https://www.froala.com/wysiwyg-editor/docs/framework-plugins/react

第一步：引入配置展示官网实例

配置完webpack之后,报错：

index.js:1 Uncaught (in promise) ReferenceError: $ is not defined  
at t.value (index.js:1)

解决webapck错误：index.js:1 Uncaught (in promise) ReferenceError: $ is not defined

原因是：webpack中配置的jquery没有安装引入。

webpack.config.js

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
]

解决。。。。。

index.js文件

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

第二步：怎么输出一个html

这是一个极好的编辑器，每次做出更改都可以输出html，不需要自己做处理啦啦啦。

直接上代码：

class Editor extends React.Component {
  constructor () {
    super();
    this.handleModelChange = this.handleModelChange.bind(this);
    this.state = {
      model: 'Example text' // 相当于 <p>Example text</p>
    };
  }

  handleModelChange = (model) => {
    console.log(model); // 这个model得到的直接就是html

    this.setState({
      model: model
    });
  }
  render () {
    return <FroalaEditor
      model={this.state.model}
      onModelChange={this.handleModelChange}
    />
  }
}

这时你看到的只是一个超简单的编辑器。

第三步：设置自定义工具栏 toolbarButtons

<FroalaEditor 
  model = {this.state.model} 
  onModelChange = { this.handleModelChange } 
  config={{
    toolbarButtons:['fullscreen', 'bold']   // 重点
  }}
/> 

第四步：设置为 选中后才出现富文本编辑器工具栏 toolbarInline

<FroalaEditor model = {this.state.model} onModelChange = { this.handleModelChange } 
  config={{
    toolbarButtons:['fullscreen', 'bold', 'italic', 'subscript'],
    toolbarInline:true // 重点
  }}
/> 

config中具体的参数可以参考 https://www.froala.com/wysiwyg-editor/docs/options