$ npm i le-markdown-editor --save

import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'
// ...Vue.use(leMarkdownEditor)
// ....
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

<div id="app">
  <div id="editor-main">
    <le-editor v-model="value" :hljs-css="hljsCss" :image-uploader="imageUploader" @save="save"></le-editor>
  </div>
</div>
```<script>
  export default {
    // ...
    data() {
      return {
        hljsCss: 'agate',
        value: 'Содержание в формате markdown',
        // пользовательская настройка
        imageUploader: {
          custom: false,
          fileType: 'file',
          fileNameType: '',
          imagePrefix: 'http://106.54.92.121', // префикс адреса для просмотра после успешной загрузки изображения
          type: 'server',
          url: 'http://106.54.92.121:82/upload' // адрес API для загрузки
        }
      }
    },
    methods: {
      // пользовательская загрузка изображений
      // uploadImg: function ($vm, file, fileName) {
      //   console.log($vm)
      //   console.log(file)
      //   console.log(fileName)
      //   // добавление изображения
      //   // два параметра - первый это путь доступа к изображению, второй - имя файла
      //   $vm.insertImg(`${$vm.config.imageUploader.imagePrefix}${fileName}`, fileName)
      // },
      save: function (val) {
        // получение текста для просмотра
        console.log(this.value) // здесь находится исходный текст в формате markdown
        console.log(val) // здесь находится сгенерированный текст в формате html
      }
    },
    mounted() {
    }
  }
</script><style lang="scss">
  #app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
  }

  #editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

<div id="app">
    <div id="main">
        <!--    <h2>Отображение через HTML</h2>-->
        <!--    <le-preview ref="html-preview" :value="html" :hljs-css="hljsCss"></le-preview>-->
        <h2>Отображение через Markdown</h2>
        <le-preview ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
     </div>
</div>

<script>
  export default {
    // ...
    data() {
      return {
        hljsCss: 'agate',
        html: 'Здесь располагается текст в формате HTML',
        mdContent: 'Здесь располагается текст в формате Markdown'
      }
    },
    methods: {},
  }
</script><style>
  #app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
  }

  #main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

npm i le-markdown-editor --save

import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'

Vue.use(leMarkdownEditor)

// ...
plugins: [
  '@/plugins/view-ui',
  '@/plugins/le-markdown-editor',
],
//...

<template>
  <div class="container">
    <div id="editor-main">
      <le-editor v-model="value" :hljs-css="hljsCss" :full-screen="true" :image-uploader="imageUploader" @save="save"></le-editor>
    </div>
  </div>
</template>
```<script>
  export default {
    data() {
      return {
        hljsCss: 'agate',
        value: 'Содержание в формате markdown',
        // Настройки
        imageUploader: {
          custom: false,
          fileType: 'file',
          fileNameType: '',
          imagePrefix: 'http://106.54.92.121', // Префикс адреса для просмотра изображений после успешной загрузки
          type: 'server',
          url: 'http://106.54.92.121:82/upload' // Адрес API для загрузки
        }
      }
    },
    methods: {
      // Обработка загрузки изображений
      // uploadImg: function ($vm, file, fileName) {
      //   console.log($vm)
      //   console.log(file)
      //   console.log(fileName)
      //   // Добавление изображения
      //   // Два параметра: первый - это путь к изображению, второй - имя файла
      //   $vm.insertImg(`${$vm.config.imageUploader.imagePrefix}${fileName}`, fileName)
      // },
      save: function (val) {
        // Получение текста для отображения
        console.log(this.value) // Это исходный текст в формате markdown
        console.log(val) // Это html, сгенерированный из markdown
      }
    },
    mounted() {
    }
  }
</script><style>
  .container {
    margin: 0 auto;
    width: 1200px;
    height: 500px;
  }

  #editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

a11yDark
a11yLight
agate
anOldHope
androidstudio
arduinoLight
arta
ascetic
atelierCaveDark
atelierCaveLight
atelierDuneDark
atelierDuneLight
atelierEstuaryDark
atelierEstuaryLight
atelierForestDark
atelierForestLight
atelierHeathDark
atelierHeathLight
atelierLakesideDark
atelierLakesideLight
atelierPlateauDark
atelierPlateauLight
atelierSavannaDark
atelierSavannaLight
atelierSeasideDark
atelierSeasideLight
atelierSulphurpoolDark
atelierSulphurpoolLight
atomOneDarkReasonable
atomOneDark
atomOneLight
brownPaper
codepenEmbed
colorBrewer
darcula
darkblue
darkblue2
default
docco
dracula
far
foundation
githubGist
github
gml
googlecode
gradientDark
lightblue
lightbrown
magula
monoblue
monokaiSublime
monokai
nightOwl
nord
obsidian
ocean
paraisoDark
paraisoLight
pojoaque
purebasic
qtcreatorDark
qtcreatorLight
railscasts
rainbow
routeros
schoolBook
shadesOfPurple
solarizedDark
solarizedLight
sunset
tomorrowNightBlue
tomorrowNightBright
tomorrowNightEighties
tomorrowNight
tomorrow
vs
vs2015
xcode
xt256
zenburn
```### Конфигурация загрузки изображенийЛокальная загрузка изображений временно поддерживает только перетаскивание или вставку изображений из буфера обмена (на Windows для вставки локальных изображений требуется предварительный просмотр, а для скриншотов — нет). Изображения загружаются на GitHub-репозиторий и ваш сервер. Несмотря на то, что многие жалуются на медленный доступ к GitHub, тесты показывают, что хотя скорость загрузки невелика, при использовании она чувствуется неплохо. Однако это бесплатно, поэтому для пользователей без хостинга изображений и сервера это очень удобно. Если вас это беспокоит, вы можете загружать изображения на свой сервер или использовать расширение для загрузки на облачное хранилище.

**Внимание:** В macOS при вставке локального изображения в редакторе остается имя исходного файла, но на Windows такой проблемы нет. Хотя можно удалить эту часть текста через редактор, это немного неудобно, поэтому пока не исправлено. Эта функция требует доработки. Если вам это не нравится, используйте функцию перетаскивания.

Демонстрация загрузки изображений:

![Демонстрация загрузки изображений](https://cdn.jsdelivr.net/gh/Chave-Z/picture/71d962718f6443abbdea6802ee995f79.gif)

Подробнее здесь --> [Конфигурация загрузки изображений](doc/cn/image.md)

### Быстрые клавишные команды редактирования
**Внимание:** Все быстрые клавишные команды работают только тогда, когда меню открыто.| Клавиша        | Функция              |
| --------------- | -------------------- |
| Ctrl + Z       | Отмена               |
| Ctrl + Y       | Восстановление       |
| Ctrl + B       | Жирный шрифт         |
| Ctrl + D       | Зачеркнутый шрифт    |
| Ctrl + U       | Подчеркнутый шрифт   |
| Ctrl + I       | Курсив               |
| Ctrl + Q       | Цитата               |
| Ctrl + M       | Выделение            |
| Ctrl + L       | Ссылка               |
| Ctrl + 1(F1)   | Заголовок 1          |
| Ctrl + 2(F2)   | Заголовок 2          |
| Ctrl + 3(F3)   | Заголовок 3          |
| Ctrl + 4(F4)   | Заголовок 4          |
| Ctrl + 5(F5)   | Заголовок 5          |
| Ctrl + 6(F6)   | Заголовок 6          |
| Ctrl + Alt + S | Верхний индекс       |
| Ctrl + Alt + B | Нижний индекс        |
| Ctrl + Alt + L | Левое выравнивание   |
| Ctrl + Alt + C | Центровка            |
| Ctrl + Alt + R | Правое выравнивание  |
| Ctrl + Alt + O | Упорядоченный список |
| Ctrl + Alt + U | Несоответственный список |
| Ctrl + Alt + H | Разделитель          |
| Ctrl + Alt + I | Встроенный код       |
| Ctrl + Alt + D | Кодовый блок         |
| Ctrl + Alt + P | Вкл./выкл. реального времени превью |
| Ctrl + Alt + F | Вкл./выкл. полноконтактного превью |
| Ctrl + S       | Сохранить HTML текст |

### Часто задаваемые вопросы
- Вопрос: Как решить проблему автоматического обновления формы `el-form` при клике на кнопку в области загрузки изображений или добавления таблиц?
Ответ: В [официальной документации](https://element.eleme.cn/#/ru-CN/component/form) приведено следующее описание, которое поможет решить данную проблему:

Согласно W3C стандартам:Когда в форме имеется только одно поле ввода текста, агент пользователя должен принимать нажатие клавиши "Enter" как запрос на отправку формы.
То есть, когда в одном элементе form содержится только одно поле ввода, то нажатие клавиши "Enter" в этом поле должно отправлять форму. 
Если требуется заблокировать это поведение по умолчанию, можно использовать @submit.native.prevent в теге <el-form>.

```