react markdown 编辑器插件 for-editor

发布时间:2019-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react markdown 编辑器插件 for-editor脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍

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

预览

for-editor预览

for-editor源码地址 欢迎issue,欢迎star。

界面

react markdown 编辑器插件 for-editor

安装

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,请注明来意。