脚本宝典收集整理的这篇文章主要介绍了react markdown 编辑器插件 for-editor,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
介绍
由于需要用到react
下的markdown
编辑器功能,网上开源的react markdown
编辑器不多,没有找到合适的,索性自己写一个。markdown
编辑器主要功能就是预览,for-edITor
是一款react
下的markdown
编辑器,拥有预览,快捷添加标签,上一步,下一步功能,行号等功能,后续逐步完善更多功能。
预览
for-editor源码地址 欢迎issue,欢迎star。
界面
安装
npm install for-editor -s
使用
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'for-editor'
class App extends Component {
constructor() {
super()
this.state = {
value: ''
}
}
handleChange(value) {
this.setState({
value
})
}
render() {
const { value } = this.state
return (
<Editor value={value} onChange={this.handleChange.bind(this)} />
)
}
}
ReactDOM.render(
<Editor />,
document.getElementById('container')
)
Api
PRops
name
type
default
description
placeholder
String
请输入内容...
占位文本
value
String
-
输入框内容
lineNum
Boolean
true
是否显示行号
events
name
type
default
description
onChange
function(e)
-
内容改变时回调
onSave
function(e)
-
保存时回调
hot key
name
description
tab
两个空格缩进
ctrl+s
保存
ctrl+z
上一步
ctrl+y
下一步
更新日志
-
2019-01-07 v0.0.9
- 新增上一步,下一步,tab快捷键功能
- 新增保存功能
- 优化图标状态
- 优化页面样式
-
2018-12-29 v0.0.8
-
2018-12-27 v0.0.6
- 优化图标按钮
- 修改组件Unmount时错误bug
- 新增组件placeholder属性
-
2018-12-26 v0.0.5
- 添加上一步,下一步按钮及功能
-
2018-12-25 v0.0.4
- 修复firefox下显示bug
-
2018-12-24 v0.0.3
- 增加全屏功能
- 修改onChange参数为输入框内容
- 优化编辑框输入字体
- 修复快捷插入标签时,滚动条位置bug
- 修复firefox下显示问题
-
2018-12-23 v0.0.0
- 编辑器基础功能,快捷插入markdown标签,预览功能
以上是脚本宝典为你收集整理的react markdown 编辑器插件 for-editor全部内容,希望文章能够帮你解决react markdown 编辑器插件 for-editor所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。