推荐一款Markdown富文本编辑器 React-quill,以及修改React-quill默认配置,支持React !

推荐React-Quill ，Github react-quill。

1. react-markdown

需要使用markdown的语法,对非技术人员使用不太友好。

2. Draft.js

Github draft.js

优点就是灵活性特别高 ,可以自己设置文本编辑器的样式,如同H5的Canvas一样给你了画笔 你可以任意绘画 ；

所以缺点也出来了,需要自己配置的属性过多,需要花费大量时间！如果真想用它可以扣它demo代码源码，会事半功倍。

3. 坑踩完了,最后来说说我们的 react-quill

第一步下载： npm install react-quill@v1.0.0

第二步导入： import ReactQuill from 'react-quill

第三步使用：  

<ReactQuill 

theme="snow"

value={ this.state.text }

onChange={(val)=>{

// val === 转化出来的html

this.setState({

text: val

})

}}/>

第四步导入样式表: 发现样式没出来 ？

方法1. 你需要在 根 html  文件中导入样式文件 

    
    

     
     <link rel="stylesheet" href="//cdn.quilljs.com/1.2.6/quill.snow.css">
    
    
    
    


    
    

方法2. 

或者是像第二步导入 ReactQuill 一样,  通过 import 或者 require 方式导入样式

 import ReactQuill from 'react-quill

 import 'react-quill/dist/quill.snow.css' ( 或者是 require('react-quill/dist/quill.snow.css')  )

效果图如下：

第五步默认样式修改：

我们可以找到 其依赖的 quill 包的 quill.js 文件， 直接对源码里面的配置项因自己需求进行修改 。比较粗暴的做法。

详细 github: github

总结： ReactQuill 简单实用 ！