# npmnpm install for-editor-herb -S# yarnyarn add for-editor-herb

import React, { Component } from 'react'import ReactDOM from 'react-dom'import Editor from 'for-editor-herb'// 引入代码高亮包const Hljs = require('highlight.js')class App extends Component {  constructor() {    super()    this.state = {      value: ''    }  }  componentDidMount() {    // 在componentDidMount生命周期注册你想高亮的语言    Hljs.registerLanguage('css', require('highlight.js/lib/languages/css'))    Hljs.registerLanguage('json', require('highlight.js/lib/languages/json'))    Hljs.registerLanguage('less', require('highlight.js/lib/languages/less'))    Hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'))    Hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))    Hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'))    Hljs.registerLanguage('go', require('highlight.js/lib/languages/go'))  }  handleChange(value) {    this.setState({      value    })  }  render() {    const { value } = this.state    // 支持默认语言('en', 'zh-CN', 'zh-TW', 'jp'), 也支持本土化    const customLang: any = {      placeholder: '开始编辑...',      undo: '上一步',      redo: '下一步',      h1: '一级标题',      h2: '二级标题',      h3: '三级标题',      h4: '四级标题',      h5: '五级标题',      h6: '六级标题',      para: '段落',      italic: '斜体',      bold: '粗体',      bolditalic: '斜粗体',      delline: '删除线',      underline: '下划线',      keytext: '键盘文本',      superscript: '上标',      subscript: '下标',      marktag: '高亮标签',      table: '表格',      quote: '引用',      img: '添加图片链接',      link: '链接',      list: '列表',      orderlist: '有序列表',      disorderlist: '无序列表',      checklist: '勾选框列表',      inlinecode: '行内代码',      code: '代码块',      collapse: '折叠块',      katex: 'KaTeX',      save: '保存',      preview: '预览',      singleColumn: '单栏',      doubleColumn: '双栏',      fullscreenOn: '全屏编辑',      fullscreenOff: '退出全屏',      addImgLink: '添加图片链接',      addImg: '上传图片',      toc: '生成大纲'    }    // 传递Hljs.highlightAuto函数    return （      <Editor        language={customLang}        value={value}        onChange={() => this.handleChange()}        highlight={Hljs.highlightAuto}      />    ）  }}ReactDOM.render(<App />, document.getElementById('root'))

/*默认工具栏按钮全部开启, 传入自定义对象  例如: {    h1: true, // h1    code: true, // 代码块    preview: true, // 预览  }  此时, 仅仅显示此三个功能键  注:传入空对象则不显示工具栏*/toolbar: {    h1: true,    h2: true,    h3: true,    h4: true,    h5: true,    h6: true,    img: true,    list: true,    para: {      paragraph: true,        // 控制整个部分是否显示      italic: true,      bold: true,      bolditalic: true,      delline: true,      underline: true,      keytext: true,      superscript: true,      subscript: true,      marktag: true    },    table: true,      // 表格    quote: true,      // 引用    link: true,       // 链接    inlinecode: true,  // 行内代码    code: true,       // 代码块    collapse: true,   // 折叠    katex: true,      // katex    preview: true,    // 预览    expand: true,     // 全屏    undo: true,    redo: true,    save: true,    subfield: true,   // 单双栏切换    toc: true         // 生成大纲插入}

interface IWords {  placeholder: string  h1: string  h2: string  h3: string  h4: string  h5: string  h6: string  undo: string  redo: string  list: string  orderlist: string  disorderlist: string  checklist: string  para: string  italic: string  bold: string  bolditalic: string  delline: string  underline: string  keytext: string  superscript: string  subscript: string  marktag: string  quote: string  table: string  img: string  link: string  inlinecode: string  code: string  collapse: string  katex: string  save: string  preview: string  singleColumn: string  doubleColumn: string  fullscreenOn: string  fullscreenOff: string  addImgLink: string  addImg: string  toc: string}

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)}      />    )  }}