求推荐，React 的富文本编辑器，项目中大家用的是选择自己造轮子？

**coocssweb** · September 21, 2015, 6:19am

需求：如题。
baidu editor、kindeditor 这一类的就不用推荐了。
因为项目是用react做的。所以想请教一下大家在用react做项目的过程中，富文本编辑器用什么？
是自己内部造轮子，还是用开源的呢？求推荐

**jiyinyiyong** · September 21, 2015, 6:55am

用过 jQuery 实现的 pen 和 simditor, 后者还可以, 没有 React 专门设计的编辑器也只能这样了.

**coocssweb** · September 21, 2015, 7:43am

simditor 可以用 require 的形式进行渲染吗？
样式文件能用 require的形式加载吗？
还是只能在html页面中引用呢？

**jiyinyiyong** · September 21, 2015, 7:56am

基于 jQuery 的模块就是了… 相对于 CommonJS 模块来说挺麻烦的

**coocssweb** · September 21, 2015, 8:26am

能贴段代码看simditor在React项目中怎么用吗？
用react 封装后使用，还是直接在页面html中引入资源文件呢？

**jiyinyiyong** · September 21, 2015, 8:29am

按照 Webpack 提供的引用 UMD 模块的代码的方案引用的, 不会在 HTML 里直接写.

**coocssweb** · September 21, 2015, 9:37am

能讲细一点吗？大致给段代码。
我用时候不不知道为什么一直报错。也许是用错了吧。

**coocssweb** · September 21, 2015, 2:53pm

请问css文件怎么引入呢？？

var React = require('react');
var Simditor = require('simditor');
var $ = require('jquery');
var Editor = React.createClass({
    componentDidMount : function(){
        var textbox = React.findDOMNode(this.refs.textarea);
        var editor = new Simditor({
            textarea: $(textbox)
        });
    },
    render : function(){
        return (
            <div>
                <textarea ref='textarea' />
            </div>
        )
    }
})

React.render(
    <Editor />,document.body
)

css资源文件没办法用require的形式导入，一导入就提示发生错误。

**Nero** · September 21, 2015, 2:09pm

我们现在在用百度的 UEditor ，
有坑，就是会有死循环的， setContent 之后会触发，contentChange 事件，然后 render 有会触发 setContent；

醉了；

最后改写了 UEditor的方法。。。

**coocssweb** · September 21, 2015, 2:31pm

用百度UEditor你们css这些资源文件怎么引入呢？
require node_modules/uditor下的css吗？？

**Nero** · September 21, 2015, 11:46pm

我们的方法比较土。。。

css js 直接页面引用啊

**coocssweb** · September 22, 2015, 1:18am

ok！自己搞定了。
用的是simditor插件。
用的方法如下：

1、npm install simditor;
2、在需要用到的组件里如Article.js里用进行引用，引用方法如下：（一定要style-loader、css-loader一定要安装）

var Simditor = require(‘simditor’);
import ‘style!css!../…/node_modules/simditor/styles/simditor.css’;

3、贴一段我的测试代码：

var React = require('react');
var Simditor = require('simditor');
var $ = require('jquery');
import 'style!css!../../node_modules/simditor/styles/simditor.css';
var Editor = React.createClass({
    componentDidMount : function(){
        var textbox = React.findDOMNode(this.refs.textarea);
        var editor = new Simditor({
            textarea: $(textbox)
        });
    },
    render : function(){
        return (
            <div>
                <textarea ref='textarea' />
            </div>
        )
    }
})

React.render(
    <Editor />,document.body
)

然后simditor的整体感觉是，风格不错，但为了体验更好可能要再另行做一些修改；如上传插入图片、插入链接的功能等。。。。。。
因为涉及到可能还会做修改，因此可以把css文件copy一份到你的项目css文件中，对该做修改
，然后import该文件，否则一旦重新npm你的修改的文件就会被覆盖了。。。。。

结贴

**zation** · September 22, 2015, 6:34am

原来teambition用的tower的开源编辑器啊，是觉得挺眼熟的呢~

**rix** · September 24, 2015, 9:27am

推薦 wysihtml

無依賴，無自帶樣式，可以直接 require。高度自定義。

用 npm i -D voog/wysihtml 進行安裝。

調用方式：

import React, { PropTypes } from 'react';

export default class Editor extends React.Component {
  static propTypes = {
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      value: newProps.value
    });
    this.state.editor.setValue(newProps.value, true);
  }

  componentDidMount() {
    var self = this;
    if(!window.wysihtml5) {
      require('wysihtml/dist/wysihtml-toolbar');
    }
    const EDITOR = window.wysihtml5;
    const textarea = React.findDOMNode(this.refs.textarea);
    const editor = new EDITOR.Editor(textarea, {
      parserRules: {
        tags: {
          strong: {},
          b:      {},
          i:      {},
          em:     {},
          br:     {},
          p:      {},
          div:    {},
          span:   {},
          ul:     {},
          ol:     {},
          li:     {},
          img: {
              check_attributes: {
                  height: "dimension",
                  width: "dimension",
                  alt: "alt",
                  src: "url"
              },
              add_class: {
                  align: "align_img"
              }
          },
          a:      {
            set_attributes: {
              target: "_blank",
              rel:    "nofollow"
            },
            check_attributes: {
              href:   "url"
            }
          }
        }
      }
    });
    self.setState({ editor });
    editor.on('load', function() {
      editor.setValue(self.state.value, true);
      editor.on('change', self.handleChange.bind(self));
    });
  }

  handleChange() {
    const value = this.state.editor.getValue();
    if (typeof this.props.onChange === 'function') {
      this.props.onChange({ target: { value } });
    }
  }

  shouldComponentUpdate() {
    return false;
  }

  componentWillUnmount() {
    const { editor } = this.state;
    if (editor) {
      editor.destroy();
    }
  }

  state = {
    value: this.props.value
  }

  render() {
    return (
      <div styleName="textarea" ref="textarea"/>
    );
  }
}

**Martin_zhz1994** · January 21, 2016, 2:29pm

你好作者，请问Simditor在项目中，后端怎么配置？怎么保存到数据库？怎么保持格式？

**zhiquan.yu** · July 29, 2016, 1:20pm

Facebook 的 draft-js

**Lucas-Qi** · July 29, 2016, 3:11am

不应该是 Facebook的 Draftjs吗？

**stonewl897** · August 16, 2016, 4:49pm

hi,你是怎么修改的源码呢，能否详细说下吗

**Nero** · August 17, 2016, 12:53am

把参考setContent 方法，增加了一个 setContentSilent 方法，目的是解决setContent时会触发 onContentChange事件；
但是后面遇到了新的bug，在源代码编辑模式下，无法更新内容，uEditor的代码逻辑没有深入得去看；后面又改回来了。 -_- !

**stonewl897** · August 18, 2016, 3:31am

后面又改回来了，那之前死循环的问题怎么处理了