for-editor | 一款基于React的Markdown编辑器插件

演示地址

github地址

功能

• 支持简体中文、英语
• 移动端适配
• 实时预览
• 行号、快捷插入标签等

教程
安装

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: ''
    }
    this.$vm = React.createRef()
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

 addImg($file) {
    this.$vm.current.$img2Url($file.name, 'file_url')
    console.log($file)
  }

  render() {
    const { value } = this.state
    return <Editor 
    		ref={this.$vm}  
    		addImg={($file) => this.addImg($file)}  
    		value={value} onChange={() => this.handleChange()} />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Api
属性

name	type	default	description
value	String	—	输入框内容
----	----	----	----
placeholder	String	开始编辑…	占位文本
lineNum	Boolean	true	是否显示行号
styl e	Object	-	编辑器样式
heigh t	String	600px	编辑器高度
preview	Boolean	false	预览模式
expand	Boolean	false	全屏模式
subfield	Boolean	false	双栏模式(预览模式激活下有效)
language	String	zh-CN	语言(支持 zh-CN:中文简体, en:英文)
toolbar	Object	如下	自定义工具栏

/*
  默认工具栏按钮全部开启, 传入自定义对象
  例如: {
    h1: true, // h1
    code: true, // 代码块
    preview: true, // 预览
  }
  此时, 仅仅显示此三个功能键
  注:传入空对象则不显示工具栏
 */

toolbar: {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
}

事件

name	type	default	description
onChange	function(e)	—	内容改变时回调
onSave	function(e)	—	保存时回调

快捷键

name	description
tab	两个空格缩进
ctrl+s	保存
ctrl+z	上一步
ctrl+y	下一步