演示地址
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: ''
}
}
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 |
下一步 |
