vue simplemde

Vue-Simplemde

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

Используйте настройку

Больше не поддерживает vue1.x, вы можете изменить на использование

Установить

npm install vue-simplemde --save

Использовать

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

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

< script >
  import VueSimplemde from ' vue-simplemde '

  export default {
    components : {
      VueSimplemde
    }
  }
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
</ style >

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

 import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue . component ( 'vue-simplemde' , VueSimplemde ) 

Реквизит

свойство	тип	по умолчанию	описывать
ценить	Нить	Никто	Начальное значение, связывание V-модели можно использовать
имя	Нить	Никто	Название управления.
Предварительный класс	Нить	Никто	Пользовательский класс стиля предварительного просмотра
Автоинит	Логический	истинный	Автоматическая инициализация
силы	Логический	истинный	Синхронизированное значение с простым
выделять	Логический	ЛОЖЬ	Это открыто, чтобы выделить
дезинфицировать	Логический	ЛОЖЬ	HTML, который не визуалирует вход после открытия
конфигурации	Объект	{}	Конфигурация Simplemde
Предварительный просмотр	Функция	-	configs.previewrender

События

событие	описывать	аргументы
вход	Запускается при изменении входного значения	ценить
размытие	Запускается, когда вход теряет фокус	ценить
инициализированный	Запускается при завершении инициализации	Simplemde

Методы

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

• Примеры/index.vue

• Simplemde.js

Стиль отметки

Например, используйте стиль отметки GitHub

github-markdown-css

установить

$ npm install --save github-markdown-css

использовать

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

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~github-markdown-css ' ;
</ style >

Выделять

установить

 $ npm install --save highlight.js

использовать

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

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

  window . hljs = hljs;
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.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

использовать

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

например

Темная тема

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

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

• 中文
• Английский

Примеры

• Простой пример
• Пример нук
• Демо -страница
• Демо -источник

Зависимости

• Simplemde

Лицензия

Vue-Simplemde является открытым исходным кодом и выпущена по лицензии MIT.

Авторские права (C) 2022 F-Loat