react markdown编辑器插件 for-editor

2018.12.23 15:59 阅读 803

介绍

由于需要用到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标签,预览功能