$ 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' // Адрес интерфейса загрузки
        }
      }
    },
    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" :fullscreen="true" :image-uploader="imageUploader" @save="save"></le-editor>
</div>
<div> — это фрагмент кода на языке Vue.js.

Как понять синтаксис Markdown?

В документации рекомендуется открыть файл test.txt в корне проекта и скопировать его содержимое в редактор. Затем можно сравнить исходный текст с тем, что отображается в окне предварительного просмотра, чтобы увидеть, как работает Markdown.

**API**

Здесь нет информации об API.

**Le-editor**

Le-editor — это компонент Vue.js, который используется для редактирования текста. У него есть несколько свойств (props), которые можно настроить:
* value — данные, которые будут отображаться в редакторе;
* theme — тема редактора;
* font — размер шрифта в редакторе и в области предварительного просмотра;
* shadow — наличие тени у редактора;
* dragUpload — возможность перетаскивать файлы для загрузки;
* showToolbar — показывать ли панель инструментов;
* toolbar — настройки панели инструментов;
* hljs-css — стиль подсветки кода в области предварительного просмотра;
* fullscreen — открывать ли редактор сразу в полноэкранном режиме;
* indent-unit — размер отступа в редакторе (по умолчанию 2 пробела).

Также можно настроить панель инструментов (toolbar) с помощью свойства toolbar. В этом свойстве можно указать, какие кнопки должны быть на панели инструментов. Например, можно включить кнопки для отмены и повтора действий, для создания заголовков разных уровней, для вставки ссылок и изображений и т. д.

У компонента le-editor есть события (events), которые он может генерировать при определённых действиях пользователя. Одно из таких событий — save, которое происходит при сохранении изменений в тексте.
``` | Сохранить предварительный просмотр текста  | Предварительный просмотр HTML-текста                                                     |
| :----------------------------------------- | :------------------------------------------------------------------------------------ |
| uploadImg                                       | Загрузить изображение                                                                      | 
| **Компонентный объект, файл и имя файла, подробности см. ниже**                                                           |

### le-preview связанные
#### реквизиты (настраиваемые конфигурации)
| Атрибут     | Описание                                                                            | Тип   | Значение по умолчанию   | Минимальная версия |
| :---------- | :--------------------------------------------------------------------------------- | :----- | :---------------------- | ---------------- |
| value       | Отображаемый текст, можно передать markdown и html, в зависимости от is-md для различения | String | ''                       |                   |
| is-md       | Формат значения, true означает передачу текста в формате markdown, false означает сохранение редактора в формате html | String | False                    |                   |
| hljs-css    | Стиль кода в области отображения html                                               | String | 'github'                 | v1.1.1            |

##### Доступные значения атрибута hljs-css
> Используйте `/src/dev/note.html или /src/dev/preview.html` в качестве справочного руководства.
>
> Стиль взят из highlight.js, эффект отображения можно посмотреть здесь: https://highlightjs.org/
>
> Поддерживаемые значения стиля следующие:
```json
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
dark
darkula
default
docco
dracula
far
foundation
githubGist
github
gml
googlecode
gradientDark
grayscale
gruvboxDark
gruvboxLight
hopscotch
hybrid
idea
irBlack
isblEditorDark
isblEditorLight
'kimbie.dark'
'kimbie.light'
lightfair
magula
monoBlue
monokaiSublime
monokai
nightOwl
nord
obsidian
ocean
paraisoDark
paraisoLight
pojoaque
purebasic
qtcreatorDark
qtcreatorLight
railscasts
rainbow
routeros
schoolBook
shadesOfPurple
solarizedDark
solarizedLight
sunburst
tomorrowNightBlue
tomorrowNightBright
tomorrowNightEighties
tomorrowNight
tomorrow
vs
vs2015
xcode
xt256
zenburn