您的位置:首页 > Web前端 > React

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

2017-03-14 20:47 1816 查看
推荐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 简单实用 !
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐