react markdown 編輯器插件 for-editor

介紹

由於需要用到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標籤，預覽功能