vditor
v3.10.7
Editor de Markdown fácil de usar, creado para adaptarse a diferentes escenarios de aplicaciones
Inglés | Manifestación
Vditor es un editor de Markdown del lado del navegador que admite Wysiwyg, representación instantánea (similar a typora) y modos de vista previa de pantalla dividida. Se implementa utilizando TypeScript y admite JavaScript nativo, así como marcos como Vue, React, Angular y Svelte.
Bienvenido al área de discusión oficial de Vditor para obtener más información. Al mismo tiempo, también damos la bienvenida a seguir a B3LOG Open Source Community WeChat Cuenta oficial B3log开源:
Con la popularidad de los métodos de composición de tipos de marca, cada vez más aplicaciones han comenzado a integrar los editores de Markdown. El estado actual de los editores de Markdown integrados de Mainstream es el siguiente:
Estos tres puntos corresponden exactamente a tres escenarios de aplicación:
Por lo tanto, un editor de Markdown que puede adaptarse al escenario de la aplicación es crucial, y debe considerarse:
Vditor ha hecho esfuerzos en estas áreas, con la esperanza de hacer alguna contribución al moderno campo de edición universal de Markdown.
El modo Wysiwyg es más amigable para los usuarios que no están familiarizados con Markdown, y también se pueden usar sin problemas si está familiarizado con Markdown.
El modo de representación instantánea no debe ser desconocido para los usuarios que están familiarizados con Typora. En teoría, esta es la forma más elegante de editar Markdown.
El modo de vista previa de pantalla dividida tradicional es adecuado para la edición de Markdown en pantallas grandes.
La mayoría de las características anteriores se pueden habilitar cambiando la configuración. Los desarrolladores pueden elegir la coincidencia en función de sus escenarios de aplicación.
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 >La aparición del editor. Clásico integrado, oscuro 2 conjuntos de temas.
options.themesetThemeLa aparición de la salida HTML de Markdown. Diseño de hormigas incorporado, claro, oscuro, WeChat 4 conjuntos de temas. Admite la interfaz de extensión de tema de contenido.
class="vditor-reset" al elemento de visualizaciónoptions.preview.themeIPreviewOptions.themesetTheme o setContentTheme La aparición del bloque de código. GitHub incorporado y otros 36 conjuntos de temas.
options.preview.hljsIPreviewOptions.hljssetTheme o setCodeTheme Puede completar la id del elemento o el propio HTMLElement del elemento
HTMLElement del elemento en sí, debe establecer options.cache.id o establecer options.cache.enable a false
| ilustrar | valor predeterminado | |
|---|---|---|
| i18n | Multilingüe, ver itips | - |
| desanimarse | Intervalo de historia | - |
| Después | Método de devolución de llamada después de que el editor se presente de forma asincrónica | - |
| altura | Altura total del editor | 'auto' |
| mínimo | Altura mínima del área de edición | - |
| ancho | Ancho total del editor, soporte % | 'auto' |
| marcador de posición | Se indica cuando el área de entrada está vacía | '' |
| lang | Tipos de lenguaje: EN_US, FR_FR, PT_BR, JA_JP, KO_KR, RU_RU, SV_SE, ZH_CN, ZH_TW | 'zh_cn' |
| Entrada (valor: cadena) | Activado después de la entrada | - |
| Enfoque (valor: cadena) | Desencadenante después del enfoque | - |
| Blur (valor: cadena) | Activado después de foco | - |
| Keydown (evento: KeyboardEvent) | Activado después de presionar | - |
| ESC (valor: cadena) | Activado después de la prensa de ESC | - |
| Ctrlenter (valor: cadena) | ⌘/ctrl+Enter se activa después de presionar | - |
| Seleccionar (valor: cadena) | Activado después de seleccionar texto en el editor | - |
| pestaña | Tab Key opera cadenas, admite t y cualquier cadena | - |
| máquina de escribir | Si habilitar el modo de máquina de escribir | FALSO |
| CDN | Configurar una dirección de CDN autónoma | https://unpkg.com/vditor@${VDITOR_VERSION} |
| modo | Modo opcional: SV, IR, Wysiwyg | 'ir' |
| depurador | Si mostrar registros | FALSO |
| valor | Valor de inicialización del editor | '' |
| tema | Tema: clásico, oscuro | 'clásico' |
| icono | Estilo de icono: hormiga, material | 'hormiga' |
| CustomRenders: {lenguaje: string, render: (elemento: htmlelement, vditor: ivditor) => void} [] | Renderizador personalizado | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . Consulte SRC/TS/Util/Options.ts para el valor predeterminadoemoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check , outdent , indent , code , inline-code , insert-after , insert-before , undo , redo , upload , link , table , record , edit-mode , both , preview , fullscreen , outline , code-theme , content-theme , export , devtools , info , ayuda, help , BR, brname no está en la enumeración, puede agregar un botón personalizado, en el formato de la siguiente manera: 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 predeterminado | |
|---|---|---|
| nombre | Marca única | - |
| icono | icono SVG | - |
| consejo | pista | - |
| tiposición | Consejos: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| tecla de hot | Claves de atajo en formato ⇧⌘ / ⌘ / ⌥⌘ | - |
| sufijo | Inserte el sufijo en el editor | - |
| prefijo | Inserte el prefijo en el editor | - |
| Haga clic (Evento: Evento, Vditor: Ivditor) | El evento que se activa cuando se hace clic en un botón personalizado | - |
| nombre de clase | Nombre de estilo | '' |
| Barra de herramientas?: Array <options.toolbar> | Submenú | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| Esconder | Si ocultar la barra de herramientas | FALSO |
| alfiler | Si arreglar la barra de herramientas | FALSO |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | Si habilitar el mostrador | FALSO |
| Después (longitud: número, contador: opciones.counter): Void | Devolución de llamada con recuento de palabras | - |
| máximo | El valor máximo permitido ingresar | - |
| tipo | Tipo de estadísticas: 'Markdown', 'Texto' | 'reducción' |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | Si usar LocalStorage para caché | verdadero |
| identificación | Clave de caché, el primer parámetro es un elemento y requiere activación de caché | - |
| After (html: string): string | Devolución de llamada de caché | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | Si habilitar el modo de comentarios | FALSO |
| ADD (ID: String, Text: String, CommentsData: icommentsData []) | Agregue una devolución de llamada de comentarios | - |
| eliminar (IDS: String []) | Eliminar la devolución de llamada de comentarios | - |
| desplazarse (arriba: número) | Devolución de llamada | - |
| AjusteTop (CommentsData: iCommentsData []) | Al modificar el documento, la altura de los comentarios se adapta | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| demora | Vista previa | 1000 |
| maxwidth | Ancho máximo del área de vista previa | 800 |
| modo | Modo de visualización: ambos, editor | 'ambos' |
| url | Solicitud de análisis de MD | - |
| analizador (elemento: htmlelement) | Vista previa de devolución de llamada | - |
| transformar (html: string): string | Devolución de llamada antes de representar | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| defaultlang | Use el idioma por defecto si no se especifica el idioma | '' |
| permitir | Si habilitar el resaltado del código | verdadero |
| estilo | Ver Chroma para valores opcionales | github |
| número de lino | Si habilitar el número de línea | FALSO |
| langs | Personalizar el idioma especificado | Code_languages |
| rendermenu (código: htmlelement, copia: htmlelement) | Botón de menú Render | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| autospacial | Espacios automáticos | FALSO |
| gfmautolink | Enlace automático | verdadero |
| FIJATERMTYPO | Término de corrección automática | FALSO |
| tocarse | Insertar directorio | FALSO |
| notas al pie | nota | verdadero |
| CodebLockPreview | Si debe renderizar el bloque de código en Wysiwyg e IR Modes | verdadero |
| MathblockPreview | Si representa fórmulas matemáticas en Wysiwyg e IR Modes | verdadero |
| Párraphbeginningspace | Dos comienzos vacíos | FALSO |
| desinfectar | Si habilitar el filtrado XSS | verdadero |
| estilo list | Agregar atributo de estilo de datos a la lista | FALSO |
| base de enlace | Enlace prefijo de ruta relativa | '' |
| linkprefix | Enlace prefijo obligatorio | '' |
| marca | Habilitar Mark Mark | FALSO |
| ilustrar | valor predeterminado | |
|---|---|---|
| Actual | Tema actual | "luz" |
| lista | Lista de temas opcionales | {"Ant-Disign": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| camino | Dirección de estilo de tema | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| ilustrar | valor predeterminado | |
|---|---|---|
| inlinedigit | ¿Está permitido contar después de que la fórmula matemática en línea comienza $? | FALSO |
| macros | Definiciones macro aprobadas al renderizar con MathJax | {} |
| motor | Motor de representación de fórmula matemática: Katex, Mathjax | 'Katex' |
| MathJaxoptions | Parámetros Cuando el motor de representación de fórmula matemática es Mathjax | - |
Los valores predeterminados son ["escritorio", "tableta", "móvil", "mp-wechat", "zhihu"]. Puede seleccionar entre los valores predeterminados para la configuración, o usar los siguientes campos para el desarrollo personalizado.
| ilustrar | valor predeterminado | |
|---|---|---|
| llave | El botón se identifica de manera única y no puede estar vacía | - |
| texto | Texto de botón | - |
| comedia de herramientas | pista | - |
| nombre de clase | Nombre de clase de botón | - |
| Haga clic (Key: String) | Evento de devolución de llamada de clic del botón | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | Si habilitar la representación multimedia | verdadero |
| ilustrar | valor predeterminado | |
|---|---|---|
| ISpreview | Si observa la imagen de la imagen | verdadero |
| Vista previa (Bom: Element) => Void | Procesamiento de vista previa de imagen | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| isopener | Si abrir la dirección de enlace | verdadero |
| haga clic (Bom: Element) => Void | Haga clic en Evento de enlace | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| analizar gramaticalmente | Si realizar análisis de MD | verdadero |
| demora | Intervalo de milisegundos de desbloqueo rápido | 200 |
| emoji | Emoji predeterminado, se puede seleccionar de lute/emoji_map, o se puede personalizar | {'+1': '?', '-1': '?', 'Corazón': '❤️', 'Cold_sweat': '?' } |
| emojitail | Consejos de expresión comunes | - |
| emojípico | Dirección de imagen de expresión | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| extender: ihintextend [] | Extensión de la finalización automática de palabras clave como @/tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format se puede usar para la conversión. // 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 puede pasar la dirección de imagen fuera del sitio en el portapapeles al servidor para guardar, y su estructura de datos es la siguiente: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format , error no se activarán al mismo tiempo. La situación específica de la llamada es la siguiente: 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 predeterminado | |
|---|---|---|
| url | Cargue la URL, si está vacía, no se activará el evento relacionado con la carga. | '' |
| máximo | Cargar el archivo máximo byte | 10 * 1024 * 1024 |
| linktoimgurl | Cuando el portapapeles contiene la dirección de la imagen, use esta URL para cargar nuevamente | '' |
| LinkToImgCallback (ResponseExtext: String) | Cargar la devolución de llamada de la dirección de la imagen | - |
| LinkToImgFormat (ResponseExtext: String): String | Formatear el valor de retorno cargado por la dirección de la imagen | - |
| éxito (editor: htmlpreelement, msg: string) | Cargar con éxito la devolución de llamada | - |
| Error (msg: cadena) | Cargar devolución de llamada fallida | - |
| simbólico | Verificación de carga Cors, el encabezado es X-Supload-Token | - |
| descripcio | Control de acceso entre sitios | FALSO |
| Encabezado | Solicitar la configuración del encabezado | - |
| nombre de archivo (nombre: cadena): cadena | Procesamiento de seguridad del nombre del archivo | nombre => name.replace (/ w/g, '') |
| aceptar | Tipo de carga de archivo, igual que la entrada Aceptar | - |
| validar (archivos: archivo []) => cadena | booleano | Verifique, devuelva verdadero si tiene éxito de lo contrario el mensaje de error de regreso de lo contrario | - |
| Handler (archivos: archivo []) => cadena | NULL | Promesa | Promesa | Mensaje de error de carga personalizada, returación de retorno Cuando ocurre un error | - |
| formato (archivos: archivo [], responsabilidad de respuesta: string): string | Convierta los datos devueltos por el servidor para cumplir con la estructura de datos incorporada | - |
| archivo (archivos: archivo []): archivo [] | Promise <archivo []> | Procesar el archivo cargado antes de regresar | - |
| Setheaders (): {[Key: String]: String} | Use el valor de retorno para establecer el encabezado antes de cargar | - |
| extradata: {[Key: String]: String | Blob} | Agregue parámetros adicionales a FormData | - |
| múltiple | ¿Hay múltiples archivos cargados? | verdadero |
| nombre de nombre | Nombre del campo de carga | 'archivo[]' |
| renderlinkDest? (Vditor: ivditor, nodo: ilutenode, entrando: boolean): [cadena, número] | Procese la dirección de imagen en el portapapeles | '' |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | ¿Es compatible con el arrastre de tamaño? | FALSO |
| posición | Posición de la barra de arrastre: 'Top', 'Bottom' | 'abajo' |
| Después (altura: número) | La devolución de llamada terminó con arrastre | - |
| ilustrar | valor predeterminado | |
|---|---|---|
| avance | ClassName en el elemento de vista previa | '' |
| ilustrar | valor predeterminado | |
|---|---|---|
| índice | Nivel de pantalla completo | 90 |
| ilustrar | valor predeterminado | |
|---|---|---|
| permitir | Si la inicialización muestra el esquema | FALSO |
| posición | Ubicación de esquema: 'izquierda', 'derecha' | 'izquierda' |
| ilustrar | |
|---|---|
| Exportjson (Markdown: String) | Obtenga el JSON correspondiente según Markdown |
| GetValue () | Obtener contenido de Markdown |
| gethtml () | Obtener contenido HTML |
| insertValue (valor: string, render = true) | Inserte el contenido en el enfoque y use la representación de Markdown de forma predeterminada |
| enfocar() | Centrarse en el editor |
| difuminar() | Haga que el editor fuera de foco |
| desactivado() | Deshabilitar el editor |
| permitir() | Indisable el editor |
| getSelection (): cadena | Devuelve la cadena seleccionada |
| SetValue (Markdown: String, ClearStack = False) | Establezca el contenido del editor y seleccione Borrar History Stack |
| ClearStack () | Limpie la pila de registros de deshacer y rehacer |
| renderpreview (valor?: cadena) | Establecer contenido de área de vista previa |
| getCursorPosition (): {Top: número, izquierda: número} | Obtener la posición de enfoque |
| DeleteValue () | Eliminar contenido seleccionado |
| UpdateValue (valor: cadena) | Actualizar contenido seleccionado |
| isuploading () | ¿La carga todavía está en progreso? |
| ClearCache () | Cache de claro |
| DisabledCache () | Deshabilitar el caché |
| enableCache () | Habilitar caché |
| html2md (valor: cadena) | Html a md |
| Consejo (texto: cadena, hora: número) | Mensaje de mensaje. El tiempo es 0 y se mostrará |
| setPreviewMode (modo: "Ambos" | "Editor") | Establecer el modo de vista previa |
| SetTheme (tema: "Dark" | "Classic", ContentTheme?: String, Codetheme?: String, ContentThemePath?: String) | Establecer tema, tema de contenido y estilo de bloque de código |
| getCurrentMode (): cadena | Obtenga el modo de edición actual del editor |
| destruir() | Destruir al editor |
| getCommentIds (): {id: string, top: número} [] | Obtener todos los comentarios |
| hlcommentIds (IDS: String []) | Resaltar comentarios |
| UNHLComMentIds (IDS: String []) | Cancelar comentarios y aspectos destacados |
| RemoveComMentIds (removeDIds: String []) | Eliminar comentarios |
| UpdateToolBarConfig (config: {escondite?: boolean, pin?: boolean}) | Actualizar la configuración de la barra de herramientas |
method.min.js y llamarlo directamente de la siguiente manera Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview , y los parámetros son los siguientes: 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 y index.min.js no se pueden introducir al mismo tiempo| ilustrar | |
|---|---|
| PreviewImage (OldImgelement: HTMLIMAGEELEMENT, LANG: KeyOF II18N = "ZH_CN", TEMA = "Classic") | Haga clic en la imagen para obtener una vista previa |
| Mermaidrender (elemento: htmlelement, cdn = options.cdn, thema = options.theme) | Gráfico de flujo/gráfico de tiempo/gráfico Gant |
| SmilesRender (elemento: htmlelement, cdn = options.cdn, thema = options.ther) | Estructura de sustancia química |
| MarkMaprender (elemento: htmlelement, cdn = options.cdn) | mapa mental de markdown |
| FlowChartrender (Elemento: HTMLELEMENT, CDN = OPTIONS.CDN) | Renderización de diagrama de flujo |
| coderender (elemento: htmlelement, opción?: ihljs) | Agregue un botón de copia al bloque de código en el elemento |
| Chartrender (elemento: (htmlelement | document) = document, cdn = options.cdn, thema = options.theme) | Representación de gráficos |
| MindMaprender (elemento: (htmlelement | document) = document, cdn = options.cdn, thema = options.theme) | Renderización de imágenes cerebrales |
| plantumlrender (elemento: (htmlelement | document) = document, cdn = options.cdn) | representación de plantuml |
| abcrender (elemento: (htmlelement | document) = document, cdn = options.cdn) | Representación de puntadas |
| md2html (mdtext: string, options?: ipreviewOptions): Promise <String> | El texto de Markdown se convierte en HTML, este método requiere una programación asíncrona |
| Vista previa (View ViewElement: HTMLDiveLement, Markdown: String, Opciones?: IpReviewOptions) | Representación del artículo de la página de Markdown |
| HighlighTrender (HLJSOPTION?: IHLJS, Element?: HTMLEMENT | Documento, CDN = Options.cdn) | Resaltar la representación de bloques de código en el elemento |
| Mediarador (elemento: htmlelement) | Renderizar como iframes de video, audio e integrado para enlaces específicos |
| Mathrender (elemento: htmlelement, opciones?: {cdn?: string, math?: imath}) | Renderización de fórmulas matemáticas |
| Speechrender (elemento: htmlelement, lang?: (KeyOf II18nlang)) | Leer texto seleccionado |
| GraphVizrender (elemento: htmlelement, cdn?: cadena) | Renderizar Graphviz |
| Outlinerender (ContentElement: HTMLelement, TargetElement: Elemento) | Representar el contorno |
| LazyLoadImagerender (elemento: (htmlelement | document) = documento) | Renderizar imágenes con carga perezosa habilitada |
| setcodetheme (codetheme: string, cdn = options.cdn) | Establezca el tema del código, consulte options.preview.hljs.style para Codetheme |
| setContentTheme (ContentTheme: String, Rath: String) | Establezca el tema del contenido, consulte Options.preview.theme.list para contenttheme. |
npm install desde el directorio raíznpm run start Inicio para iniciar el servidor local y abrir http: // localhost: 9000npm run build en el directorio DISTDebido al uso del mecanismo de carga a pedido, el CDN predeterminado es https://unpkg.com/vditor@ Número de versión
Si el código se modifica o necesita usar un CDN auto-construido, puede seguir los siguientes pasos:
cdn , emojiPath y themes en options y IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , setContentTheme Methods necesita agregar parámetros CDNLea la parte de actualización en ChangeLog con cuidado al actualizar la versión
Vditor utiliza el protocolo de código abierto del MIT.
En los primeros días del desarrollo de SYM, utilizamos directamente el editor de texto rico en Wysiwyg. En ese momento, los editores basados en HTML eran muy populares, y eran muy convenientes para citar en proyectos, y también estaban en línea con los hábitos de uso del usuario en ese momento.
Más tarde, el aumento de Markdown cambió gradualmente el diseño de todos. Además, varios de nuestros otros proyectos son para programadores, por lo que la migración a MD también es una tendencia general. Elegimos CodeMirror, un excelente editor que proporciona a los desarrolladores interfaces de programación ricas y también es más compatible con varios navegadores.
Más tarde, a medida que se establece el negocio de nuestro proyecto, el uso de CodeMirror a veces se siente "engorroso". Por ejemplo, para lograr una lista de nombre de usuario completa @Automáticamente, insertar emoji, cargar archivos, etc., requiere un desarrollo secundario relativamente en profundidad, y estas necesidades comerciales son exactamente lo que muchos escenarios de proyectos tienen y son necesarios.
Finalmente, decidimos comenzar a implementar el editor nosotros mismos en SYM. Con varias versiones iteraciones, el editor de SYM se está volviendo cada vez más maduro. En la cadena comunitaria que operamos, algunas personas nos preguntaron si podemos retirar el editor por separado y proporcionarlo a todos para su uso. Al mismo tiempo, nuestra clase V principal del Front-end V estaba un poco abrumada en el mantenimiento de los editores dispersos en varios proyectos, y también tuvimos una buena impresión de TypeScript, por lo que decidimos usar TS para implementar un nuevo editor MD del lado del navegador.
Entonces, Vditor nació.
