推荐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 文件中导入样式文件
方法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 简单实用 !