React JS 所见即所得保存答案

【问题标题】：React JS WYSIWUG SavingReact JS 所见即所得保存
【发布时间】：2015-08-05 20:59:00
【问题描述】：

寻求帮助在我的 React JS 应用程序中创建/实施 WYSIWYG 电子邮件创建工具。我曾尝试使用 Redactor 和alloyEditor，但由于 redactor 主要由 JQuery 构建，alloyEditor 无法在 iPad 上运行，因此遇到了问题。

我相信我的问题是通过 ajax HTML 内容加载到它们中，因为它们没有在 React 代码中格式化。

即使在这个问题之后，每个<div> 都有data-reactid 贯穿其中。

有没有现有的例子，或者有人可以指出我正确的方向？

【问题讨论】：

我使用承诺等到所有数据都加载完毕。然后将其提取到一个数组中。然后我将该数组的所有内容映射到单独的反应组件中，并为它们提供单独的键作为道具。

标签： javascript reactjs wysiwyg

【解决方案1】：

尝试使用这个模块React-Quill

在你得到 Ajax 请求的响应后，将其传递给

<CustomQuill value={AjaxResponseHtml} />

var ReactQuill = require('react-quill');
var CustomQuill = React.createClass({
  mixins: [ ReactQuill.Mixin ],

  componentDidMount: function() {
    var editor = this.createEditor(
      this.getEditorElement(),
      this.getEditorConfig()
    );
    this.setState({ editor:editor });
  },

  componentWillReceiveProps: function(nextProps) {
    if ('value' in nextProps && nextProps.value !== this.props.value) {
      this.setEditorContents(this.state.editor, nextProps.value);
    }
  },

  /* ... */
});

【讨论】：