vditor
v3.10.7
Editor de marcação fácil de usar, construído para se adaptar a diferentes cenários de aplicação
Inglês | Demonstração
O Vditor é um editor de Markdown do lado do navegador que suporta modos WYSIWYG, renderização instantânea (semelhante ao tipóora) e de visualização de tela dividida. Ele é implementado usando o TypeScript e suporta JavaScript nativo, bem como estruturas como Vue, React, Angular e Sieve.
Bem -vindo à área de discussão oficial do vditor para saber mais. Ao mesmo tempo, também é possível seguir o B3Log Open Source Community WeChat Official Conta B3log开源:
Com a popularidade dos métodos de marcação, mais e mais aplicativos começaram a integrar editores de marcação. O status atual dos principais editores de marcação integrada é o seguinte:
Esses três pontos correspondem exatamente a três cenários de aplicação:
Portanto, um editor de marcação que pode se adaptar ao cenário de aplicação é crucial e precisa ser considerado:
O Vditor fez esforços nessas áreas, na esperança de fazer alguma contribuição para o campo moderno de edição universal de marcação.
O modo Wysiwyg é mais amigável para os usuários que não estão familiarizados com o Markdown e também podem ser usados perfeitamente se você estiver familiarizado com o Markdown.
O modo de renderização instantâneo não deve não ser familiar para os usuários familiarizados com o tipófora. Em teoria, esta é a maneira mais elegante de editar o Markdown.
O modo de visualização tradicional de tela dividida é adequada para edição de marcação em telas grandes.
A maioria dos recursos acima pode ser ativada por alternar a configuração. Os desenvolvedores podem escolher a correspondência com base em seus cenários de aplicativos.
npm install vditor --save import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor ( id , { options... } ) <!-- ️生产环境请指定版本号，如 https://unpkg.com/[email protected]/dist... -->
< link rel =" stylesheet " href =" https://unpkg.com/vditor/dist/index.css " />
< script src =" https://unpkg.com/vditor/dist/index.min.js " > </ script >A aparência do editor. Clássico embutido, 2 conjuntos de temas.
options.themesetThemeA aparência da saída HTML da Markdown. Torno embutido, claro, escuro, WeChat 4 conjuntos de temas. Suporta interface de extensão de tema de conteúdo.
class="vditor-reset" ao elemento de exibiçãooptions.preview.themeIPreviewOptions.themesetTheme ou setContentTheme A aparência do bloco de código. Github embutido e outros 36 conjuntos de temas.
options.preview.hljsIPreviewOptions.hljssetTheme ou setCodeTheme Você pode preencher o id do elemento ou o próprio HTMLElement do elemento
HTMLElement do próprio elemento, você precisa definir options.cache.id ou Set options.cache.enable para false
| ilustrar | valor padrão | |
|---|---|---|
| I18n | Multilíngue, veja ITIPS | - |
| Undodelay | Intervalo de história | - |
| Depois | Método de retorno de chamada depois que o editor é renderizado de forma assíncrona | - |
| altura | Altura total do editor | 'auto' |
| MINHEIRO | Altura mínima da área de edição | - |
| largura | Largura total do editor, % de suporte | 'auto' |
| espaço reservado | Prompt quando a área de entrada estiver vazia | '' |
| Lang | Tipos de idioma: en_us, fr_fr, pt_br, ja_jp, ko_kr, ru_ru, sv_se, zh_cn, zh_tw | 'zh_cn' |
| entrada (valor: string) | Acionado após a entrada | - |
| Foco (Valor: String) | Gatilho após o foco | - |
| Blur (Valor: String) | Acionado após o foco | - |
| KeyDown (Evento: KeyboardEvent) | Acionado após pressionar | - |
| ESC (Valor: String) | Desencadeado após a ESC Press | - |
| Ctrlenter (Valor: String) | ⌘/ctrl+enter é acionado após pressionar | - |
| Selecione (Valor: String) | Acionado após selecionar o texto no editor | - |
| guia | A tecla de guia opera strings, suporta t e quaisquer strings | - |
| Typewritermode | Se deve habilitar o modo de máquina de escrever | falso |
| CDN | Configurar um endereço CDN construído | https://unpkg.com/vditor@${VDITOR_VERSION} |
| modo | Modo Opcional: SV, Ir, Wysiwyg | 'ir' |
| Depurador | Se você deve exibir logs | falso |
| valor | Valor de inicialização do editor | '' |
| tema | Tópico: Clássico, Dark | 'clássico' |
| ícone | Estilo de ícone: formiga, material | 'formiga' |
| CustomRanders: {Idioma: string, renderização: (elemento: htmlelement, vditor: ivditor) => void} [] | Renderizador personalizado | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . Consulte SRC/TS/UTIL/Options.ts para o valor padrãoemoji , headings , bold , italic , strike , | both line , quote , list edit-mode ordered-list , check , outdent preview indent outline code content-theme code-theme inline-code , inserção devtools insert-after br insert-before fullscreen help undo redo , record upload export link info tablename não está na enumeração, você pode adicionar um botão personalizado, no formato da seguinte maneira: new Vditor ( 'vditor' , {
toolbar : [
{
hotkey : '⇧⌘S' ,
name : 'sponsor' ,
tipPosition : 's' ,
tip : '成为赞助者' ,
className : 'right' ,
icon : '<svg t="1589994565028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2808" width="32" height="32"><path d="M506.6 423.6m-29.8 0a29.8 29.8 0 1 0 59.6 0 29.8 29.8 0 1 0-59.6 0Z" fill="#0F0F0F" p-id="2809"></path><path d="M717.8 114.5c-83.5 0-158.4 65.4-211.2 122-52.7-56.6-127.7-122-211.2-122-159.5 0-273.9 129.3-273.9 288.9C21.5 562.9 429.3 913 506.6 913s485.1-350.1 485.1-509.7c0.1-159.5-114.4-288.8-273.9-288.8z" fill="#FAFCFB" p-id="2810"></path><path d="M506.6 926c-22 0-61-20.1-116-59.6-51.5-37-109.9-86.4-164.6-139-65.4-63-217.5-220.6-217.5-324 0-81.4 28.6-157.1 80.6-213.1 53.2-57.2 126.4-88.8 206.3-88.8 40 0 81.8 14.1 124.2 41.9 28.1 18.4 56.6 42.8 86.9 74.2 30.3-31.5 58.9-55.8 86.9-74.2 42.5-27.8 84.3-41.9 124.2-41.9 79.9 0 153.2 31.5 206.3 88.8 52 56 80.6 131.7 80.6 213.1 0 103.4-152.1 261-217.5 324-54.6 52.6-113.1 102-164.6 139-54.8 39.5-93.8 59.6-115.8 59.6zM295.4 127.5c-72.6 0-139.1 28.6-187.3 80.4-47.5 51.2-73.7 120.6-73.7 195.4 0 64.8 78.3 178.9 209.6 305.3 53.8 51.8 111.2 100.3 161.7 136.6 56.1 40.4 88.9 54.8 100.9 54.8s44.7-14.4 100.9-54.8c50.5-36.3 108-84.9 161.7-136.6 131.2-126.4 209.6-240.5 209.6-305.3 0-74.9-26.2-144.2-73.7-195.4-48.2-51.9-114.7-80.4-187.3-80.4-61.8 0-127.8 38.5-201.7 117.9-2.5 2.6-5.9 4.1-9.5 4.1s-7.1-1.5-9.5-4.1C423.2 166 357.2 127.5 295.4 127.5z" fill="#141414" p-id="2811"></path><path d="M353.9 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2812"></path><path d="M659.3 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2813"></path><path d="M411.6 538.5c0 52.3 42.8 95 95 95 52.3 0 95-42.8 95-95v-31.7h-190v31.7z" fill="#5B5143" p-id="2814"></path><path d="M506.6 646.5c-59.6 0-108-48.5-108-108v-31.7c0-7.2 5.8-13 13-13h190.1c7.2 0 13 5.8 13 13v31.7c0 59.5-48.5 108-108.1 108z m-82-126.7v18.7c0 45.2 36.8 82 82 82s82-36.8 82-82v-18.7h-164z" fill="#141414" p-id="2815"></path><path d="M450.4 578.9a54.7 27.5 0 1 0 109.4 0 54.7 27.5 0 1 0-109.4 0Z" fill="#EA64F9" p-id="2816"></path><path d="M256 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2817"></path><path d="M703.3 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2818"></path></svg>' ,
click ( ) { alert ( '捐赠地址：https://ld246.com/sponsor' ) } ,
} ] ,
} )| ilustrar | valor padrão | |
|---|---|---|
| nome | Marca única | - |
| ícone | Ícone SVG | - |
| dica | dica | - |
| Tipposição | Dicas: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| tecla de atalho | Teclas de atalho no formato ⇧⌘ / ⌘ / ⌥⌘ | - |
| sufixo | Insira o sufixo no editor | - |
| prefixo | Insira o prefixo no editor | - |
| Clique (Evento: Evento, Vditor: Ivditor) | O evento que é acionado quando um botão personalizado é clicado | - |
| ClassName | Nome do estilo | '' |
| Barra de ferramentas?: Array <pution.toolbar> | Submenu | - |
| ilustrar | valor padrão | |
|---|---|---|
| Esconder | Se deve ocultar a barra de ferramentas | falso |
| alfinete | Se deve consertar a barra de ferramentas | falso |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | Se deve habilitar o contador | falso |
| Depois (comprimento: número, contador: options.counter): void | Retorno de chamada de contagem de palavras | - |
| máx | O valor máximo permitido entrar | - |
| tipo | Tipo de estatística: 'Markdown', 'texto' | 'Markdown' |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | Se deve usar o LocalStorage para cache | verdadeiro |
| eu ia | Chave de cache, o primeiro parâmetro é um elemento e requer ativação de cache | - |
| Depois (html: string): string | Retorno de chamada de cache | - |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | Se deve habilitar o modo de comentário | falso |
| Adicionar (id: string, texto: string, comentárioData: icommentsData []) | Adicione um retorno de chamada de comentário | - |
| Remover (IDS: String []) | Exclua o retorno de chamada do comentário | - |
| Roll (topo: número) | Role de chamada de scroll | - |
| AJUSTTOP (COMEISSDDATA: ICOMMENTSDATA []) | Ao modificar o documento, a altura dos comentários é adaptada | - |
| ilustrar | valor padrão | |
|---|---|---|
| atraso | Visualizar intervalos de milissegundos de deboun | 1000 |
| MaxWidth | Largura máxima da área de visualização | 800 |
| modo | Modo de exibição: ambos, editor | 'ambos' |
| url | Solicitação de análise de MD | - |
| Parse (elemento: htmlelement) | Visualizar retorno de chamada | - |
| Transform (html: string): string | Retorno de chamada antes de renderizar | - |
| ilustrar | valor padrão | |
|---|---|---|
| Defaultlang | Use o idioma por padrão se nenhum idioma for especificado | '' |
| habilitar | Se deve ativar o destaque do código | verdadeiro |
| estilo | Veja Chroma para valores opcionais | github |
| linho | Se deve ativar o número da linha | falso |
| Langs | Personalize a linguagem especificada | Code_Languages |
| RenderMenu (código: htmlelement, cópia: htmlelement) | Botão de menu renderizar | - |
| ilustrar | valor padrão | |
|---|---|---|
| AutoSpace | Espaços automáticos | falso |
| gfmautolink | Link automático | verdadeiro |
| FixTermTypo | Termo de correção automática | falso |
| Toc | Insira o diretório | falso |
| notas de rodapé | nota de rodapé | verdadeiro |
| CodeBlockPreview | Se deve renderizar o bloco de código nos modos Wysiwyg e IR | verdadeiro |
| MathBlockPreview | Se deve renderizar fórmulas matemáticas nos modos Wysiwyg e IR | verdadeiro |
| Paragraphbeginningspace | Dois começos vazios | falso |
| higienize | Se deve habilitar a filtragem XSS | verdadeiro |
| ListStyle | Adicione o atributo no estilo de dados à lista | falso |
| LinkBase | Link Relativo Path Prefix | '' |
| linkPrefix | Link prefixo obrigatório | '' |
| marca | Habilitar Mark Mark | falso |
| ilustrar | valor padrão | |
|---|---|---|
| Atual | Tópico atual | "luz" |
| lista | Lista de tópicos opcionais | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| caminho | Endereço do estilo temático | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| ilustrar | valor padrão | |
|---|---|---|
| Inlinedigit | É permitido contar depois que a fórmula matemática em linha inicia $? | falso |
| macros | Definições de macro passaram ao renderizar com Mathjax | {} |
| motor | Motor de renderização de fórmula matemática: Katex, Mathjax | 'Katex' |
| Mathjaxoptions | Parâmetros quando o mecanismo de renderização de fórmula matemática é Mathjax | - |
Os valores padrão são ["Desktop", "Tablet", "Mobile", "MP-Wechat", "Zhihu"]. Você pode selecionar entre os valores padrão para configuração ou usar os seguintes campos para desenvolvimento personalizado.
| ilustrar | valor padrão | |
|---|---|---|
| chave | O botão é identificado exclusivamente e não pode estar vazio | - |
| texto | Texto do botão | - |
| dip de ferramenta | dica | - |
| ClassName | Nome da classe de botão | - |
| Clique (tecla: string) | Botão Clique no evento de retorno de chamada | - |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | Se deve habilitar a renderização multimídia | verdadeiro |
| ilustrar | valor padrão | |
|---|---|---|
| ISPreview | Se deve visualizar a imagem | verdadeiro |
| Visualizar (Bom: Element) => void | Processamento de visualização de imagem | - |
| ilustrar | valor padrão | |
|---|---|---|
| isopen | Se deve abrir o endereço do link | verdadeiro |
| Clique (Bom: Element) => void | Clique em Link Event | - |
| ilustrar | valor padrão | |
|---|---|---|
| analisar | Se deve executar a análise de MD | verdadeiro |
| atraso | Intervalo de milissegundo de debounce | 200 |
| Emoji | Emoji padrão, pode ser selecionado em Lute/emoji_map, ou pode ser personalizado | {'+1': '?', '-1': '?', 'Heart': '❤️', 'Cold_sweat': '?' } |
| emojitail | Dicas de expressão comuns | - |
| emojipath | Endereço da imagem de expressão | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| estender: ihIntExtend [] | Extensão da conclusão automática de palavras -chave, como @/tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format pode ser usado para conversão. // POST data
xhr . send ( formData ) ; // formData = FormData.append("file[]", File)
// return data
{
"msg" : "" ,
"code" : 0 ,
"data" : {
"errFiles" : [ 'filename' , 'filename2' ] ,
"succMap" : {
"filename3" : "filepath3" ,
"filename3" : "filepath3"
}
}
}linkToImgUrl pode passar o endereço de imagem fora do local na área de transferência para o servidor para salvar, e sua estrutura de dados é a seguinte: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format e error não serão acionados ao mesmo tempo. A situação de chamada específica é a seguinte: if ( xhr . status === 200 ) {
if ( vditor . options . upload . success ) {
vditor . options . upload . success ( editorElement , xhr . responseText ) ;
} else {
let responseText = xhr . responseText ;
if ( vditor . options . upload . format ) {
responseText = vditor . options . upload . format ( files as File [ ] , xhr . responseText ) ;
}
genUploadedLabel ( responseText , vditor ) ;
}
} else {
if ( vditor . options . upload . error ) {
vditor . options . upload . error ( xhr . responseText ) ;
} else {
vditor . tip . show ( xhr . responseText ) ;
}
}| ilustrar | valor padrão | |
|---|---|---|
| url | Carregue o URL, se estiver vazio, o evento relacionado ao upload não será acionado. | '' |
| máx | Faça o upload de byte máximo do arquivo | 10 * 1024 * 1024 |
| LinkToimGurl | Quando a área de transferência contiver o endereço da imagem, use este URL para fazer upload novamente | '' |
| LinkToimgCallback (RespoteText: String) | Carregar o retorno de chamada do endereço da imagem | - |
| linkToimgFormat (RespoteText: String): String | Formate o valor de retorno enviado pelo endereço da imagem | - |
| Sucesso (editor: htmlpreelement, msg: string) | Faça upload com sucesso de retorno de chamada | - |
| Erro (msg: string) | Retorno de chamada com falha no upload | - |
| token | Verificação do upload dos CORs, o cabeçalho é x-upload-token | - |
| Withcredencials | Controle de acesso cruzado | falso |
| Cabeçalhos | Solicitar configurações de cabeçalho | - |
| nome do arquivo (nome: string): string | Nome do arquivo Processamento de segurança | nome => name.replace (/ w/g, '')) |
| aceitar | Tipo de upload de arquivo, o mesmo que a entrada aceita | - |
| validate (arquivos: arquivo []) => string | booleano | Verifique, retorne TRUE se for bem -sucedido, de outra forma, retorne a mensagem de erro | - |
| manipulador (arquivos: arquivo []) => string | nulo | Promessa | Promessa | Carregar o upload, retornar mensagem de erro quando ocorrer um erro | - |
| Format (Arquivos: File [], RespoteText: String): String | Converta os dados retornados pelo servidor para atender à estrutura de dados interna | - |
| Arquivo (Arquivos: Arquivo []): FILE [] | Promessa <arquivo []> | Processe o arquivo carregado antes de retornar | - |
| setheaders (): {[chave: string]: string} | Use o valor de retorno para definir o cabeçalho antes de fazer o upload | - |
| extradata: {[chave: string]: string | Blob} | Adicione parâmetros extras ao formData | - |
| múltiplo | Existe vários arquivos enviados | verdadeiro |
| FieldName | Carregue o nome do campo | 'arquivo[]' |
| RenderlinkDest? (Vditor: Ivditor, Nó: Ilutenode, Entrando: Booleano): [String, Número] | Processe o endereço da imagem na área de transferência | '' |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | É suportado para arrastar tamanho? | falso |
| posição | Posição da barra de arrasto: 'Top', 'Bottom' | 'fundo' |
| Depois (altura: número) | Retorno de chamada terminou com arrastar | - |
| ilustrar | valor padrão | |
|---|---|---|
| visualização | ClassName no elemento de visualização | '' |
| ilustrar | valor padrão | |
|---|---|---|
| índice | Nível de tela inteira | 90 |
| ilustrar | valor padrão | |
|---|---|---|
| habilitar | Se a inicialização exibe o esboço | falso |
| posição | Localização de contorno: 'Esquerda', 'direita' | 'esquerda' |
| ilustrar | |
|---|---|
| exportjson (markdown: string) | Obtenha o JSON correspondente de acordo com o Markdown |
| getValue () | Obtenha conteúdo de marcação |
| Gethtml () | Obtenha conteúdo HTML |
| InsertValue (valor: string, render = true) | Insira o conteúdo em foco e use a renderização do Markdown por padrão |
| foco() | Concentre -se no editor |
| borrão() | Faça o editor fora de foco |
| desabilitado() | Desative o editor |
| habilitar() | Indishable the Editor |
| getSelection (): string | Retorna a sequência selecionada |
| SetValue (Markdown: String, ClearStack = false) | Defina o conteúdo do editor e selecione Clear History Stack |
| ClearStack () | Limpe a pilha de desfazer e refazer |
| renderpreview (valor?: string) | Definir conteúdo da área de visualização |
| getCursorposition (): {top: número, esquerda: número} | Obtenha a posição de foco |
| DeleteValue () | Excluir conteúdo selecionado |
| UpdateValue (Valor: String) | Atualizar conteúdo selecionado |
| isuploading () | Está o upload ainda em andamento |
| ClearCache () | Cache limpo |
| DisabledCache () | Desative o cache |
| EnableCache () | Ativar cache |
| html2md (valor: string) | Html para md |
| Dica (texto: string, tempo: número) | Prompt de mensagem. O tempo é 0 e será exibido |
| setPreviewMode (Modo: "Ambos" | "Editor") | Defina o modo de visualização |
| setTheme (tema: "escuro" | "clássico", contenttheme?: string, codetheme?: string, contentthemepath?: string) | Definir tema, tema de conteúdo e estilo de bloco de código |
| getCurrentMode (): string | Obtenha o modo de edição atual do editor |
| destruir() | Destrua o editor |
| getCommentIds (): {id: string, top: número} [] | Obtenha todos os comentários |
| HLCommentIds (IDS: String []) | Destaque comentários |
| UNHLCOMMENTIDS (IDS: String []) | Cancelar comentários e destaques |
| RemoveCommentIds (RemoneIDs: String []) | Exclua comentários |
| UpdateTeToolBarConfig (config: {hide?: boolean, pin?: boolean}) | Atualize a configuração da barra de ferramentas |
method.min.js e chamá -lo diretamente da seguinte forma Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview , e os parâmetros são os seguintes: previewElement: HTMLDivElement , // 使用该元素进行渲染
markdown : string , // 需要渲染的 markdown 原文
options ?: IPreviewOptions {
mode : "dark" | "light" ;
anchor?: number ; // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0
customEmoji?: { [ key : string ] : string } ; // 自定义 emoji，默认为 {}
lang?: ( keyof II18nLang ) ; // 语言，默认为 'zh_CN'
emojiPath?: string ; // 表情图片路径
hljs?: IHljs ; // 参见 options.preview.hljs
speech?: { // 对选中后的内容进行阅读
enable ?: boolean ,
} ;
math?: IMath ; // 数学公式渲染配置
cdn?: string ; // 自建 CDN 地址
transform ? ( html : string ) : string ; // 在渲染前进行的回调方法
after ? ( ) ; // 渲染完成后的回调
lazyLoadImage?: string ; // 设置为 Loading 图片地址后将启用图片的懒加载
markdown?: options . preview . markdown ;
theme?: options . preview . theme ;
render?: options . preview . render ;
renderers?: ILuteRender ; // 自定义渲染 https://ld246.com/article/1588412297062
}method.min.js e index.min.js não podem ser introduzidos ao mesmo tempo| ilustrar | |
|---|---|
| VisuewImage (OldimgElement: htmlimageElement, lang: keyof ii18n = "zh_cn", tema = "clássico") | Clique na imagem para visualizar |
| MermaidRender (elemento: htmlelement, cdn = options.cdn, tema = options.theMe) | Fluxo/gráfico de tempo/gráfico de gant |
| Smilesrender (elemento: htmlelement, cdn = options.cdn, tema = options.theMe) | Estrutura de substância química |
| MarkMaPrender (elemento: htmlelement, cdn = options.cdn) | Mapa mental de marcação |
| FlowChartrender (elemento: htmlelement, cdn = options.cdn) | renderização do fluxograma |
| Coderender (Element: htmlelement, opção?: ihljs) | Adicione um botão de cópia ao bloco de código no elemento |
| Chartrender (elemento: (htmlelement | | Renderização de gráficos |
| MINDMAPRENDER (elemento: (htmlelement | | Renderização da imagem cerebral |
| plantaumlrender (elemento: (htmlelement | document) = document, cdn = options.cdn) | Renderização de Plantuml |
| abrender (elemento: (htmlelement | document) = document, cdn = options.cdn) | Renderização do ponto |
| md2html (mdtext: string, opções?: ipreviewOptions): promete <string> | O texto de marcação é convertido em HTML, esse método requer programação assíncrona |
| Visualizar (PreviewElement: htmldielement, Markdown: string, opções?: ipreviewOptions) | Página renderização de artigo |
| HighLightrender (hljSoption?: ihljs, elemento?: htmlelement | document, cdn = options.cdn) | Destaque a renderização dos blocos de código no elemento |
| mediarender (elemento: htmlelement) | Renderizar como vídeo, áudio e iframes incorporados para links específicos |
| Mathrender (elemento: htmlelement, opções?: {cdn?: string, math?: iMath}) | Renderizando fórmulas matemáticas |
| Speechrender (elemento: htmlelement, Lang?: (Keyof ii18nlang)) | Leia o texto selecionado |
| GraphVizrender (elemento: htmlelement, cdn?: string) | Render graphviz |
| OutlineRender (contentElement: htmlelement, TargetElement: Element) | Renderizar o esboço |
| LAZYLOADIGERIMAGERENDER (elemento: (htmlelement | document) = documento) | Renderizando fotos com carregamento preguiçoso ativado |
| SetCodetheme (Codetheme: String, CDN = Options.cdn) | Defina o tema do código, consulte Options.Preview.hljs.style para codetheme |
| setContentTheme (contentTheMe: string, caminho: string) | Defina o tema do conteúdo, consulte Options.Preview.TheMe.List para conteúdo. |
npm install no diretório raiznpm run start Start Start para iniciar o servidor local e abrir http: // localhost: 9000npm run build Package Code to Dist DirectoryDevido ao uso do mecanismo de carregamento sob demanda, o CDN padrão é https://unpkg.com/vditor@ Número da versão
Se o código for modificado ou você precisar usar um CDN auto-construído, poderá seguir as seguintes etapas:
cdn , emojiPath e themes em options e IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , setContentTheme Métodos precisam adicionar parâmetros CDNLeia a parte de atualização no Changelog com cuidado ao atualizar a versão
O vditor usa o protocolo de código aberto do MIT.
Nos primeiros dias do desenvolvimento do SYM, usamos diretamente o editor de texto Rich Wysiwyg. Naquela época, os editores baseados em HTML eram muito populares e eram muito convenientes para citar em projetos e estavam alinhados com os hábitos de uso do usuário naquele momento.
Mais tarde, a ascensão do Markdown mudou gradualmente o layout de todos. Além disso, vários de nossos outros projetos são para programadores; portanto, a migração para o MD também é uma tendência geral. Escolhemos o Codemirror, um excelente editor que fornece aos desenvolvedores interfaces de programação ricas e também é mais compatível com vários navegadores.
Mais tarde, à medida que nosso negócio de projeto precisa se resolver, o uso de Codemirror às vezes parece "pesado". Por exemplo, para obter @Automaticamente concluir a lista de nome de usuário, inserir emoji, fazer upload de arquivos, etc., requer desenvolvimento secundário relativamente aprofundado, e essas necessidades de negócios são exatamente o que muitos cenários de projeto têm e são necessários.
Finalmente, decidimos começar a implementar o editor em Sym. Com várias iterações de versões, o editor da SYM está se tornando cada vez mais maduro. Na cadeia comunitária que operamos, algumas pessoas nos perguntaram se podemos retirar o editor separadamente e fornecê -la a todos para uso. Ao mesmo tempo, nossa classe principal V do front-end V estava um pouco sobrecarregada ao manter os editores espalhados em vários projetos e também teve uma boa impressão de datilografrições, por isso decidimos usar o TS para implementar um novo editor de MD do lado do navegador.
Então, Vditor nasceu.
