markdown-latex

> @base/markdown-latex 是一个基于 react 的 markdown 语法编辑器 支持latex语法

$3

``js
npm install markdown-latex -S
yarn add markdown-latex
`

$3


`js
yarn dist
knpm publish
`

$3


`js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'markdown-latex'

class App extends Component {
constructor() {
super()
this.state = {
value: ''
}
}

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

render() {
const { value } = this.state
return this.handleChange()} />
}
}

ReactDOM.render(, document.getElementById('root'))
`

$3

#### 属性

| 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 | 如下 | 自定义工具栏 |

`js
/*
默认工具栏按钮全部开启, 传入自定义对象
例如: {
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, // 全屏
undo: true, // 撤销
redo: true, // 重做
save: true, // 保存
subfield: true, // 单双栏模式
}
`

#### 事件

| name | params 参数 | default | description |
| -------- | ------------- | ------- | -------------- |
| onChange | String: value | - | 内容改变时回调 |
| onSave | String: value | - | 保存时回调 |
| addImg | File: file | - | 添加图片时回调 |

##### 图片上传

`js
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 (
ref={this.$vm}
value={value}
addImg={($file) => this.addImg($file)}
onChange={value => this.handleChange(value)}
/>
)
}
}
``

#### 快捷键

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