for-editor-herb

# npm
npm install for-editor-herb -S
# yarn
yarn add for-editor-herb

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Editor from 'for-editor-herb';

// требуется пакет `highlight.js`
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(значение) {
    this.setState({
      значение,
    });
  }
}
```  render() {
    const { значение } = this.state;
    // Поддержка основного языка ('en', 'zh-CN', 'zh-TW', 'jp') и локализация
    const customLang: any = {
      placeholder: "Начните редактирование...",
      undo: "Отменить",
      redo: "Повторить",
      h1: "Заголовок  Yöntem 1",
      h2: "Заголовок 2",
      h3: "Заголовок 3",
      h4: "Заголовок 4",
      h5: "Заголовок 5",
      h6: "Заголовок 6",
      img: "Ссылка на изображение",
      para: "Абзац",
      italic: "Курсив",
      bold: "Жирный шрифт",
      bolditalic: "Жирный курсив",
      delline: "Вычеркнутый текст",
      underline: "Подчеркнутый текст",
      keytext: "Текст клавиатуры",
      superscript: "Верхний индекс",
      subscript: "Нижний индекс",
      marktag: "Маркер",
      table: "Таблица",
      quote: "Цитата",
      link: "Ссылка",
      list: "Список",
      orderlist: "Упорядоченный список",
      disorderlist: "Неупорядоченный список",
      checklist: "Чеклист",
      inlinecode: "Встроенный код",
      code: "Код",
      collapse: "Свернуть",
      katex: "KaTeX",
      save: "Сохранить",
      preview: "Просмотреть",
      singleColumn: "Одна колонка",
      doubleColumn: "Две колонки",
      fullscreenOn: "Полноэкранный режим ВКЛ",
      fullscreenOff: "Полноэкранный режим ВЫКЛ",
      addImgLink: "Добавить ссылку на изображение",
      addImg: "Загрузить изображение",
      toc: "Сгенерировать оглавление"
    };    }
    // Passing the function `Hljs.highlightAuto` to the editor
    return (
      <Editor
        value={значение}
        onChange={() => this.handleChange()}
        highlight={Hljs.highlightAuto}
      />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('document-root'))

/*
  По умолчанию все свойства панели инструментов установлены как true,
  Вы можете настроить объект, чтобы он включал эти свойства.
  Например: {
    h1: true,
    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,
    preview: true,
    expand: true,
    undo: true,
    redo: true,
    save: true,
    subfield: true,
    toc: true         // генерирует оглавление
}

#### Локализация

> IWords

```js
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
}

 handleChange(значение) {
    this.setState({
      значение,
    });
  }

  addImg($файл) {
    this.$vm.current.$img2Url($файл.name, 'file_url');
    console.log($файл);
  }

  render() {
    const { value } = this.state;

    return (
      <Editor
        ref={this.$vm}
        value={value}
        addImg={($файл) => this.addImg($файл)}
        onChange={(значение) => this.handleChange(значение)}
      />
    );
  }
}
```

### Горячие клавиши

| имя   | описание          |
|------ | ------------------|
| tab   | два пробела       |
| ctrl+s | сохранить        |
| ctrl+z | отменить         |
| ctrl+y | повторить        |

## Обновление

* [Журнал обновлений](./doc/UPDATELOG.md)

## Лицензия

for-editor использует лицензию [MIT License](./LICENSE).
```