vditor
v3.10.7
Ein benutzerfreundlicher Markdown-Editor, der entwickelt wurde, um sich an verschiedene Anwendungsszenarien anzupassen
Englisch | Demo
Vditor ist ein Browser-Side-Markdown-Editor, der Wysiwyg-, Instant-Rendering-Modi (ähnlich wie typora) und Split-Screen-Vorschau-Modi unterstützt. Es wird unter Verwendung von TypeScript implementiert und unterstützt natives JavaScript sowie Frameworks wie Vue, React, Angular und Sufelte.
Willkommen im offiziellen Diskussionsbereich des Vditors, um mehr zu erfahren. Gleichzeitig folgen wir auch willkommen, B3log Open Source Community Wechat Official Account B3log开源:
Mit der Beliebtheit von Markdown -Methoden haben immer mehr Anwendungen begonnen, Markdown -Editoren zu integrieren. Der aktuelle Status der integrierten Mainstream -Markdown -Editoren lautet wie folgt:
Diese drei Punkte entsprechen genau drei Anwendungsszenarien:
Daher ist ein Markdown -Editor, der sich an das Anwendungsszenario anpassen kann, entscheidend und muss berücksichtigt werden:
Vditor hat in diesen Bereichen Anstrengungen unternommen, in der Hoffnung, einen Beitrag zum modernen Universal Markdown -Bearbeitungsfeld zu leisten.
Der Wysiwyg -Modus ist für Benutzer, die mit Markdown nicht vertraut sind, freundlicher und können auch nahtlos verwendet werden, wenn Sie mit Markdown vertraut sind.
Der sofortige Rendering -Modus sollte den Nutzern, die mit Typora vertraut sind, nicht unbekannt sein. Theoretisch ist dies der eleganteste Weg, um den Markdown zu bearbeiten.
Der herkömmliche Vorschau-Modus mit Split-Screen eignet sich für die Markdown-Bearbeitung unter großen Bildschirmen.
Die meisten der oben genannten Funktionen können durch Schalten der Konfiguration aktiviert werden. Entwickler können eine Übereinstimmung basierend auf ihren Anwendungsszenarien wählen.
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 >Das Erscheinen des Herausgebers. Eingebaute klassische, dunkle 2 Themen Sets.
options.theme festlegen.setTheme aktualisierenDas Erscheinungsbild der HTML -Ausgabe von Markdown. Eingebaute Ameisenneigung, hell, dunkel, Wechat 4 Themen-Sätze. Unterstützt die Schnittstelle zur Erweiterung des Inhaltsthemas.
class="vditor-reset" hinzufügenoptions.preview.themeIPreviewOptions.themesetTheme oder setContentTheme aktualisieren Das Erscheinungsbild des Codeblocks. Eingebauter Github und andere 36 Themen Sätze.
options.preview.hljsIPreviewOptions.hljssetTheme oder setCodeTheme Sie können die Element id oder die eigene HTMLElement des Elements ausfüllen
HTMLElement des Elements müssen Sie options.cache.id oder options.cache.enable festlegen.cache.enable zu false
| veranschaulichen | Standardwert | |
|---|---|---|
| i18n | Mehrsprachige, siehe itips | - - |
| Unterbezahlung | Geschichtsintervall | - - |
| Nach | Rückrufmethode, nachdem der Editor asynchron gemacht wurde | - - |
| Höhe | Total Editor Height | 'Auto' |
| minheight | Mindesthöhe des Bearbeitungsbereichs | - - |
| Breite | Total Editor Breite, Support % | 'Auto' |
| Platzhalter | Eingabeaufforderung, wenn der Eingabebereich leer ist | '' ' |
| Lang | Sprachtypen: EN_US, FR_FR, PT_BR, JA_JP, KO_KR, RU_RU, SV_SE, ZH_CN, ZH_TW | 'zh_cn' |
| Eingabe (Wert: String) | Nach Eingabe ausgelöst | - - |
| Fokus (Wert: String) | Auslösen nach Fokus | - - |
| Blur (Wert: String) | Nach unscharf ausgelöst | - - |
| Schlüsseldown (Ereignis: KeyboardEvent) | Nach dem Pressen ausgelöst | - - |
| ESC (Wert: String) | Nach ESC Press ausgelöst | - - |
| Strlenter (Wert: String) | ⌘/Strg+Eingabetaste wird nach dem Drücken ausgelöst | - - |
| select (Wert: Zeichenfolge) | Ausgelöst nach Auswahl des Textes im Editor | - - |
| Tab | Die Registerkarte Taste betreibt Saiten, unterstützt t und alle Saiten | - - |
| Schreibmaschine | Ob aktiviert werden soll der Typewriter -Modus | FALSCH |
| CDN | Konfigurieren Sie eine selbstgebaute CDN-Adresse | https://unpkg.com/vditor@${VDITOR_VERSION} |
| Modus | Optionaler Modus: SV, IR, Wysiwyg | "ir" |
| Debugger | Ob Protokolle angezeigt werden | FALSCH |
| Wert | Editor -Initialisierungswert | '' ' |
| Thema | Thema: klassisch, dunkel | 'Klassiker' |
| Symbol | Symbolstil: Ameise, Material | 'Ameise' |
| CustomRenders: {Language: String, Render: (Element: htmlelement, vditor: ivditor) => void} [] | Benutzerdefinierter Renderer | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . Siehe SRC/TS/util/options.ts für den Standardwertemoji , 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 , Help, BR, BR, devtools , BR, BR, BR, BR, BR, BR, BR, BR, BR, BR, BR, BR, export help BR, info , brname nicht in der Aufzählung befindet, können Sie wie folgt eine benutzerdefinierte Schaltfläche hinzufügen: 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' ) } ,
} ] ,
} )| veranschaulichen | Standardwert | |
|---|---|---|
| Name | Einzigartige Marke | - - |
| Symbol | SVG -Symbol | - - |
| Tipp | Hinweis | - - |
| Speiste | Tipps: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - - |
| Hotkey | Verknüpfungsschlüssel im Format ⇧⌘ / ⌘ / ⌥⌘ | - - |
| Suffix | Fügen Sie das Suffix in den Herausgeber ein | - - |
| Präfix | Fügen Sie das Präfix in den Editor ein | - - |
| Click (Ereignis: Ereignis, Vditor: Ivditor) | Das Ereignis, das ausgelöst wird, wenn eine benutzerdefinierte Schaltfläche klickt | - - |
| Klassenname | Stilname | '' ' |
| Symbolleiste ?: Array <OPITS.TOOLBAR> | Untermenü | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| Verstecken | Ob Sie die Symbolleiste verbergen soll | FALSCH |
| Stift | Ob die Symbolleiste repariert werden soll | FALSCH |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ob Sie den Zähler aktivieren sollen | FALSCH |
| Nach (Länge: Nummer, Zähler: Optionen.Counter): void | WORT -Zählaufruf | - - |
| Max | Der Maximalwert erlaubt eingeben | - - |
| Typ | Statistiktyp: 'Markdown', 'Text' | "Markdown" |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ob Sie LocalStorage für Cache verwenden möchten | WAHR |
| Ausweis | Cache -Taste ist der erste Parameter ein Element und erfordert eine Cache -Aktivierung | - - |
| After (HTML: String): String | Cache -Rückruf | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ob der Kommentarmodus aktiviert werden soll | FALSCH |
| add (id: string, text: string, commentsData: icmmentsData []) | Fügen Sie einen Kommentarrückruf hinzu | - - |
| entfernen (ids: String []) | Kommentarrückruf löschen | - - |
| scrollen (oben: Nummer) | Scroll -Rückruf | - - |
| adoptop (commentsData: icmmentData []) | Beim Ändern des Dokuments wird die Höhe der Kommentare angepasst | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| Verzögerung | Preview -Entkunden -Intervalle voranbekommen | 1000 |
| Maxwidth | Maximale Breite der Vorschauderfläche | 800 |
| Modus | Anzeigemodus: Beide, Editor | 'beide' |
| URL | MD -Anfrage an Parsen | - - |
| analysieren (Element: htmlelement) | Vorschau -Rückruf | - - |
| Transformation (HTML: String): String | Rückruf vor dem Rendern | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| defaultAnd | Verwenden Sie die Sprache standardmäßig, wenn keine Sprache angegeben ist | '' ' |
| aktivieren | Ob das Code -Hervorhebung aktiviert werden soll | WAHR |
| Stil | Siehe Chroma für optionale Werte | github |
| Leinenumme | Ob die Zeilennummer aktiviert werden soll | FALSCH |
| Langs | Passen Sie die angegebene Sprache an | Code_Languages |
| Rendernu (Code: Htmlelement, Kopie: htmlelement) | Menüschaltfläche rendern | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| Autospace | Automatische Räume | FALSCH |
| gfmautolink | Automatische Verbindung | WAHR |
| FixDerMtypo | Automatischer Korrekturterm | FALSCH |
| toc | Verzeichnis einfügen | FALSCH |
| Fußnoten | Fußnote | WAHR |
| CodeBlockPreview | Ob Sie den Codeblock in Wysiwyg- und IR -Modi rendern | WAHR |
| MathblockPreview | Ob Sie mathematische Formeln in Wysiwyg- und IR -Modi machen sollen | WAHR |
| Absatzungspace | Zwei leere Anfänge | FALSCH |
| sanitisieren | Ob die XSS -Filterung aktiviert werden soll | WAHR |
| Liststyle | Fügen Sie der Liste das Attribut zum Datenstil hinzu | FALSCH |
| Linkbase | Verknüpfung des relativen Pfadpräfixes | '' ' |
| linkprefix | Link obligatorisches Präfix | '' ' |
| markieren | Aktivieren Sie Mark Mark | FALSCH |
| veranschaulichen | Standardwert | |
|---|---|---|
| Aktuell | Aktuelles Thema | "Licht" |
| Liste | Liste der optionalen Themen | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", Wechat: "Wechat"} |
| Weg | Themenstil -Adresse | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| veranschaulichen | Standardwert | |
|---|---|---|
| eingeleitet | Darf es zählen, nachdem die inline -mathematische Formel beginnt? | FALSCH |
| Makros | Makrodefinitionen wurden beim Rendern mit Mathjax übergeben | {} |
| Motor | Mathematische Formel Rendering Engine: Katex, Mathjax | "Katex" |
| mathjaxoptionen | Parameter, wenn die mathematische Formel -Rendering -Engine Mathjax ist | - - |
Die Standardwerte sind ["Desktop", "Tablet", "Mobile", "MP-Wechat", "Zhihu"]. Sie können aus den Standardwerten für die Konfiguration auswählen oder die folgenden Felder für die benutzerdefinierte Entwicklung verwenden.
| veranschaulichen | Standardwert | |
|---|---|---|
| Schlüssel | Die Taste ist einzigartig identifiziert und kann nicht leer sein | - - |
| Text | Schaltfläche Text | - - |
| Tooltip | Hinweis | - - |
| Klassenname | Button -Klasse -Name | - - |
| klicken (Schlüssel: String) | Schaltfläche Klicken Sie auf Rückrufereignis | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ob Multimedia -Rendering ermöglicht werden soll | WAHR |
| veranschaulichen | Standardwert | |
|---|---|---|
| iSpreview | Ob das Bild Vorschau | WAHR |
| Vorschau (BOM: Element) => void | Bildvorschau -Verarbeitung | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| Isopen | Ob die Linkadresse geöffnet werden soll | WAHR |
| Click (BOM: Element) => void | Klicken Sie auf Link -Ereignis | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| analysieren | Ob Sie eine MD -Analyse durchführen sollen | WAHR |
| Verzögerung | Promptes Intervall des Millisekunden -Darfounnen | 200 |
| Emoji | Standard -Emoji, kann aus lute/emoji_map ausgewählt oder angepasst werden | {'+1': '?', '-1': '?', 'Herz': '❤️', 'Cold_sweat': '?' } |
| Emojitail | Gemeinsame Ausdruckstipps | - - |
| Emojipath | Ausdrucksbildadresse | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| Erweiterung: IHinTextend [] | Erweiterung der automatischen Fertigstellung von Schlüsselwörtern wie @/Tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format zur Konvertierung verwendet werden. // 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 die Bildadresse außerhalb des Standorts in der Zwischenablage zum Speichern an den Server übergeben, und ihre Datenstruktur lautet wie folgt: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format , error werden nicht gleichzeitig ausgelöst. Die spezifische Anrufsituation ist wie folgt: 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 ) ;
}
}| veranschaulichen | Standardwert | |
|---|---|---|
| URL | Laden Sie die URL hoch, wenn sie leer ist, wird das Upload-Ereignis nicht ausgelöst. | '' ' |
| Max | Datei Maximal Byte hochladen | 10 * 1024 * 1024 |
| linktoimgurl | Wenn die Zwischenablage die Bildadresse enthält, verwenden Sie diese URL, um erneut hochzuladen | '' ' |
| linkToimgCallback (ResponseText: String) | Im Bildadressrückruf hochladen | - - |
| linkToImgFormat (ResponseText: String): String | Formatieren Sie den Rückgabewert, der von der Bildadresse hochgeladen wurde | - - |
| Erfolg (Editor: HTMLPreelement, MSG: String) | Laden Sie einen erfolgreichen Rückruf hoch | - - |
| Fehler (MSG: String) | Upload fehlgeschlagener Rückruf | - - |
| Token | CORS-Upload-Überprüfung, Header ist X-Upload-Token | - - |
| Wahnsinnszüchter | Cross-Site-Zugangskontrolle | FALSCH |
| Header | Anfrage Header -Einstellungen | - - |
| Dateiname (Name: String): String | Sicherheitsverarbeitung von Dateinamen | name => name.replace (/ w/g, '') |
| akzeptieren | Datei -Upload -Typ, wie die Eingabeakzeption | - - |
| Validate (Dateien: Datei []) => String | boolean | Überprüfen | - - |
| Handler (Dateien: Datei []) => String | NULL | Versprechen | Versprechen | Benutzerdefinierte Upload, Rückgabefehlermeldung, wenn ein Fehler auftritt | - - |
| Format (Dateien: Datei [], Responsext: String): String | Konvertieren Sie die vom Server zurückgegebenen Daten, um die integrierte Datenstruktur zu erfüllen | - - |
| Datei (Dateien: Datei []): Datei [] | Versprechen <datei []> | Verarbeiten Sie die hochgeladene Datei vor der Rückkehr | - - |
| Setheaders (): {[Schlüssel: String]: String} | Verwenden Sie den Rückgabewert, um den Header vor dem Hochladen einzustellen | - - |
| Extradata: {[Schlüssel: String]: String | Blob} | Fügen Sie FormData zusätzliche Parameter hinzu | - - |
| mehrere | Gibt es mehrere hochgeladene Dateien | WAHR |
| Feldname | Feldname hochladen | 'Datei[]' |
| renderlinkdest? (vditor: ivditor, Knoten: Ilutenode, Eingabe: boolean): [String, Nummer] | Verarbeiten Sie die Bildadresse in der Zwischenablage | '' ' |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ist es für das Ziehen von Größe unterstützt? | FALSCH |
| Position | Stange Position: 'oben', 'unten' | 'unten' |
| Nach (Höhe: Nummer) | Rückruf endete mit dem Ziehen | - - |
| veranschaulichen | Standardwert | |
|---|---|---|
| Vorschau | Klassenname zum Vorschaubelement | '' ' |
| veranschaulichen | Standardwert | |
|---|---|---|
| Index | Vollbildstufe | 90 |
| veranschaulichen | Standardwert | |
|---|---|---|
| aktivieren | Ob die Initialisierung den Umriss anzeigt | FALSCH |
| Position | Umrissort: 'links', 'rechts' | 'links' |
| veranschaulichen | |
|---|---|
| Exportjson (Markdown: String) | Holen Sie sich den entsprechenden JSON gemäß Markdown |
| GetValue () | Erhalten Sie Markdown -Inhalte |
| Gethtml () | Holen Sie sich HTML -Inhalte |
| InsertValue (Wert: String, Render = True) | Fügen Sie den Inhalt in den Fokus ein und verwenden Sie standardmäßig das Rendering von Markdowns |
| Fokus() | Konzentrieren Sie sich auf den Herausgeber |
| verwischen() | Machen Sie den Redakteur unscharf |
| deaktiviert() | Deaktivieren Sie den Herausgeber |
| aktivieren() | Nicht issibler der Herausgeber |
| GetSelection (): String | Gibt die ausgewählte Zeichenfolge zurück |
| setValue (Markdown: String, Clearstack = False) | Legen Sie den Editor -Inhalt fest und wählen Sie Clear History Stack aus |
| Clearstack () | Löschen Sie den Rückgängigmachen und Wiederholen Sie den Rekordstapel |
| Renderpreview (Wert ?: String) | Setzen Sie Inhalte der Vorschaufelfläche |
| getCursorposition (): {top: number, links: number} | Fokussposition erhalten |
| DeleteValue () | Löschen Sie ausgewählte Inhalte |
| UpdateValue (Wert: String) | Aktualisieren Sie ausgewählte Inhalte |
| isUploading () | Ist der Upload noch in Bearbeitung |
| ClearCache () | Cache löschen |
| deaktiviertCache () | Cache deaktivieren |
| EnableCache () | Cache aktivieren |
| html2md (Wert: String) | HTML zu MD |
| Tipp (Text: Zeichenfolge, Zeit: Nummer) | Nachrichtenaufforderung. Die Zeit ist 0 und wird angezeigt |
| setPreviewMode (Modus: "beide" | "Editor") | Setzen Sie den Vorschau -Modus |
| SETTHEME (Thema: "Dark" | "Klassiker", Contenttheme ?: String, Codetheme ?: String, ContentTheMepath ?: String) | Setzen Sie Themen, Inhaltsthema und Code -Blockstil |
| getCurrentMode (): String | Holen Sie sich den aktuellen Bearbeitungsmodus des Editors |
| zerstören() | Zerstöre den Herausgeber |
| GetCompmentIds (): {ID: String, oben: Nummer} [] | Holen Sie sich alle Kommentare |
| hlComMmentIds (IDS: String []) | Kommentare hervorheben |
| ungleichmäßig ids (IDs: String []) | Kommentare und Highlights abbrechen |
| removecommentIds (removeIds: String []) | Kommentare löschen |
| updatetoolBarconfig (config: {hide ?: boolean, pin ?: boolean}) | Aktualisieren Sie die Symbolleistenkonfiguration |
method.min.js einführen und direkt wie folgt aufrufen Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview -Methode direkt aufrufen, und die Parameter sind wie folgt: 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 und index.min.js können nicht gleichzeitig eingeführt werden| veranschaulichen | |
|---|---|
| PreviewImage (OldImgelement: htmlimageElement, lang: keyof ii18n = "zh_cn", thema = "klassisch") | Klicken Sie auf das Bild, um die Vorschau zu erhalten |
| mermaidrender (Element: htmlelement, cdn = options.cdn, thema = options.theme) | Flussdiagramm/Zeitdiagramm/Gant -Diagramm |
| Smilesrender (Element: htmlelement, cdn = options.cdn, thema = options.theme) | Chemische Substanzstruktur |
| markmaprender (Element: htmlelement, cdn = options.cdn) | Markdown Mind Map |
| FlowChartrender (Element: htmlelement, cdn = options.cdn) | Flussdiagrammrendern |
| Codierender (Element: Htmlelement, Option ?: IHLJS) | Fügen Sie dem Codeblock im Element eine Kopierschaltfläche hinzu |
| Chartrender (Element: (htmlelement | document) = document, cdn = options.cdn, thema = options.theme) | Diagrammrending |
| Mindmaprender (Element: (htmlelement | document) = document, cdn = options.cdn, thema = options.theme) | Gehirnbild -Rendering |
| Plantumlrender (Element: (htmlelement | document) = document, cdn = options.cdn) | Plantuml -Rendering |
| Abcrender (Element: (htmlelement | document) = document, cdn = options.cdn) | Stichwechsel |
| md2html (MdText: String, Optionen ?: IpReviewOptions): Versprechen <string> | Der Markdown -Text wird in HTML konvertiert. Diese Methode erfordert eine asynchrone Programmierung |
| Vorschau (Vorschau: HTMLDivelement, Markdown: String, Optionen ?: IPReViewOptions) | Seitungs -Markdown -Artikel -Rendering |
| Highlightrender (HljSoption ?: Ihljs, Element ?: Htmlelement | Dokument, cdn = options.cdn) | Markieren Sie das Rendering von Codeblöcken im Element |
| Mediarender (Element: htmlelement) | Rendern Sie als Video, Audio und eingebettete Iframes für bestimmte Links |
| mathhrender (Element: htmlelement, Optionen ?: {cdn ?: String, Mathematik ?: Imath}) | Mathematische Formeln machen |
| Sprachrender (Element: Htmlelement, Lang?: (Keyof II18NLang)) | Lesen Sie ausgewählten Text |
| GraphVizRender (Element: htmlelement, cdn ?: String) | Graphviz rendern |
| OutrinerSendern (Inhalt: HTMLElement, TargetElement: Element) | Den Umriss machen |
| LazyLoadImagerErender (Element: (Htmlelement | Dokument) = Dokument) | Bilder mit faulem Laden aktivieren |
| setCodethe (codetheme: string, cdn = options.cdn) | Legen Sie das Code -Thema fest, siehe options.preview.hljs.style für codetheme |
| setContentTheme (ContentTheme: String, Pfad: String) | Setzen Sie das Inhaltsthema, siehe options.preview.theme.list für contentTheme. |
npm install aus dem Stammverzeichnis ausnpm run start Start Starten Sie den lokalen Server und öffnen Sie http: // localhost: 9000npm run buildAufgrund der Verwendung von On-Demand-Lademechanismus ist die Standard-CDN https://unpkg.com/vditor@ Versionsnummer
Wenn der Code geändert wird oder Sie eine selbstgebaute CDN verwenden müssen, können Sie die folgenden Schritte ausführen:
cdn , emojiPath und themes in options und IPreviewOptionshighlightRender setContentTheme mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeThemeBitte lesen Sie das Upgrade -Teil in ChangeLog sorgfältig durch, wenn Sie die Version aktualisieren
Vditor verwendet das MIT Open Source -Protokoll.
In den frühen Tagen der Entwicklung von SYM haben wir den Wysiwyg Rich Texteditor direkt verwendet. Zu dieser Zeit waren HTML-basierte Redakteure sehr beliebt, und sie waren sehr bequem in Projekten, und sie stimmten zu diesem Zeitpunkt auch den Nutzungsgewohnheiten des Benutzers.
Später veränderte der Aufstieg von Markdown allmählich das Layout aller. Darüber hinaus sind einige unserer anderen Projekte für Programmierer gedacht, sodass die Migration zu MD auch ein allgemeiner Trend ist. Wir haben uns für Codemirror entschieden, einen hervorragenden Editor, der Entwicklern reichhaltige Programmierschnittstellen bietet und auch mit verschiedenen Browsern kompatibel ist.
Später, wie sich unser Projekt für die Geschäftsbedürfnisse erfüllte, fühlt sich die Verwendung von Codemirror manchmal "umständlich" an. Um beispielsweise eine @Automatical Complete Benutzername-Liste zu erreichen, Emoji einfügen, Dateien usw. hochladen usw. erfordert eine relativ detaillierte Sekundärentwicklung, und diese geschäftlichen Anforderungen sind genau das, was viele Projektszenarien haben und notwendig sind.
Schließlich haben wir uns entschlossen, den Herausgeber selbst in sym zu implementieren. Mit mehreren Versionen Iterationen wird der Redakteur von Sym immer reifer. In der Gemeinschaftskette, die wir betreiben, fragten uns einige Leute, ob wir den Herausgeber separat zurückziehen und ihn für alle zur Verwendung zur Verfügung stellen können. Gleichzeitig war unser Front-End-Hauptprogramm V-Klasse V-Klasse etwas überfordert, wenn es darum ging, die in verschiedenen Projekten verstreuten Redakteure zu pflegen, und hatte auch einen guten Eindruck von Typenkript.
Also wurde Vditor geboren.
