vditor
v3.10.7
Éditeur Markdown facile à utiliser, conçu pour s'adapter à différents scénarios d'application
Anglais | Démo
VDitor est un éditeur de démarque côté navigateur qui prend en charge WYSIWYG, le rendu instantané (similaire à Typora) et les modes d'aperçu à écran partagé. Il est implémenté à l'aide de TypeScript et prend en charge JavaScript natif ainsi que des cadres tels que Vue, React, Angular et Svelte.
Bienvenue dans le domaine de discussion officiel de VDitor pour en savoir plus. Dans le même temps, nous nous réjouissons également de suivre le compte officiel de la communauté open source B3Log B3log开源:
Avec la popularité des méthodes de composition de Markdown, de plus en plus d'applications ont commencé à intégrer les éditeurs de Markdown. L'état actuel des éditeurs de Markdown intégrés traditionnels est le suivant:
Ces trois points correspondent exactement à trois scénarios d'application:
Par conséquent, un éditeur de Markdown qui peut s'adapter au scénario d'application est crucial, et il doit être pris en compte:
Vditor a fait des efforts dans ces domaines, dans l'espoir d'apporter une certaine contribution au champ d'édition de Markdown universel moderne.
Le mode WYSIWYG est plus convivial pour les utilisateurs qui ne connaissent pas Markdown et peuvent également être utilisés de manière transparente si vous connaissez Markdown.
Le mode de rendu instantané ne devrait pas être inconnu pour les utilisateurs qui connaissent Typora. En théorie, c'est le moyen le plus élégant de modifier Markdown.
Le mode d'aperçu traditionnel à écran partagé convient à l'édition de Markdown sous de grands écrans.
La plupart des fonctionnalités ci-dessus peuvent être activées par la configuration de commutation. Les développeurs peuvent choisir la correspondance en fonction de leurs scénarios d'application.
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 >L'apparition de l'éditeur. Classic intégré, sombres 2 ensembles de thèmes.
options.themesetThemeL'apparition de la sortie HTML de Markdown. Ant-conception intégrée, claire, sombre, WeChat 4 ensembles de thèmes. Prise en charge l'interface d'extension de thème de contenu.
class="vditor-reset" à l'élément d'affichageoptions.preview.themeIPreviewOptions.themesetTheme ou setContentTheme L'apparence du bloc de code. Github intégré et 36 autres ensembles de thèmes.
options.preview.hljsIPreviewOptions.hljssetTheme ou setCodeTheme Vous pouvez remplir l' id d'élément ou le propre HTMLElement de l'élément
HTMLElement de l'élément lui-même, vous devez définir options.cache.id ou définir options.cache.enable à false
| illustrer | valeur par défaut | |
|---|---|---|
| i18n | Multilingue, voir itips | - |
| décoller | Intervalle d'histoire | - |
| Après | Méthode de rappel après la rendue de l'éditeur de manière asynchrone | - |
| hauteur | Hauteur total de l'éditeur | 'auto' |
| minheight | Hauteur minimum de la zone d'édition | - |
| largeur | Largeur totale de l'éditeur, support% | 'auto' |
| espace réservé | Invite lorsque la zone d'entrée est vide | '' |
| égouter | Types de langue: en_us, FR_FR, PT_BR, JA_JP, KO_KR, RU_RU, SV_SE, ZH_CN, ZH_TW | 'zh_cn' |
| entrée (valeur: chaîne) | Déclenché après entrée | - |
| Focus (valeur: chaîne) | Déclencher après Focus | - |
| Blur (valeur: chaîne) | Déclenché après focus | - |
| Keydown (événement: clavier-point) | Déclenché après appuyer sur | - |
| ESC (valeur: chaîne) | Déclenché après la presse ESC | - |
| ctrlentiter (valeur: chaîne) | ⌘ / ctrl + Entrée est déclenché après appuyer sur | - |
| SELECT (valeur: chaîne) | Déclenché après avoir sélectionné du texte dans l'éditeur | - |
| languette | Tab Key fonctionne à des chaînes, prend en charge t et toutes les chaînes | - |
| Typewritermode | S'il faut activer le mode de machine à écrire | FAUX |
| monnaie | Configurer une adresse CDN auto-construite | https://unpkg.com/vditor@${VDITOR_VERSION} |
| mode | Mode facultatif: SV, IR, WYSIWYG | 'Ir' |
| débogueur | S'il faut afficher les journaux | FAUX |
| valeur | Valeur d'initialisation de l'éditeur | '' |
| thème | Sujet: classique, sombre | 'classique' |
| icône | Style icône: fourmi, matériel | 'fourmi' |
| CustomAnders: {Language: String, render: (élément: htmlelement, vDitor: ivditor) => void} [] | Rendu personnalisé | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . Voir src / ts / util / options.ts pour la valeur par défautemoji , 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 , help , brname n'est pas dans l'énumération, vous pouvez ajouter un bouton personnalisé, dans le format comme suit: 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' ) } ,
} ] ,
} )| illustrer | valeur par défaut | |
|---|---|---|
| nom | Marque unique | - |
| icône | icône SVG | - |
| conseil | indice | - |
| tipposition | Conseils: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| se cacher | Touches de raccourci au format ⇧⌘ / ⌘ / ⌥⌘ | - |
| suffixe | Insérer le suffixe dans l'éditeur | - |
| préfixe | Insérer le préfixe dans l'éditeur | - |
| Cliquez sur (événement: événement, vditeur: ivditor) | L'événement qui est déclenché lorsqu'un bouton personnalisé est cliqué | - |
| nom de classe | Nom de style | '' |
| barre d'outils ?: Array <options.toolbar> | Sous-menu | - |
| illustrer | valeur par défaut | |
|---|---|---|
| Cacher | Si vous devez masquer la barre d'outils | FAUX |
| épingle | S'il faut réparer la barre d'outils | FAUX |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | Si vous devez activer le comptoir | FAUX |
| après (longueur: numéro, compteur: options.Counter): void | Rappel de nombre de mots | - |
| max | La valeur maximale autorisée à entrer | - |
| taper | Type de statistiques: «Markdown», «texte» | 'réduction' |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | Si vous devez utiliser localstorage pour le cache | vrai |
| identifiant | Clé de cache, le premier paramètre est un élément et nécessite une activation du cache | - |
| après (html: chaîne): chaîne | Rappel de cache | - |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | S'il faut activer le mode de commentaire | FAUX |
| ajouter (id: chaîne, texte: chaîne, commentaires: iCommentsData []) | Ajouter un rappel de commentaires | - |
| supprimer (ids: chaîne []) | Supprimer le rappel des commentaires | - |
| Faites défiler (en haut: numéro) | Faire défiler le rappel | - |
| ajustement (commentairedata: iCommentsData []) | Lors de la modification du document, la hauteur des commentaires est adaptée | - |
| illustrer | valeur par défaut | |
|---|---|---|
| retard | Aperçu débouvre des intervalles de millisecondes | 1000 |
| maxaigrité | Largeur maximale de la zone d'aperçu | 800 |
| mode | Mode d'affichage: les deux, éditeur | 'les deux' |
| URL | Demande d'analyse MD | - |
| Parse (élément: htmlelement) | Aperçu | - |
| transform (html: chaîne): chaîne | Rappel avant le rendu | - |
| illustrer | valeur par défaut | |
|---|---|---|
| defaultlang | Utilisez la langue par défaut si aucune langue n'est spécifiée | '' |
| activer | S'il faut permettre la mise en évidence du code | vrai |
| style | Voir chrome pour les valeurs facultatives | github |
| nombre de lingettes | S'il faut activer le numéro de ligne | FAUX |
| égouttements | Personnalisez la langue spécifiée | Code_languages |
| Rendermenu (code: htmlelement, copie: htmlelement) | Bouton de menu | - |
| illustrer | valeur par défaut | |
|---|---|---|
| autospace | Espaces automatiques | FAUX |
| gfautolink | Lien automatique | vrai |
| fixterTypo | Terme de correction automatique | FAUX |
| toc | Répertoire d'insertion | FAUX |
| notes de bas de page | note de bas de page | vrai |
| CodeBlockPreview | S'il faut rendre le bloc de code dans les modes WYSIWYG et IR | vrai |
| MathBlockPreview | Que ce soit pour faire des formules mathématiques dans les modes WYSIWYG et IR | vrai |
| paragraphbeginningspace | Deux débuts vides | FAUX |
| désinfecter | S'il faut activer le filtrage XSS | vrai |
| listyle | Ajouter un attribut de style données à la liste | FAUX |
| LinkBase | Préfixe de chemin relatif de liaison | '' |
| linkprefix | Lien préfixe obligatoire | '' |
| marque | Activer Mark Mark | FAUX |
| illustrer | valeur par défaut | |
|---|---|---|
| Actuel | Sujet actuel | "lumière" |
| liste | Liste des sujets facultatifs | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| chemin | Adresse de style thème | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| illustrer | valeur par défaut | |
|---|---|---|
| inlindigit | Est-il autorisé à compter après que la formule mathématique en ligne commence $? | FAUX |
| macros | Les définitions de macro sont passées lors du rendu avec Mathjax | {} |
| moteur | Moteur de rendu de formule mathématique: Katex, Mathjax | 'Katex' |
| mathjaxoptions | Paramètres lorsque le moteur de rendu de formule mathématique est Mathjax | - |
Les valeurs par défaut sont ["Desktop", "tablette", "mobile", "mp-wechat", "zhihu"]. Vous pouvez sélectionner parmi les valeurs par défaut pour la configuration ou utiliser les champs suivants pour le développement personnalisé.
| illustrer | valeur par défaut | |
|---|---|---|
| clé | Le bouton est identifié de manière unique et ne peut pas être vide | - |
| texte | Texte du bouton | - |
| infraction | indice | - |
| nom de classe | Nom de la classe de bouton | - |
| Cliquez sur (touche: chaîne) | Button Cliquez sur l'événement de rappel | - |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | S'il faut permettre le rendu multimédia | vrai |
| illustrer | valeur par défaut | |
|---|---|---|
| ispreview | S'il faut prévisualiser l'image | vrai |
| aperçu (bom: élément) => void | Traitement d'aperçu de l'image | - |
| illustrer | valeur par défaut | |
|---|---|---|
| isopen | S'il faut ouvrir l'adresse du lien | vrai |
| cliquez (bom: élément) => void | Cliquez sur l'événement du lien | - |
| illustrer | valeur par défaut | |
|---|---|---|
| analyse | S'il faut effectuer l'analyse MD | vrai |
| retard | Intervalle de la milliseconde invite | 200 |
| emoji | Emoji par défaut, peut être sélectionné dans Lute / emoji_map, ou peut être personnalisé | {'+1': '?', '-1': '?', 'Coeur': '❤️', 'Cold_sweat': '?' } |
| emojitail | Conseils d'expression courants | - |
| emojipath | Adresse d'image d'expression | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| Extension: IHINTEXTEND [] | Extension de l'achèvement automatique de mots clés tels que @ / tournées | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format peut être utilisé pour la conversion. // 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 peut passer l'adresse d'image hors site dans le presse-papiers au serveur pour enregistrer, et sa structure de données est la suivante: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format , error ne seront pas déclenchés en même temps. La situation d'appel spécifique est la suivante: 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 ) ;
}
}| illustrer | valeur par défaut | |
|---|---|---|
| URL | Téléchargez l'URL, s'il est vide, l'événement lié au téléchargement ne sera pas déclenché. | '' |
| max | Télécharger le fichier MAXIMUM BYTE | 10 * 1024 * 1024 |
| linktoimgurl | Lorsque le presse-papiers contient l'adresse d'image, utilisez cette URL pour télécharger à nouveau | '' |
| linktoimgcallback (ResponseText: String) | Télécharger un rappel d'adresse d'image | - |
| linktoimgFormat (ResponseText: String): String | Formater la valeur de retour téléchargée par l'adresse d'image | - |
| Succès (éditeur: htmlpreelement, msg: string) | Télécharger un rappel avec succès | - |
| Erreur (msg: chaîne) | Télécharger un rappel raté | - |
| jeton | CORS télécharge la vérification, l'en-tête est X-upload-token | - |
| Créraction | Contrôle d'accès à site transversal | FAUX |
| Têtes | Demandez les paramètres d'en-tête | - |
| nom de fichier (nom: chaîne): chaîne | Nom de fichier Traitement de sécurité | name => name.replace (/ w / g, '') |
| accepter | Type de téléchargement de fichiers, identique à la saisie accepter | - |
| valider (fichiers: fichier []) => chaîne | booléen | Vérifiez, renvoyez True si réussi, autrement, renvoyez le message d'erreur | - |
| Handler (fichiers: fichier []) => String | NULL | Promesse | Promesse | Message d'erreur de téléchargement personnalisé lorsqu'une erreur se produit | - |
| Format (fichiers: fichier [], ResponseText: String): chaîne | Convertir les données renvoyées par le serveur pour rencontrer la structure de données intégrée | - |
| fichier (fichiers: fichier []): fichier [] | Promesse <file []> | Traiter le fichier téléchargé avant de retourner | - |
| Setheaders (): {[key: string]: String} | Utilisez la valeur de retour pour définir l'en-tête avant le téléchargement | - |
| extradata: {[key: string]: String | Blob} | Ajouter des paramètres supplémentaires à FormData | - |
| multiple | Y a-t-il plusieurs fichiers téléchargés | vrai |
| nom de terrain | Télécharger le nom du champ | 'déposer[]' |
| RenderLinkDest? (Vditor: ivditor, node: ilutenode, entrant: booléen): [String, numéro] | Traiter l'adresse d'image dans le presse-papiers | '' |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | Est-il pris en charge pour la traînée de taille? | FAUX |
| position | Position de la barre de glisser: «haut», «en bas» | 'bas' |
| Après (hauteur: numéro) | Le rappel s'est terminé par la traînée | - |
| illustrer | valeur par défaut | |
|---|---|---|
| prévisualisation | ClassName sur l'élément d'aperçu | '' |
| illustrer | valeur par défaut | |
|---|---|---|
| indice | Niveau complet | 90 |
| illustrer | valeur par défaut | |
|---|---|---|
| activer | Si l'initialisation affiche le contour | FAUX |
| position | Emplacement de contour: «gauche», «droite» | 'gauche' |
| illustrer | |
|---|---|
| ExportJson (Markdown: String) | Obtenez le JSON correspondant selon Markdown |
| getValue () | Obtenez du contenu Markdown |
| gethtml () | Obtenez du contenu HTML |
| insertValue (valeur: chaîne, rendu = true) | Insérez le contenu dans la mise au point et utilisez le rendu Markdown par défaut |
| se concentrer() | Concentrez-vous sur l'éditeur |
| se brouiller() | Rendre l'éditeur de mise au point |
| désactivé() | Désactiver l'éditeur |
| activer() | Indissible l'éditeur |
| getSelection (): String | Renvoie la chaîne sélectionnée |
| setValue (Markdown: String, clearStack = false) | Définissez le contenu de l'éditeur et sélectionnez Clear History Stack |
| ClearStack () | Effacer la pile d'enregistrements d'annulation et de rédaction |
| RenderPreview (valeur ?: String) | Définir le contenu de la zone |
| getCursorPosition (): {top: numéro, gauche: numéro} | Obtenir la position de mise au point |
| DeleTevalue () | Supprimer le contenu sélectionné |
| updateValue (valeur: chaîne) | Mettre à jour le contenu sélectionné |
| iSuploading () | Le téléchargement est-il toujours en cours |
| clearcache () | Cache effacer |
| DisabledCache () | Désactiver le cache |
| perteCache () | Activer le cache |
| html2md (valeur: chaîne) | HTML à MD |
| Conseil (texte: chaîne, temps: numéro) | Invite de message. Le temps est 0 et sera affiché |
| setPreviewMode (mode: "à la fois" | "éditeur") | Définir le mode d'aperçu |
| setTheme (thème: "sombre" | "classique", contenutheme ?: String, codeTeme ?: String, contentThemepath ?: String) | Définir le thème, le thème du contenu et le style de bloc de code |
| getCurrentMode (): chaîne | Obtenez le mode d'édition actuel de l'éditeur |
| détruire() | Détruiser l'éditeur |
| getcommentid (): {id: chaîne, top: numéro} [] | Obtenez tous les commentaires |
| hlcommentid (ids: string []) | Mettre en évidence les commentaires |
| UNHLCOMMENDIDS (IDS: String []) | Annuler les commentaires et les faits saillants |
| Removecommentid (RELOPIDIDS: String []) | Supprimer les commentaires |
| UpdateToolBarConfig (config: {Hide ?: Boolean, Pin ?: Boolean}) | Mettre à jour la configuration de la barre d'outils |
method.min.js et l'appeler directement comme suit Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview et les paramètres sont les suivants: 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 et index.min.js ne peuvent pas être introduits en même temps| illustrer | |
|---|---|
| Aperçu de l'immeuble (OldImGelement: HtMlimageElement, Lang: Keyof II18N = "ZH_CN", thème = "Classic") | Cliquez sur l'image pour prévisualiser |
| Mermaiderder (élément: htmlelement, cdn = options.cdn, thème = options.theme) | Tableau d'écoulement / Tableau de temps / GANT |
| Smilesrender (élément: htmlelement, cdn = options.cdn, thème = options.theme) | Structure de substance chimique |
| markmaprender (élément: htmlelement, cdn = options.cdn) | Carte d'esprit de Markdown |
| FlowCharTrender (élément: htmlelement, cdn = options.cdn) | Rendu de l'organigramme |
| Coderender (élément: htmlelement, option ?: ihljs) | Ajoutez un bouton de copie au bloc de code dans l'élément |
| CharTrender (élément: (htmlelement | document) = document, cdn = options.cdn, thème = options.theme) | Rendu de graphique |
| MindMapRender (élément: (htmlelement | document) = document, cdn = options.cdn, thème = options.theme) | Rendu d'image du cerveau |
| PlantumlRender (élément: (htmlelement | document) = document, cdn = options.cdn) | Rendu Plantuml |
| Abcrender (élément: (htmlelement | document) = document, cdn = options.cdn) | Rendu de point |
| md2html (mdtext: string, options ?: ipreViewOptions): promesse <string> | Le texte de Markdown est converti en HTML, cette méthode nécessite une programmation asynchrone |
| Aperçu (préviewelement: htmlaidement, markdown: string, options ?: ipreViewOptions) | Rendu de l'article de marque de page |
| HighLighTrender (hljsoption ?: ihljs, élément ?: htmlelement | document, cdn = options.cdn) | Mettre en surbrillance le rendu des blocs de code dans l'élément |
| Médiateur (élément: htmlelement) | Rendez-vous en vidéo, audio et iframes intégrés pour des liens spécifiques |
| Mathrender (élément: htmlelement, options ?: {cdn ?: String, math ?: iMath}) | Rendre des formules mathématiques |
| SpeechRender (élément: htmlelement, lang ?: (keyof ii18nlang))) | Lire le texte sélectionné |
| GraphVizRender (élément: htmlelement, cdn ?: String) | Rendre Graphviz |
| OutlineRend (ContentElement: Htmlelement, TargetElement: Element) | Rendez le contour |
| LazyloadImageRender (élément: (htmlelement | document) = document) | Rendu des photos avec chargement paresseux activé |
| setCodeTheme (CodeTheme: String, cdn = options.cdn) | Définissez le thème du code, voir OptionS.Preview.hljs.Style pour CodeTheme |
| setContentTheme (contentTheme: String, chemin: String) | Définir le thème du contenu, voir OptionS.Preview.Theme.List pour ContentTheme. |
npm install à partir du répertoire racinenpm run start Start Start pour démarrer le serveur local et ouvrir http: // localhost: 9000npm run build vers le répertoire DISTEn raison de l'utilisation du mécanisme de chargement à la demande, le CDN par défaut est https://unpkg.com/vditor@ numéro de version
Si le code est modifié ou si vous devez utiliser un CDN auto-construit, vous pouvez suivre les étapes suivantes:
cdn , emojiPath et themes dans options et IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , setContentTheme Methods DOIT pour ajouter des paramètres CDNVeuillez lire attentivement la partie de mise à niveau dans Changelog lors de la mise à niveau de la version
VDitor utilise le protocole open source du MIT.
Au début du développement de Sym, nous avons directement utilisé l'éditeur de texte riche WYSIWYG. À cette époque, les éditeurs basés à HTML étaient très populaires, et ils étaient très pratiques à citer dans les projets, et ils étaient également conformes aux habitudes d'utilisation de l'utilisateur à ce moment-là.
Plus tard, la montée en puissance de Markdown a progressivement changé la disposition de tout le monde. De plus, plusieurs de nos autres projets sont destinés aux programmeurs, donc la migration vers MD est également une tendance générale. Nous avons choisi Codemirror, un excellent éditeur qui fournit aux développeurs des interfaces de programmation riches et est également plus compatible avec divers navigateurs.
Plus tard, selon les besoins de notre entreprise de projet, l'utilisation de Codemirror se sent parfois "lourde". Par exemple, pour réaliser @automatiquement terminer la liste des noms d'utilisateur, insérer des emoji, télécharger des fichiers, etc., il nécessite un développement secondaire relativement approfondi, et ces besoins commerciaux sont exactement ce que de nombreux scénarios de projet ont et sont nécessaires.
Enfin, nous avons décidé de commencer à mettre en œuvre l'éditeur nous-mêmes dans Sym. Avec plusieurs versions itérations, l'éditeur de Sym devient de plus en plus mature. Sur la chaîne communautaire que nous opérons, certaines personnes nous ont demandé si nous pouvons retirer l'éditeur séparément et le fournir à tout le monde pour être utilisé. Dans le même temps, notre classe V front-end Program V V a été un peu dépassée par le maintien des éditeurs dispersés dans divers projets, et avait également une bonne impression de typeScript, nous avons donc décidé d'utiliser TS pour implémenter un tout nouvel éditeur MD côté navigateur.
Ainsi, Vditor est né.
