vditor
v3.10.7
Editor Markdown yang mudah digunakan, dibangun untuk beradaptasi dengan skenario aplikasi yang berbeda
Bahasa Inggris | Demo
Vditor adalah editor penurunan harga sisi browser yang mendukung WYSIWYG, rendering instan (mirip dengan Typora) dan mode pratinjau layar split. Ini diimplementasikan menggunakan naskah dan mendukung javascript asli serta kerangka kerja seperti Vue, React, Angular dan Svelte.
Selamat datang di Area Diskusi Resmi Vditor untuk mempelajari lebih lanjut. Pada saat yang sama, kami juga dipersilakan untuk mengikuti Komunitas Open Source B3Log WeChat Official Account B3log开源:
Dengan popularitas metode pengesahan huruf markdown, semakin banyak aplikasi telah mulai mengintegrasikan editor Markdown. Status saat ini dari editor markdown terintegrasi arus utama adalah sebagai berikut:
Tiga poin ini sesuai persis dengan tiga skenario aplikasi:
Oleh karena itu, editor penurunan harga yang dapat beradaptasi dengan skenario aplikasi sangat penting, dan perlu dipertimbangkan:
Vditor telah melakukan upaya di bidang -bidang ini, berharap dapat memberikan kontribusi pada bidang pengeditan penurunan harga universal modern.
Mode WYSIWYG lebih ramah kepada pengguna yang tidak terbiasa dengan Markdown, dan juga dapat digunakan dengan mulus jika Anda terbiasa dengan Markdown.
Mode rendering instan tidak boleh tidak terbiasa dengan pengguna yang akrab dengan Typora. Secara teori, ini adalah cara paling elegan untuk mengedit penurunan harga.
Mode pratinjau layar split tradisional cocok untuk mengedit penurunan harga di bawah layar besar.
Sebagian besar fitur di atas dapat diaktifkan dengan mengganti konfigurasi. Pengembang dapat memilih pencocokan berdasarkan skenario aplikasi mereka.
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 >Penampilan editor. Klasik bawaan, 2 set tema gelap.
options.themesetThemePenampilan output HTML dari markdown. Set tema semut, terang, gelap, wechat 4. Mendukung antarmuka ekstensi tema konten.
class="vditor-reset" ke elemen tampilanoptions.preview.themeIPreviewOptions.themesetTheme atau setContentTheme Penampilan blok kode. GitHub bawaan dan 36 set tema lainnya.
options.preview.hljsIPreviewOptions.hljssetTheme atau setCodeTheme Anda dapat mengisi id elemen atau HTMLElement elemen sendiri
HTMLElement dari elemen itu sendiri, Anda perlu mengatur options.cache.id atau set options.cache.enable ke false
| menjelaskan | nilai default | |
|---|---|---|
| i18n | Multibahasa, lihat ITIPS | - |
| undodelay | Interval sejarah | - |
| Setelah | Metode panggilan balik setelah editor diterjemahkan secara asinkron | - |
| tinggi | Tinggi Editor Total | 'mobil' |
| Minheight | Tinggi minimum area edit | - |
| lebar | Total lebar editor, dukungan % | 'mobil' |
| placeholder | Prompt saat area input kosong | '' |
| Lang | Jenis Bahasa: En_us, Fr_FR, PT_BR, JA_JP, KO_KR, RU_RU, SV_SE, ZH_CN, ZH_TW | 'zh_cn' |
| input (nilai: string) | Dipicu setelah input | - |
| Fokus (Nilai: String) | Pemicu setelah fokus | - |
| blur (nilai: string) | Dipicu setelah fokus | - |
| Keydown (Event: KeyboardEvent) | Dipicu setelah menekan | - |
| ESC (Nilai: String) | Dipicu setelah ESC Press | - |
| ctrlenter (nilai: string) | ⌘/Ctrl+Enter dipicu setelah menekan | - |
| Pilih (Nilai: String) | Dipicu setelah memilih teks di editor | - |
| tab | Tab Key mengoperasikan string, mendukung t dan string apa pun | - |
| Typewritermode | Apakah akan mengaktifkan mode mesin tik | PALSU |
| CDN | Konfigurasikan alamat CDN yang dibangun sendiri | https://unpkg.com/vditor@${VDITOR_VERSION} |
| mode | Mode opsional: SV, IR, wysiwyg | 'ir' |
| debugger | Apakah akan menampilkan log | PALSU |
| nilai | Nilai inisialisasi editor | '' |
| tema | Topik: Klasik, gelap | 'klasik' |
| ikon | Gaya ikon: semut, material | 'semut' |
| CustomRenders: {bahasa: string, render: (elemen: htmlelement, vditor: ivditor) => void} [] | Penyaji Kustom | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . Lihat SRC/TS/UTIL/OPTION.TS untuk nilai defaultemoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check , outdent , indent , code info code-theme inline-code insert-after , insert-before br undo export redo , upload help link , table , record , content-theme edit-mode , both , preview devtools fullscreen , outlinename tidak ada dalam enumerasi, Anda dapat menambahkan tombol khusus, dalam format sebagai berikut: 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' ) } ,
} ] ,
} )| menjelaskan | nilai default | |
|---|---|---|
| nama | Tanda unik | - |
| ikon | Ikon SVG | - |
| tip | petunjuk | - |
| Tipposisi | Tips: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| Hotkey | Tombol pintas dalam format ⇧⌘ / ⌘ / ⌥⌘ | - |
| akhiran | Masukkan sufiks di editor | - |
| awalan | Masukkan awalan di editor | - |
| Klik (Acara: Acara, Vditor: IVDITOR) | Peristiwa yang dipicu saat tombol khusus diklik | - |
| ClassName | Nama gaya | '' |
| toolbar?: array <options.toolbar> | Submenu | - |
| menjelaskan | nilai default | |
|---|---|---|
| Bersembunyi | Apakah akan menyembunyikan bilah alat | PALSU |
| pin | Apakah akan memperbaiki bilah alat | PALSU |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah akan mengaktifkan penghitung | PALSU |
| After (length: number, counter: options.counter): batal | Word Count Callback | - |
| Max | Nilai maksimum yang diizinkan untuk masuk | - |
| jenis | Jenis Statistik: 'Markdown', 'Teks' | 'penurunan harga' |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah akan menggunakan LocalStorage untuk cache | BENAR |
| pengenal | Kunci cache, parameter pertama adalah elemen dan membutuhkan aktivasi cache | - |
| After (html: string): string | Call Callback | - |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah akan mengaktifkan mode komentar | PALSU |
| Tambah (ID: String, Teks: String, CommentsData: ICoMmentsData []) | Tambahkan Panggilan Balik Komentar | - |
| hapus (id: string []) | Hapus panggilan balik komentar | - |
| gulir (atas: nomor) | Gulir panggilan balik | - |
| AdjustTop (CommentsData: icommentsData []) | Saat memodifikasi dokumen, ketinggian komentar diadaptasi | - |
| menjelaskan | nilai default | |
|---|---|---|
| menunda | Pratinjau debounce interval milidetik | 1000 |
| Maxwidth | Lebar maksimum area pratinjau | 800 |
| mode | Mode Tampilan: Keduanya, Editor | 'keduanya' |
| url | permintaan parsing MD | - |
| parse (elemen: htmlelement) | Pratinjau panggilan balik | - |
| transform (html: string): string | Panggilan balik sebelum rendering | - |
| menjelaskan | nilai default | |
|---|---|---|
| defaultlang | Gunakan bahasa secara default jika tidak ada bahasa yang ditentukan | '' |
| memungkinkan | Apakah akan mengaktifkan penyorotan kode | BENAR |
| gaya | Lihat Chroma untuk Nilai Opsional | github |
| BUMBER LINEN | Apakah akan mengaktifkan nomor baris | PALSU |
| Langs | Sesuaikan bahasa yang ditentukan | Code_Languages |
| rendermenu (kode: htmlelement, salin: htmlelement) | Tombol menu render | - |
| menjelaskan | nilai default | |
|---|---|---|
| Autospace | Ruang otomatis | PALSU |
| gfmAutolink | Tautan otomatis | BENAR |
| fixtermtypo | Istilah Koreksi Otomatis | PALSU |
| toc | Masukkan direktori | PALSU |
| Catatan kaki | Catatan Kaki | BENAR |
| CodeBlockPreview | Apakah akan membuat blok kode dalam mode wysiwyg dan IR | BENAR |
| MathBlockPreview | Apakah akan membuat formula matematika dalam mode wysiwyg dan IR | BENAR |
| Paragraphbeginningspace | Dua awal kosong | PALSU |
| membersihkan | Apakah akan mengaktifkan penyaringan XSS | BENAR |
| ListStyle | Tambahkan atribut gaya data ke daftar | PALSU |
| linkbase | Tautan awalan jalur relatif | '' |
| LinkPrefix | Tautan awalan wajib | '' |
| tanda | Aktifkan Mark Mark | PALSU |
| menjelaskan | nilai default | |
|---|---|---|
| Saat ini | Topik saat ini | "lampu" |
| daftar | Daftar topik opsional | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| jalur | Alamat gaya tema | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| menjelaskan | nilai default | |
|---|---|---|
| InlineGit | Apakah diizinkan untuk menghitung setelah formula matematika inline dimulai $? | PALSU |
| makro | Definisi makro disahkan saat rendering dengan mathjax | {} |
| mesin | Mesin Rendering Formula Matematika: Katex, Mathjax | 'Katex' |
| Mathjaxoptions | Parameter Saat Mesin Rendering Formula Matematika adalah Mathjax | - |
Nilai defaultnya adalah ["desktop", "tablet", "seluler", "mp-wechat", "zhihu"]. Anda dapat memilih dari nilai default untuk konfigurasi, atau menggunakan bidang berikut untuk pengembangan khusus.
| menjelaskan | nilai default | |
|---|---|---|
| kunci | Tombol diidentifikasi secara unik dan tidak bisa kosong | - |
| teks | Teks Tombol | - |
| tooltip | petunjuk | - |
| ClassName | Nama kelas tombol | - |
| Klik (Kunci: String) | Tombol Klik Acara Callback | - |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah akan mengaktifkan rendering multimedia | BENAR |
| menjelaskan | nilai default | |
|---|---|---|
| ISPreview | Apakah akan mempratinjau gambar | BENAR |
| pratinjau (bom: elemen) => void | Pemrosesan pratinjau gambar | - |
| menjelaskan | nilai default | |
|---|---|---|
| isopen | Apakah akan membuka alamat tautan | BENAR |
| klik (bom: elemen) => void | Klik Acara Tautan | - |
| menjelaskan | nilai default | |
|---|---|---|
| parse | Apakah akan melakukan analisis md | BENAR |
| menunda | Interval Millisecond Debounce | 200 |
| emoji | Emoji default, dapat dipilih dari lute/emoji_map, atau dapat disesuaikan | {'+1': '?', '-1': '?', 'Hati': '❤️', 'cold_sweat': '?' } |
| emojitail | Tip Ekspresi Umum | - |
| emojipath | Alamat gambar ekspresi | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| Perpanjangan: ihintextend [] | Perpanjangan Penyelesaian Kata Kunci Otomatis seperti @/Tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format dapat digunakan untuk konversi. // 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 dapat melewati alamat gambar di luar situs di clipboard ke server untuk disimpan, dan struktur datanya adalah sebagai berikut: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format , error tidak akan dipicu pada saat yang sama. Situasi panggilan spesifik adalah sebagai berikut: 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 ) ;
}
}| menjelaskan | nilai default | |
|---|---|---|
| url | Unggah URL, jika kosong, acara terkait unggahan tidak akan dipicu. | '' |
| Max | Unggah File Byte Maksimum | 10 * 1024 * 1024 |
| LinkToImgurl | Saat clipboard berisi alamat gambar, gunakan URL ini untuk mengunggah lagi | '' |
| LinkToImgCallback (ResponsEtext: String) | Unggah Callback Alamat Gambar | - |
| LinkToImGFormat (ResponsEtext: String): String | Format Nilai pengembalian yang diunggah oleh alamat gambar | - |
| Sukses (editor: htmlpelement, msg: string) | Unggah berhasil panggilan balik | - |
| kesalahan (msg: string) | Unggah Callback Gagal | - |
| token | Verifikasi Unggah CORS, header adalah X-upload-Token | - |
| dengan kredensial | Kontrol akses lintas situs | PALSU |
| Header | Permintaan Pengaturan Header | - |
| nama file (nama: string): string | Pemrosesan Keamanan Nama File | name => name.replace (/ w/g, '') |
| menerima | Jenis unggahan file, sama seperti input menerima | - |
| Validasi (File: File []) => String | Boolean | Verifikasi, kembalikan true jika berhasil jika tidak mengembalikan pesan kesalahan | - |
| Handler (File: File []) => String | null | Janji | Janji | Unggah khusus, kembalikan pesan kesalahan saat kesalahan terjadi | - |
| format (file: file [], responseText: string): string | Konversi data yang dikembalikan oleh server untuk memenuhi struktur data bawaan | - |
| File (file: file []): file [] | Janji <file []> | Proses file yang diunggah sebelum kembali | - |
| setHeaders (): {[key: string]: string} | Gunakan nilai pengembalian untuk mengatur header sebelum mengunggah | - |
| Extradata: {[key: String]: String | Gumpalan} | Tambahkan parameter tambahan ke formdata | - |
| banyak | Apakah ada beberapa file yang diunggah | BENAR |
| FieldName | Unggah Nama Bidang | 'mengajukan[]' |
| renderlinkdest? (Vditor: ivditor, node: ilutenode, masuk: boolean): [string, angka] | Proses alamat gambar di clipboard | '' |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah didukung untuk menyeret ukuran? | PALSU |
| posisi | Posisi Seret Bar: 'Top', 'Bottom' | 'dasar' |
| Setelah (Tinggi: Angka) | Panggilan balik berakhir dengan menyeret | - |
| menjelaskan | nilai default | |
|---|---|---|
| pratinjau | ClassName di Elemen Pratinjau | '' |
| menjelaskan | nilai default | |
|---|---|---|
| indeks | Level Layar Penuh | 90 |
| menjelaskan | nilai default | |
|---|---|---|
| memungkinkan | Apakah inisialisasi menampilkan garis besar | PALSU |
| posisi | Garis Besar Lokasi: 'Kiri', 'Kanan' | 'kiri' |
| menjelaskan | |
|---|---|
| ExportJson (Markdown: String) | Dapatkan JSON yang sesuai menurut Markdown |
| getValue () | Dapatkan Konten Markdown |
| getHtml () | Dapatkan konten HTML |
| InsertValue (nilai: string, render = true) | Masukkan konten dalam fokus dan gunakan rendering markdown secara default |
| fokus() | Fokus pada editor |
| mengaburkan() | Jadikan editor dari fokus |
| dengan disabilitas() | Nonaktifkan editor |
| memungkinkan() | Tidak dapat diduga editor |
| getSelection (): String | Mengembalikan string yang dipilih |
| setValue (markdown: string, clearstack = false) | Atur konten editor dan pilih Clear History Stack |
| clearstack () | Bersihkan tumpukan rekor undo dan redo |
| renderpreview (value?: string) | Atur konten area pratinjau |
| getCursorPosition (): {top: number, left: number} | Dapatkan posisi fokus |
| deletevalue () | Hapus konten yang dipilih |
| UpdateValue (Nilai: String) | Perbarui konten yang dipilih |
| isuploading () | Apakah unggahan masih sedang berlangsung |
| clearcache () | Hapus cache |
| DisabledCache () | Nonaktifkan cache |
| enableCache () | Aktifkan cache |
| html2md (nilai: string) | Html ke md |
| Tip (Teks: String, Waktu: Nomor) | Prompt pesan. Waktu adalah 0 dan akan ditampilkan |
| SetPreviewMode (Mode: "Keduanya" | "Editor") | Atur Mode Pratinjau |
| settheme (tema: "gelap" | "klasik", contentTheme?: string, codetheme?: string, contentThemePath?: string) | Setel tema, tema konten, dan gaya blok kode |
| getCurrentMode (): String | Dapatkan mode pengeditan editor saat ini |
| menghancurkan() | Hancurkan editor |
| getCommentIds (): {id: string, top: number} [] | Dapatkan semua komentar |
| hlcommentIds (id: string []) | Sorot komentar |
| unhlcommentIds (id: string []) | Batalkan Komentar dan Sorotan |
| RemovecommentIds (RemoveIDS: String []) | Hapus komentar |
| UpdateToolBarConfig (config: {hide?: boolean, pin?: boolean}) | Perbarui Konfigurasi Toolbar |
method.min.js dan memanggilnya secara langsung sebagai berikut Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview , dan parameternya adalah sebagai berikut: 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 dan index.min.js tidak dapat diperkenalkan secara bersamaan| menjelaskan | |
|---|---|
| PreviewImage (OldImgeLement: HtMlimageElement, Lang: Keyof ii18n = "ZH_CN", tema = "klasik") | Klik gambar untuk melihat pratinjau |
| Mermaidrender (elemen: htmlelement, cdn = options.cdn, tema = options.theme) | Bagan Aliran/Bagan Waktu/Bagan Gant |
| SmilesRender (elemen: htmlelement, cdn = options.cdn, tema = options.theme) | Struktur zat kimia |
| MarkMaprender (Elemen: HTMLElement, CDN = Options.cdn) | Peta Pikiran Markdown |
| flowchartrender (elemen: htmlelement, cdn = options.cdn) | Rendering diagram alur |
| coderender (elemen: htmlelement, opsi?: ihljs) | Tambahkan tombol Salin ke Blok Kode di Elemen |
| chartrender (elemen: (htmlelement | dokumen) = dokumen, cdn = options.cdn, tema = options.theme) | Rendering bagan |
| mindmaprender (elemen: (htmlelement | dokumen) = dokumen, cdn = options.cdn, tema = options.theme) | Rendering gambar otak |
| Plantumlrender (elemen: (htmlelement | dokumen) = dokumen, cdn = options.cdn) | rendering plantuml |
| abcrender (elemen: (htmlelement | dokumen) = dokumen, cdn = options.cdn) | Menjahit rendering |
| md2html (mdtext: string, options?: ipreviewoptions): janji <string> | Teks Markdown dikonversi ke HTML, metode ini membutuhkan pemrograman asinkron |
| Pratinjau (PreviewElement: htmldivelement, Markdown: String, Options?: iPreviewOptions) | Render Artikel Markdown Halaman |
| highlightrender (hljsoption?: ihljs, elemen?: htmlelement | dokumen, cdn = options.cdn) | Sorot rendering blok kode dalam elemen |
| Mediarender (elemen: htmlelement) | Render sebagai video, audio, dan iframe tertanam untuk tautan tertentu |
| Mathrender (elemen: htmleLement, options?: {cdn?: string, math?: imath}) | Memberikan formula matematika |
| Speechrender (Elemen: Htmlelement, Lang?: (Keyof ii18nlang)) | Baca teks yang dipilih |
| GraphVizrender (Elemen: HTMLElement, CDN?: String) | Render GraphViz |
| Outlinerender (ContentElement: HTMLElement, TargetElement: Element) | Membuat garis besar |
| LazyLoadImagerender (elemen: (htmlelement | dokumen) = dokumen) | Memberikan gambar dengan pemuatan malas diaktifkan |
| setCodetheme (codetheme: string, cdn = options.cdn) | Atur tema kode, lihat option.preview.hljs.style untuk codetheme |
| setContentTheme (ContentTheme: String, Path: String) | Atur Tema Konten, lihat options.preview.theme.list untuk ContentTheme. |
npm install dari direktori rootnpm run start Mulai Mulai Untuk Mulai Server Lokal dan Buka http: // LocalHost: 9000npm run build Kode Paket ke Distory DistKarena penggunaan mekanisme pemuatan on-demand, CDN default adalah https://unpkg.com/vditor@ nomor versi
Jika kode dimodifikasi atau Anda perlu menggunakan CDN yang dibangun sendiri, Anda dapat mengikuti langkah-langkah berikut:
cdn , emojiPath , dan themes dalam options dan IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , Metode setContentTheme Perlu untuk menambahkan parameter CDN CDN perluHarap baca bagian upgrade di Changelog dengan hati -hati saat meningkatkan versi
Vditor menggunakan protokol open source MIT.
Pada hari -hari awal pengembangan SYM, kami secara langsung menggunakan editor teks kaya Wysiwyg. Pada waktu itu, editor berbasis HTML sangat populer, dan mereka sangat nyaman untuk mengutip dalam proyek, dan mereka juga sejalan dengan kebiasaan penggunaan pengguna pada waktu itu.
Kemudian, kebangkitan Markdown secara bertahap mengubah tata letak semua orang. Selain itu, beberapa proyek kami yang lain adalah untuk pemrogram, jadi migrasi ke MD juga merupakan tren umum. Kami memilih Codemirror, editor yang sangat baik yang menyediakan pengembang dengan antarmuka pemrograman yang kaya dan juga lebih kompatibel dengan berbagai browser.
Kemudian, ketika bisnis proyek kami perlu diselesaikan, menggunakan Codemirror terkadang terasa "rumit". Misalnya, untuk mencapai daftar nama pengguna yang lengkap secara @Automatik, masukkan emoji, unggah file, dll., Ini membutuhkan pengembangan sekunder yang relatif mendalam, dan kebutuhan bisnis ini persis seperti yang dimiliki dan diperlukan banyak skenario proyek.
Akhirnya, kami memutuskan untuk mulai mengimplementasikan editor sendiri di Sym. Dengan beberapa versi iterasi, editor Sym menjadi semakin dewasa. Pada rantai komunitas kami beroperasi, beberapa orang bertanya kepada kami apakah kami dapat menarik editor secara terpisah dan memberikannya kepada semua orang untuk digunakan. Pada saat yang sama, Kelas V Front-End Program V kami sedikit kewalahan dalam mempertahankan editor yang tersebar di berbagai proyek, dan juga memiliki kesan yang baik tentang naskah, jadi kami memutuskan untuk menggunakan TS untuk mengimplementasikan editor MD sisi browser baru.
Jadi, Vditor lahir.
