vue simplemde

Vue-simplemde

Componente del editor de Markdown para Vue.js. Apoyo solo a Vue2.x.

Usar Configuración

Ya no admite Vue1.x, puede modificar para usar

Instalar

npm install vue-simplemde --save

Usar

• Referencia interna en un solo componente

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

• Referencia global

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

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

Accesorios

propiedad	tipo	por defecto	describir
valor	Cadena	Ninguno	Valor inicial, se puede usar la unión del modelo V-Modelo
nombre	Cadena	Ninguno	El nombre del control.
vista previa de clase	Cadena	Ninguno	Clase de estilo de vista previa personalizada
autoinit	Booleano	verdadero	Inicialización automática
forceync	Booleano	verdadero	Valor de sincronización para simplemde cada vez
destacar	Booleano	FALSO	¿Está abierto a resaltar?
desinfectar	Booleano	FALSO	Html que no representa la entrada después de la apertura
configuraciones	Objeto	{}	Configuración de simplemde
vista previa	Función	-	configs.previewrender

Eventos

evento	describir	argumentos
aporte	Activado cuando cambia el valor de entrada	valor
difuminar	Activado cuando la entrada pierde el enfoque	valor
inicializado	Activado cuando se completa la inicialización	SimpleMde

Métodos

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

• ejemplos/index.vue

• simplemde.js

Estilo de markdown

por ejemplo, use el estilo de Markdown de GitHub

Github-Markdown-CSS

instalar

$ npm install --save github-markdown-css

usar

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

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

Destacar

instalar

 $ npm install --save highlight.js

usar

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

Tema del editor (simplemde-theme-base)

por ejemplo, use el tema de la base de temas simplemde

instalar

 $ npm install --save simplemde-theme-base

usar

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

p.ej

Tema oscuro

Configuración

Configuración de Simplemd

• 中文
• Inglés

Ejemplos

• Ejemplo simple
• Ejemplo de Nuxt
• Página de demostración
• Fuente de demostración

Dependencias

• SimpleMde

Licencia

Vue-Simplemde es de código abierto y es lanzado bajo la licencia MIT.

Copyright (c) 2022 F-loat