vue simplemde

Vue-simplemde

Composant de l'éditeur de Markdown pour vue.js. Prise en charge uniquement Vue2.x.

Utiliser la configuration

Ne prend plus en charge vue1.x, vous pouvez modifier pour utiliser

Installer

npm install vue-simplemde --save

Utiliser

• Référence interne dans un seul composant

< 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 >

• Référence globale

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

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

Accessoires

propriété	taper	défaut	décrire
valeur	Chaîne	Aucun	Valeur initiale, la liaison du modèle V peut être utilisée
nom	Chaîne	Aucun	Le nom du contrôle.
prévisualisation	Chaîne	Aucun	Classe de style d'aperçu personnalisé
automatique	Booléen	vrai	Initialisation automatique
forcesync	Booléen	vrai	Synchroniser la valeur à Simplemde à chaque fois
souligner	Booléen	FAUX	Est-il ouvert à mettre en évidence
désinfecter	Booléen	FAUX	HTML qui ne donne pas d'entrée après l'ouverture
configuration	Objet	{}	Configuration de Simplemde
prévisualisation	Fonction	-	configs.previewrender

Événements

événement	décrire	arguments
saisir	Déclenché lorsque la valeur d'entrée change	valeur
se brouiller	Déclenché lorsque l'entrée perd la focalisation	valeur
initialisé	Déclenché lorsque l'initialisation est terminée	simplemde

Méthodes

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

• exemples / index.vue

• Simplemde.js

Style Markdown

par exemple, utilisez le style de démarque de Github

GitHub-Markdown-CSS

installer

$ npm install --save github-markdown-css

utiliser

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

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

Souligner

installer

 $ npm install --save highlight.js

utiliser

< 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 >

Thème de l'éditeur (Simplemde-theme-Base)

par exemple, utilisez le thème Simplemde-thème-theme-base

installer

 $ npm install --save simplemde-theme-base

utiliser

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

par exemple

Thème sombre

Configuration

Configuration de Simplemd

• 中文
• Anglais

Exemples

• Exemple simple
• Exemple Nuxt
• Page de démonstration
• Source de démonstration

Dépendances

• Simplemde

Licence

Vue-Simplemde est open source et libéré sous la licence MIT.

Copyright (C) 2022 F-LOAT