README.ru.md

Vue-EasyMDE

Компонент редактора Markdown для Vue.js. Поддерживается только Vue2.x.

english version

Пользовательские настройки

Больше не поддерживается Vue1.x

Установка

npm install vue-easymde --save

yarn add vue-easymde

Использование

• Внутрення ссылка в единичном компоненте

<template>
 <vue-easymde v-model="content" ref="markdownEditor" />
</template>

<script>
 import VueEasymde from "vue-easymde";

 export default {
  components: {
    VueEasymde
  }
 };
</script>

<style>
 @import "~easymde/dist/easymde.min.css";
</style>

• Глобальная ссылка

import Vue from "vue";
import VueEasymde from "vue-easymde";
import "easymde/dist/easymde.min.css";

Vue.component('vue-easymde', VueEasymde)

Props

Свойство	Тип	По умолчанию	Описание
value	String	None	Начальное значение, может быть использован хук v-model
name	String	None	Название контроля
preview-class	String	None	Пользовательский класс стилей предварительного просмотра
autoinit	Boolean	true	Автоматическая инициализация
highlight	Boolean	false	Доступно для выделения
sanitize	Boolean	false	HTML, который не отображает ввод после открытия
configs	Object	{}	Конфигурация EasyMDE
previewRender	Function	-	configs.previewRender

События (Events)

Событие	Описание	Аргументы
update:modelValue	Срабатывает при изменении входного значения	value
blur	Срабатывает при снятии ввода с фокуса	value
initialized	Срабатывает после завершения инициализации	easymde

Методы

this.$refs.markdownEditor.easymde.togglePreview();

examples/index.vue

simplemde.js

Стиль Markdown

Например, стиль markdown от Github

github-markdown-css

Установка

$ npm install --save github-markdown-css

$ yarn add github-markdown-css

Использование

<template>
 <vue-easymde preview-class="markdown-body" />
</template>

<style>
 @import "~easymde/dist/easymde.min.css";
 @import "~github-markdown-css";
</style>

Highlight

Установка

$ npm install --save highlight.js

$ yarn add highlight.js

Использование

<template>
 <vue-easymde :highlight="true" />
</template>

<script>
 import hljs from "highlight.js";

 window.hljs = hljs;
</script>

<style>
 @import "~easymde/dist/easymde.min.css";
 @import "~highlight.js/styles/atom-one-dark.css";
 /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</style>

Редактор тем (simplemde-theme-base)

например, тема simplemde-theme-base

Установка

$ npm install --save simplemde-theme-base

$ yarn add simplemde-theme-base

Использование

<style>
  @import "~simplemde-theme-base/dist/simplemde-theme-base.min.css";
  /* no need import simplemde.min.css */
</style>

Конфигурация

Конфигурация основана на EasyMDE config

• Русский
• English
• 中文

Примеры

• Простой Пример
• Пример на Nuxt
• Страница Демо
• Исходники Демо

Зависимости

• EasyMDE

Лицензия

vue-easymde выпущен с открытым исходным кодом и под лицензией MIT.

Copyright (c) 2018 F-loat

Copyright (c) 2019 Ilya Nikulin