推荐一款react的markdown编辑器插件

介绍

由于需要用到react下的markdown编辑器功能，网上开源的react markdown编辑器不多，没有找到合适的，索性自己写一个。markdown编辑器主要功能就是预览，for-editor是一款react下的markdown编辑器，拥有预览，快捷添加标签，上一步，下一步功能，行号等功能，后续逐步完善更多功能。

预览

for-editor预览

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标签，预览功能

转载于:https://juejin.im/post/5c35a21cf265da611e4dd833