Página Inicial>Recursos de construção de sites>Outros recursos
Baixar

Mavono

Vue2
Vue3

Documentos em inglês

Demonstração para JSfiddle

Exemplo (exibição de imagens)

PC

PC

PC

Para ver mais fotos, clique aqui ...

Instale o Mavon-Editor (instalação) 

 $ npm install mavon-editor --save

Use (como introduzir)

index.js : 

    // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue . use ( mavonEditor )
    new Vue ( {
        'el' : '#main' ,
        data ( ) {
            return { value : '' }
        }
    } )

index.html 

 < div id =" main " >
    < mavon-editor v-model =" value " />
</ div >

Como usá -lo em nuxt.js

Primeiro, crie vue-mavon-editor.js nos plugins de diretório do projeto 

 import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

Em seguida, adicione a configuração dos plugins em nuxt.config.js 

  plugins : [
  ...
    { src : '@/plugins/vue-mavon-editor' , ssr : false }
  ] ,

O último passo é apresentá -lo na página ou componente 

< template >
  < div class = " mavonEditor " >
    < no-ssr >
      < mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
    </ no-ssr >
  </ div >
</ template >
< script >
export default {
  data () {
    return {
      markdownOption : {
        bold : true , // 粗体
        ... // 更多配置
      },
      handbook : " #### how to use mavonEditor in nuxt.js "
    };
  }
};
</ script >

< style scoped>
.mavonEditor {
  width : 100 % ;
  height : 100 % ;
}
</ style >

Para mais métodos de introdução, clique aqui ...

Como obter e definir um objeto de marcação ...

Documentação da API

Adereços

Nome Nome tipo de tipo Valor padrão padrão Descreva a descrição
valor Corda Valor inicial
linguagem Corda zh-cn A seleção de idiomas suporta temporariamente o ZH-CN: Chinese simplificado, ZH-TW: chinês oral, en: inglês, fr: francês, pt-BR: português, ru: russo, de: alemão, ja: japonês
fontsize Corda 14px Editar o tamanho do texto da área
ScrollStyle Booleano verdadeiro Ligue o estilo ScrollBar (suporta apenas o Chrome por enquanto)
Boxshadow Booleano verdadeiro Ligue a sombra da borda
BoxshadowStyle Corda 0 2px 12px 0 rgba (0, 0, 0, 0.1) Estilo de sombra da fronteira
Transição Booleano verdadeiro Se deve habilitar a animação de transição
ToolBarsbackground Corda #ffffff Cor da barra de ferramentas Cor de fundo
VisuewBackground Corda #fbfbfb Caixa de fundo da caixa de visualização cor de fundo
subcampo Booleano verdadeiro Verdadeiro: colunas duplas (editar visualizar a mesma tela), false: colunas únicas (editar visualizar tela dividida)
DefaultOpen Corda A área de exibição padrão é exibida quando em uma única coluna ( subfield=false ).
EDIT: A área de edição é exibida por padrão.
Visualização: área de visualização de exibição padrão outro = editar
espaço reservado Corda Comece a editar ... Texto rápido padrão quando a caixa de entrada está vazia
editável Booleano verdadeiro Se deve permitir a edição
Codestyle Corda Code-Github Estilo de marcação: Github padrão, esquema de cores opcional
ToolBarsFlag Booleano verdadeiro Se a barra de ferramentas é exibida
navegação Booleano falso Diretório de exibição padrão
atalho Booleano verdadeiro Se deve habilitar as teclas de atalho
foco automático Booleano verdadeiro Foco automático para caixa de texto
ishljs Booleano verdadeiro Código destacado
ImageFilter função nulo A função de filtragem de imagens possui um parâmetro File Object , exigindo que um Boolean seja retornado. true significa que o arquivo é legal e false significa que o arquivo é ilegal.
ImageClick função nulo Evento de clique em imagem, o padrão é visualização, pode ser substituído
tabsize Número t O padrão é t
html Booleano verdadeiro Ativar tags HTML. Essa tag sempre inadimpleiu para os motivos históricos, mas é recomendável fechá -la sem o uso de tags HTML. Pode eliminar completamente os problemas de segurança.
XssOptions Objeto {} A configuração da regra XSS, ativada por padrão, defina false para desligar. Após a ativação, as tags HTML serão filtradas e todos os atributos de tag HTML serão filtrados por padrão. Recomenda -se configurar os brancos sob demanda para reduzir a possibilidade de serem atacados.
- Referência de regra personalizada: https://jsxss.com/zh/options.html
- Demo de referência: Dev-Demo
Barras de ferramentas Objeto O exemplo a seguir Barra de ferramentas

Barras de ferramentas

Todos os botões padrão da barra de ferramentas estão ativados e objetos personalizados são passados. Você pode optar por ativar alguns botões. 

 /*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold : true , // 粗体
    italic : true , // 斜体
    header : true , // 标题
    underline : true , // 下划线
    strikethrough : true , // 中划线
    mark : true , // 标记
    superscript : true , // 上角标
    subscript : true , // 下角标
    quote : true , // 引用
    ol : true , // 有序列表
    ul : true , // 无序列表
    link : true , // 链接
    imagelink : true , // 图片链接
    code : true , // code
    table : true , // 表格
    fullscreen : true , // 全屏编辑
    readmodel : true , // 沉浸式阅读
    htmlcode : true , // 展示html源码
    help : true , // 帮助
    /* 1.3.5 */
    undo : true , // 上一步
    redo : true , // 下一步
    trash : true , // 清空
    save : true , // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation : true , // 导航目录
    /* 2.1.8 */
    alignleft : true , // 左对齐
    aligncenter : true , // 居中
    alignright : true , // 右对齐
    /* 2.2.1 */
    subfield : true , // 单双栏模式
    preview : true , // 预览
}

Se você precisar personalizar o botão Adicionar barra de ferramentas, você pode usar os seguintes métodos 

 < mavon-editor >
  <!-- 左工具栏前加入自定义按钮 -->
  < template slot = "left-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 左工具栏后加入自定义按钮  -->
  < template slot = "left-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏前加入自定义按钮  -->
  < template slot = "right-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏后加入自定义按钮  -->
  < template slot = "right-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
</ mavon-editor >

Eventos de Eventos Vinculante

Nome do nome do método parâmetros params Descreva a descrição
Mudar String: Valor, String: Render Evento de retorno de chamada que muda na área de edição (Render: Value o resultado após a análise por Markdown)
salvar String: Valor, String: Render Evento de retorno de chamada de Ctrl + S (salve a chave e acione o retorno de chamada também)
tela cheia Booleano: status, string: valor Alternar o evento de retorno de chamada para edição de tela cheia (Boolean: tela cheia no estado)
Readmodel Booleano: status, string: valor Alternar o evento de retorno de chamada de leitura imersiva (booleano: a leitura está ativada)
htmlcode Booleano: status, string: valor Verifique o evento de retorno de chamada do código -fonte HTML (Boolean: o código -fonte está ativado)
Subfieldtoggle Booleano: status, string: valor Alterne o evento de retorno de chamada de edição de coluna única e dupla (Boolean: Double Column Open Status)
VisuewToggle Booleano: status, string: valor Alternar o evento de retorno de chamada editado para visualização (booleano: visualizar status de abertura)
helptoggle Booleano: status, string: valor Veja o evento de retorno de chamada de ajuda (booleano: a ajuda está ativada)
NavegagemToggle Booleano: status, string: valor Alterne o evento de retorno de chamada do diretório de navegação (booleano: a navegação está ativada)
imgadd Número: POS, arquivo: imgfile Adicione o evento de retorno de chamada ao arquivo de imagem (POS: A localização da imagem na lista, arquivo: objeto de arquivo)
imgdel Array (2): [Número: POS, arquivo: imgfile] Evento de retorno de chamada de exclusão de arquivo de imagem (Array (2): Uma matriz de dois elementos, a primeira posição é a posição da imagem na lista, e a segunda posição é o objeto de arquivo)

Código destacado

Se você não precisar destacar o código de destaque, deve definir ishljs como false

Ative os adereços de destaque do código 

<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>

Para otimizar o volume do plug -in, os seguintes arquivos usarão os links externos cdnjs por padrão da v2.4.2 :

  • highlight.js
  • github-markdown-css
  • katex ( v2.4.7 )

Código que destaca os arquivos de análise de idiomas em highlight.js e estilos de destaque de código serão carregados sob demanda quando usados. github-markdown-css e katex só serão carregados quando mounted

AVISO : O esquema de cores opcional e os idiomas suportados são exportados do Destapt.js/9.12.0

Sem usar a CDN, carregamento local sob demanda Clique aqui ...

Upload de imagem 

< template >
    < mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export default {
    methods : {
        // 绑定@imgAdd event
        $imgAdd (pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData ();
           formdata . append ( ' image ' , $file);
           axios ({
               url : ' server url ' ,
               method : ' post ' ,
               data : formdata,
               headers : { ' Content-Type ' : ' multipart/form-data ' },
           }). then (( url ) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm . $img2Url (pos, url);
           })
        }
    }
}
</ script >

Para detalhes sobre o upload de fotos, clique aqui ...

Observação

  • O estilo de tamanho padrão é de altura mínima: 300px, largura min: 300px, que pode ser substituída por si mesma.
  • Index Z básico: 1500
  • Somente usado como exibição pode ser definido adereços: BoldsFlag: false, subcampo: false, defaultOpen: "visualize"

Chave de atalho

chave Keycode Função
F8 119 Ligue/desative a navegação
F9 120 Visualizar/editar alternância
F10 121 LIGUE ON/OFF TELA COMPLETA
F11 122 LIGUE ON/OFF MODO DE LEITURA
F12 123 Comutação de coluna única/dupla coluna
Guia 9 indentação
Ctrl + s 17 + 83 Gatilho salvar
Ctrl + d 17 + 68 Excluir linhas selecionadas
Ctrl + z 17 + 90 Anterior
Ctrl + y 17 + 89 Próximo passo
Ctrl + Breakspace 17 + 8 Edição clara
Ctrl + b 17 + 66 **Audacioso**
Ctrl + i 17 + 73 *Itálico*
Ctrl + h 17 + 72 #Título
Ctrl + 1 17 + 97 ou 49 #Título
Ctrl + 2 17 + 98 ou 50 ## Título
Ctrl + 3 17 + 99 ou 51 ### Título
Ctrl + 4 17 + 100 ou 52 #### Título
Ctrl + 5 17 + 101 ou 53 ##### Título
Ctrl + 6 17 + 102 ou 54 ###### Título
Ctrl + u 17 + 85 ++ Unscore ++
Ctrl + m 17 + 77 == tag ==
Ctrl + q 17 + 81 > Citações
Ctrl + o 17 + 79 1. Lista ordenada
Ctrl + l 17 + 76 [Título do link] (endereço do link)
Ctrl + alt + s 17 + 18 + 83 ^Marca do canto superior^
Ctrl + alt + u 17 + 18 + 85 - Lista não ordenada
Ctrl + Alt + C 17 + 18 + 67 `` `Bloco de código
Ctrl + Alt + L 17 + 18 + 76 ! [Título da imagem] (link da imagem)
Ctrl + alt + t 17 + 18 + 84 folha
Ctrl + Shift + S 17 + 16 + 83 Marca do canto inferior
Ctrl + Shift + D 17 + 16 + 68 ~~ Marca média ~~
Ctrl + Shift + C 17 + 16 + 67 Centro
Ctrl + Shift + L 17 + 16 + 76 À esquerda
Ctrl + Shift + R 17 + 16 + 82 À direita
Guia Shift + 16 + 9 Cancelar o recuo

Dependências

  • Markdown-it

  • Auto-textaria

Expansão de sintaxe de marcação

  • Emoji
  • subscrito
  • sobrescrito
  • recipiente
  • Lista de definições
  • abreviação
  • nota de rodapé
  • inserir
  • marca
  • lista de tarefas
  • Destaque
  • Katex
  • visualização de imagens
  • Toc

Outros plug-ins de sintaxe podem ser introduzidos obtendo o objeto Markdown-IT. Outros plug-ins de sintaxe podem ser introduzidos obtendo o objeto Markdown-IT.

Atualizar (Atualizar conteúdo)

  • Atualizar log

Colaboradores

  • Chenxchen
  • ygj6
  • Yukaige

Licença (certificado)

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

Copyright (c) 2017 Hinesboy

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos