markdown-latex

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

安装

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

发布流程

yarn dist
knpm publish

使用

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 <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, // 全屏
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  subfield: true, // 单双栏模式
}

事件

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

图片上传

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

快捷键

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