vue simplemde

Vue-Simplemde

Markdown -Editor -Komponente für VUE.JS. Unterstützen Sie nur Vue2.x.

Setup verwenden

Unterstützt Vue1.x nicht mehr, Sie können die Verwendung ändern, um sie zu verwenden

Installieren

npm install vue-simplemde --save

Verwenden

• Interne Referenz in einer einzelnen Komponente

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

• Globale Referenz

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

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

Requisiten

Eigentum	Typ	Standard	beschreiben
Wert	Saite	Keiner	Anfangswert, V-Model-Bindung kann verwendet werden
Name	Saite	Keiner	Der Name der Kontrolle.
Vorschau-Klasse	Saite	Keiner	Benutzerdefinierte Vorschaufel -Stilklasse
Autoinit	Boolean	WAHR	Automatische Initialisierung
ForcesSync	Boolean	WAHR	Synchronisierungswert für Simplemde jedes Mal
Highlight	Boolean	FALSCH	Ist es offen für hervorgehoben
sanitisieren	Boolean	FALSCH	HTML, das nach dem Öffnen keine Eingabe liefert
Konfigurationen	Objekt	{}	Die Konfiguration von Simplemde
Vorschau	Funktion	- -	configs.previewrender

Ereignisse

Ereignis	beschreiben	Argumente
Eingang	Ausgelöst, wenn sich der Eingangswert ändert	Wert
verwischen	Ausgelöst, wenn der Eingang den Fokus verliert	Wert
initialisiert	Ausgelöst, wenn die Initialisierung abgeschlossen ist	Simplemde

Methoden

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

• Beispiele/index.vue

• Simplemde.js

Markdown -Stil

ZB verwenden Sie Githubs Markdown -Stil

Github-Markdown-CSS

installieren

$ npm install --save github-markdown-css

verwenden

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

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

Highlight

installieren

 $ npm install --save highlight.js

verwenden

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

Editorthema (SimpleMde-Themen-Base)

ZB verwenden Sie Simplemde-Themen-Basisthema

installieren

 $ npm install --save simplemde-theme-base

verwenden

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

z.B

Dunkles Thema

Konfiguration

Simplemds Konfiguration

• 中文
• Englisch

Beispiele

• Einfaches Beispiel
• Nuxt -Beispiel
• Demo -Seite
• Demoquelle

Abhängigkeiten

• Simplemde

Lizenz

Vue-Simplemde ist Open Source und unter der MIT-Lizenz veröffentlicht.

Urheberrecht (c) 2022 F-L-Rose