vue simplemde

Vue-simplemde

Componente Editor de Markdown para Vue.js. Suporte apenas Vue2.x.

Use configuração

Não suporta mais o VUE1.x, você pode modificar para usar

Instalar

npm install vue-simplemde --save

Usar

• Referência interna em um único 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 >

• Referência global

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

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

Adereços

propriedade	tipo	padrão	descrever
valor	Corda	Nenhum	Valor inicial, a ligação do modelo V pode ser usada
nome	Corda	Nenhum	O nome do controle.
Classe de visualização	Corda	Nenhum	Classe de estilo de visualização personalizada
autoinit	Booleano	verdadeiro	Inicialização automática
forcesync	Booleano	verdadeiro	Valor de sincronização para simplificar cada vez
destaque	Booleano	falso	Está aberto para destacar
higienize	Booleano	falso	HTML que não renderiza a entrada após a abertura
configurações	Objeto	{}	Config de simplemde
Visuewrender	Função	-	Configs.PreviewRender

Eventos

evento	descrever	argumentos
entrada	Acionado quando o valor de entrada muda	valor
borrão	Acionado quando a entrada perde o foco	valor
inicializado	Acionado quando a inicialização é completa	simplemde

Métodos

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

• Exemplos/index.vue

• SimpleMde.js

Estilo de marcação

por exemplo, use o estilo de marcha do 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 >

Destaque

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 do editor (simplimde-tempo-tema)

por exemplo, use o tema simplimde-tema

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 >

por exemplo

Tema sombrio

Configuração

Config do SimpleMD

• 中文
• Inglês

Exemplos

• Exemplo simples
• Exemplo Nuxt
• Página de demonstração
• Fonte de demonstração

Dependências

• Simplemde

Licença

O Vue-simpleMDE é de código aberto e liberado sob a licença do MIT.

Copyright (C) 2022 F-loat