🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

for-editor is a minimal, fast markdown editor for React app.

React Text

Documentation

for-editor

for-editor 是一个基于 react 的 markdown 语法编辑器

English Documents

安装

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()} />   } }  ReactDOM.render(<App />, document.getElementById('root'))

Api

属性

name type default description
value String - 输入框内容
placeholder String 开始编辑... 占位文本
lineNum Boolean true 是否显示行号
style Object - 编辑器样式
height 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 下一步

更新

Licence

for-editor is MIT Licence.


You May Also Like