@pitrix/markdown-editor
v0.1.2
Published
react markdown editor
Downloads
5
Readme
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.