react.js 中如何使用 Simditor ？

Question

最近项目中需要使用到富文本编辑器，项目是一个 Meteor with react 项目，所以就准备采用simditor，但是官方文档很少，也没有给出后台配置说明。我现在不解的是，怎么储存数据？怎么使用储存的数据进行展示？他是怎么保存编辑时候的格式的？还有图片的插入问题。望大神指点，给出思路。第一次用接触富文本编辑器

Answer 1

代码片段供参考：

  componentDidMount() {
    var textbox = ReactDOM.findDOMNode(this.refs.textarea);
    this.editor = new Simditor({
      textarea: $(textbox),
      toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color',
        'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'indent', 'outdent', 'alignment', 'hr']
    });
    this.editor.on("valuechanged", (e, src) => {
      this.props.fields.body.onChange(this.editor.getValue());
    });
  }

  componentDidUpdate (prevProps) {
    if (prevProps.body !== this.props.body) {
      this.editor.setValue(this.props.body);
    }
  }

<textarea className="form-control" ref='textarea' rows="50" {...body}/>

Answer 2

富文本编辑器一般是让你可以用可视化的方式编辑 HTML ，无论哪种编辑器都是隐藏默认的 Textarea ，然后通过插入各种标签（如工具栏，渲染结果）显示一个格式化好的内容给你看。而 React 有生命周期，要显示富文本编辑器的话，要在 React 把 DOM 初始化好才能插入操作。

那么，回到实际操作的问题，先用 React 绑定一个 Property 到 Textarea 上，最后在 componentDidMount 方法中将 Simditor 绑定到对应的 Textarea 。

Answer 3

我现在尝试使用material-ui，顺便也找到了一个Simditor的封装模块material-ui-html-field