vditor
v3.10.7
ตัวแก้ไข Markdown ที่ใช้งานง่ายสร้างขึ้นเพื่อปรับให้เข้ากับสถานการณ์แอปพลิเคชันที่แตกต่างกัน
ภาษาอังกฤษ | การสาธิต
VDitor เป็นตัวแก้ไข Markdown ด้านเบราว์เซอร์ที่รองรับ WYSIWYG การเรนเดอร์ทันที (คล้ายกับ Typora) และโหมดตัวอย่างแบบแยกหน้าจอ มันถูกนำมาใช้โดยใช้ typeScript และรองรับ JavaScript ดั้งเดิมรวมถึงเฟรมเวิร์กเช่น Vue, React, Angular และ Svelte
ยินดีต้อนรับสู่พื้นที่การสนทนาอย่างเป็นทางการของ VDitor เพื่อเรียนรู้เพิ่มเติม ในขณะเดียวกันเราก็ยินดีที่จะติดตาม B3Log Open Source Community WeChat Official B3log开源:
ด้วยความนิยมของวิธีการเรียงพิมพ์ markdown แอพพลิเคชั่นที่มากขึ้นเรื่อย ๆ ได้เริ่มรวมตัวแก้ไข Markdown สถานะปัจจุบันของตัวแก้ไข Markdown Integrated Mainstream มีดังนี้:
สามจุดเหล่านี้สอดคล้องกับสามสถานการณ์แอปพลิเคชัน:
ดังนั้นตัวแก้ไข markdown ที่สามารถ ปรับให้เข้ากับสถานการณ์แอปพลิเคชัน จึงเป็นสิ่งสำคัญและจำเป็นต้องพิจารณา:
VDitor ได้ใช้ความพยายามในพื้นที่เหล่านี้โดยหวังว่าจะมีส่วนร่วมในการแก้ไข Markdown Universal Markdown ที่ทันสมัย
โหมด WYSIWYG เป็นมิตรกับผู้ใช้ที่ไม่คุ้นเคยกับ Markdown และสามารถใช้งานได้อย่างราบรื่นหากคุณคุ้นเคยกับ Markdown
โหมด การเรนเดอร์ทันที ไม่ควรไม่คุ้นเคยกับผู้ใช้ที่คุ้นเคยกับ Typora ในทางทฤษฎีนี่เป็นวิธีที่สง่างามที่สุดในการแก้ไข Markdown
โหมด ตัวอย่างแบบแยกหน้าจอ แบบดั้งเดิมเหมาะสำหรับการแก้ไข markdown ภายใต้หน้าจอขนาดใหญ่
คุณสมบัติส่วนใหญ่ข้างต้นสามารถเปิดใช้งานได้โดยการสลับการกำหนดค่า นักพัฒนาสามารถเลือกการจับคู่ตามสถานการณ์แอปพลิเคชันของพวกเขา
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 >การปรากฏตัวของบรรณาธิการ ชุดรูปแบบคลาสสิกแบบคลาสสิก 2 ชุด
options.themesetThemeการปรากฏตัวของเอาต์พุต HTML จาก Markdown ชุดรูปแบบมด, แสง, มืด, ชุดธีม WeChat 4 รองรับอินเทอร์เฟซส่วนขยายเนื้อหา
class="vditor-reset" ในองค์ประกอบการแสดงผลoptions.preview.themeIPreviewOptions.themesetTheme หรือ setContentTheme ลักษณะที่ปรากฏของบล็อกรหัส GitHub ในตัวและชุดรูปแบบอื่น ๆ 36 ชุด
options.preview.hljsIPreviewOptions.hljs หรือไม่setTheme หรือ setCodeTheme คุณสามารถกรอกข้อมูลใน id องค์ประกอบหรือ HTMLElement ขององค์ประกอบเอง
false เมื่อกรอก HTMLElement ขององค์ประกอบเองคุณต้องตั้งค่า options.cache.id หรือ set options.cache.enable
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| i18n | หลายภาษาดู itips | - |
| การยกเลิกการขึ้นรูป | ช่วงเวลาประวัติศาสตร์ | - |
| หลังจาก | วิธีการโทรกลับหลังจากตัวแก้ไขจะแสดงผลแบบอะซิงโครนัส | - |
| ความสูง | ความสูงของตัวแก้ไขทั้งหมด | 'อัตโนมัติ' |
| Minheight | ความสูงขั้นต่ำของพื้นที่แก้ไข | - |
| ความกว้าง | ความกว้างของตัวแก้ไขทั้งหมดรองรับ % | 'อัตโนมัติ' |
| ผู้ถือครองตำแหน่ง | แจ้งเมื่อพื้นที่อินพุตว่างเปล่า | - |
| หรั่ง | ประเภทภาษา: en_us, fr_fr, pt_br, ja_jp, ko_kr, ru_ru, sv_se, zh_cn, zh_tw | 'zh_cn' |
| อินพุต (ค่า: สตริง) | ทริกเกอร์หลังจากอินพุต | - |
| โฟกัส (ค่า: สตริง) | ทริกเกอร์หลังจากโฟกัส | - |
| เบลอ (ค่า: สตริง) | ถูกกระตุ้นหลังจากโฟกัสออก | - |
| Keydown (เหตุการณ์: KeyboardEvent) | ทริกเกอร์หลังจากกด | - |
| ESC (ค่า: สตริง) | ทริกเกอร์หลังจากกด ESC | - |
| ctrlenter (ค่า: สตริง) | ⌘/ctrl+Enter จะถูกทริกเกอร์หลังจากกด | - |
| เลือก (ค่า: สตริง) | ทริกเกอร์หลังจากเลือกข้อความในตัวแก้ไข | - |
| แท็บ | แท็บ คีย์ทำงานสตริงรองรับ t และสตริงใด ๆ | - |
| เครื่องพิมพ์ดีด | ไม่ว่าจะเปิดใช้งานโหมด Typewriter | เท็จ |
| CDN | กำหนดค่าที่อยู่ CDN ที่สร้างขึ้นเอง | https://unpkg.com/vditor@${VDITOR_VERSION} |
| โหมด | โหมดเสริม: SV, IR, WYSIWYG | 'ir' |
| ผู้ดีทำการ | ไม่ว่าจะแสดงบันทึก | เท็จ |
| ค่า | ค่าเริ่มต้นของตัวแก้ไข | - |
| ธีม | หัวข้อ: คลาสสิกมืด | 'คลาสสิก' |
| ไอคอน | ไอคอนสไตล์: มดวัสดุ | 'มด' |
| CustomRenders: {ภาษา: String, render: (องค์ประกอบ: htmlelement, vditor: ivditor) => void} [] | ตัวแสดงผลที่กำหนดเอง | - |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] ดู SRC/TS/UTIL/OPTIONS.TS สำหรับค่าเริ่มต้นemoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check , outdent , indent , code help inline-code , insert-after br insert-before , undo , devtools redo , upload , link , table , record , edit-mode content-theme both export preview fullscreen , outline code-theme , infoname ไม่ได้อยู่ในการแจงนับคุณสามารถเพิ่มปุ่มที่กำหนดเองในรูปแบบดังนี้: 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' ) } ,
} ] ,
} )| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ชื่อ | เครื่องหมายที่ไม่ซ้ำกัน | - |
| ไอคอน | ไอคอน SVG | - |
| เคล็ดลับ | คำใบ้ | - |
| การใช้คำพูด | เคล็ดลับ: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| ฮอตคีย์ | คีย์ลัดในรูปแบบ ⇧⌘ / ⌘ / ⌥⌘ | - |
| คำต่อท้าย | ใส่คำต่อท้ายในตัวแก้ไข | - |
| คำนำหน้า | ใส่คำนำหน้าในตัวแก้ไข | - |
| คลิก (เหตุการณ์: เหตุการณ์, vditor: ivditor) | เหตุการณ์ที่เกิดขึ้นเมื่อคลิกปุ่มที่กำหนดเอง | - |
| ชื่อชั้นเรียน | ชื่อสไตล์ | - |
| Toolbar?: Array <opotions.toolbar> | เมนูย่อย | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ซ่อน | ไม่ว่าจะซ่อนแถบเครื่องมือ | เท็จ |
| เข็มหมุด | ไม่ว่าจะแก้ไขแถบเครื่องมือ | เท็จ |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | ไม่ว่าจะเปิดใช้งานเคาน์เตอร์ | เท็จ |
| หลังจาก (ความยาว: หมายเลข, เคาน์เตอร์: ตัวเลือก counter): โมฆะ | จำนวนคำโทรกลับ | - |
| สูงสุด | ค่าสูงสุดที่อนุญาตให้ป้อน | - |
| พิมพ์ | ประเภทสถิติ: 'markdown', 'text' | 'Markdown' |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | ไม่ว่าจะใช้ LocalStorage สำหรับแคช | จริง |
| รหัสประจำตัว | คีย์แคชพารามิเตอร์แรกคือองค์ประกอบและ ต้องการ การเปิดใช้งานแคช | - |
| หลังจาก (html: string): สตริง | แคชโทรกลับ | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | ไม่ว่าจะเปิดใช้งานโหมดความคิดเห็น | เท็จ |
| เพิ่ม (ID: String, Text: String, CommentsData: iCommentsData []) | เพิ่มความคิดเห็นโทรกลับ | - |
| ลบ (ids: string []) | ลบความคิดเห็นโทรกลับ | - |
| Scroll (ด้านบน: หมายเลข) | ม้วนโทรกลับ | - |
| AdjustTop (CommentsData: iCommentsData []) | เมื่อแก้ไขเอกสารความสูงของความคิดเห็นจะถูกดัดแปลง | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ล่าช้า | ดูตัวอย่างช่วงเวลามิลลิวินาที debounce | 1,000 |
| MaxWidth | ความกว้างสูงสุดของพื้นที่ดูตัวอย่าง | 800 |
| โหมด | โหมดแสดงผล: ทั้งสองตัวแก้ไข | 'ทั้งคู่' |
| url | คำขอแยกวิเคราะห์ MD | - |
| แยกวิเคราะห์ (องค์ประกอบ: htmlelement) | ดูตัวอย่างการโทรกลับ | - |
| แปลง (html: string): สตริง | โทรกลับก่อนการแสดงผล | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| defaultlang | ใช้ภาษาตามค่าเริ่มต้นหากไม่มีการระบุภาษา | - |
| เปิดใช้งาน | ไม่ว่าจะเปิดใช้งานการเน้นรหัส | จริง |
| สไตล์ | ดู Chroma สำหรับค่าเสริม | github |
| ผ้าลินิน | ไม่ว่าจะเปิดใช้งานหมายเลขบรรทัด | เท็จ |
| เสียงลาง | ปรับแต่งภาษาที่ระบุ | code_languages |
| rendermenu (รหัส: htmlelement, คัดลอก: htmlelement) | ปุ่มเรนเดอร์ | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| อวกาศ | พื้นที่อัตโนมัติ | เท็จ |
| gfmautolink | ลิงค์อัตโนมัติ | จริง |
| fixtermtypo | เงื่อนไขการแก้ไขอัตโนมัติ | เท็จ |
| TOC | แทรกไดเรกทอรี | เท็จ |
| เชิงอรรถ | เชิงอรรถ | จริง |
| codeblockpreview | ไม่ว่าจะทำให้บล็อกรหัสในโหมด WYSIWYG และ IR | จริง |
| MathBlockPreview | ไม่ว่าจะแสดงสูตรทางคณิตศาสตร์ในโหมด Wysiwyg และ IR | จริง |
| ย่อหน้า | จุดเริ่มต้นที่ว่างเปล่าสองครั้ง | เท็จ |
| ฆ่าเชื้อ | ไม่ว่าจะเปิดใช้งานการกรอง XSS | จริง |
| สไตล์รายการ | เพิ่มแอตทริบิวต์สไตล์ข้อมูลลงในรายการ | เท็จ |
| linkbase | ลิงค์คำนำหน้าเส้นทางสัมพัทธ์ | - |
| LinkPrefix | ลิงค์คำนำหน้าบังคับ | - |
| เครื่องหมาย | เปิดใช้งาน Mark Mark | เท็จ |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ปัจจุบัน | หัวข้อปัจจุบัน | "แสงสว่าง" |
| รายการ | รายการหัวข้อเสริม | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| เส้นทาง | ที่อยู่สไตล์ธีม | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| Inlinedigit | ได้รับอนุญาตให้นับหลังจากสูตรทางคณิตศาสตร์แบบอินไลน์เริ่มต้น $ หรือไม่? | เท็จ |
| มาโคร | คำจำกัดความของมาโครส่งผ่านเมื่อแสดงผลด้วย mathjax | - |
| เครื่องยนต์ | เอ็นจิ้นสูตรทางคณิตศาสตร์: Katex, Mathjax | 'Katex' |
| Mathjaxoptions | พารามิเตอร์เมื่อเอ็นจิ้นสูตรทางคณิตศาสตร์คือ Mathjax | - |
ค่าเริ่มต้นคือ ["เดสก์ท็อป", "แท็บเล็ต", "มือถือ", "MP-Wechat", "Zhihu"] คุณสามารถเลือกจากค่าเริ่มต้นสำหรับการกำหนดค่าหรือใช้ฟิลด์ต่อไปนี้เพื่อการพัฒนาที่กำหนดเอง
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| สำคัญ | ปุ่มถูกระบุอย่างไม่ซ้ำกันและไม่สามารถว่างเปล่าได้ | - |
| ข้อความ | ข้อความปุ่ม | - |
| คำแนะนำเครื่องมือ | คำใบ้ | - |
| ชื่อชั้นเรียน | ชื่อคลาสปุ่ม | - |
| คลิก (คีย์: สตริง) | ปุ่มคลิกการโทรกลับเหตุการณ์ | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | ไม่ว่าจะเปิดใช้งานการแสดงผลมัลติมีเดีย | จริง |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| isPreview | ไม่ว่าจะดูตัวอย่างภาพ | จริง |
| ดูตัวอย่าง (bom: element) => โมฆะ | การประมวลผลตัวอย่างภาพ | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| Isopen | ไม่ว่าจะเปิดที่อยู่ลิงค์ | จริง |
| คลิก (bom: องค์ประกอบ) => โมฆะ | คลิกเหตุการณ์ลิงค์ | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| แยกวิเคราะห์ | ไม่ว่าจะทำการวิเคราะห์ MD | จริง |
| ล่าช้า | ช่วงเวลาการ debounce มิลลิวินาที | 200 |
| อีโมจิ | อีโมจิเริ่มต้นสามารถเลือกได้จากพิณ/emoji_map หรือสามารถปรับแต่งได้ | {'+1': '?', '-1': '?', 'หัวใจ': '❤', 'cold_sweat': '?' - |
| อิโมจิเทล | เคล็ดลับการแสดงออกทั่วไป | - |
| อิโมจเดินทาง | ที่อยู่ภาพนิพจน์ | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| ขยาย: ihintextend [] | การขยายคำหลักเสร็จสมบูรณ์เช่น @/ทัวร์ | - |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format สามารถใช้สำหรับการแปลง // 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 สามารถผ่านที่อยู่รูปภาพนอกสถานที่ในคลิปบอร์ดไปยังเซิร์ฟเวอร์เพื่อบันทึกและโครงสร้างข้อมูลมีดังนี้: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success format error จะไม่ถูกทริกเกอร์ในเวลาเดียวกัน สถานการณ์การโทรเฉพาะมีดังนี้: 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 ) ;
}
}| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| url | อัปโหลด URL หากว่างเปล่าเหตุการณ์ที่เกี่ยวข้องกับการอัปโหลดจะไม่ถูกเรียกใช้ | - |
| สูงสุด | อัปโหลดไฟล์ไบต์สูงสุด | 10 * 1024 * 1024 |
| linktoimgurl | เมื่อคลิปบอร์ดมีที่อยู่รูปภาพให้ใช้ URL นี้เพื่ออัปโหลดอีกครั้ง | - |
| linktoimgcallback (ResponseText: String) | อัปโหลดที่อยู่ภาพการโทรกลับ | - |
| linktoimgformat (ResponseText: String): String | จัดรูปแบบค่าส่งคืนที่อัปโหลดโดยที่อยู่รูปภาพ | - |
| ความสำเร็จ (บรรณาธิการ: HTMLPreelement, MSG: String) | อัปโหลดการโทรกลับสำเร็จ | - |
| ข้อผิดพลาด (MSG: String) | อัปโหลดการโทรกลับล้มเหลว | - |
| โทเค็น | CORS อัปโหลดการตรวจสอบส่วนหัวคือ x-upload-token | - |
| วิพากษ์วิจารณ์ | การควบคุมการเข้าถึงข้ามไซต์ | เท็จ |
| ส่วนหัว | ขอการตั้งค่าส่วนหัว | - |
| ชื่อไฟล์ (ชื่อ: สตริง): สตริง | การประมวลผลความปลอดภัยชื่อไฟล์ | name => name.replace (/ w/g, '') |
| ยอมรับ | ประเภทการอัปโหลดไฟล์เช่นเดียวกับอินพุตยอมรับ | - |
| ตรวจสอบ (ไฟล์: ไฟล์ []) => สตริง | บูลีน | ตรวจสอบ, ส่งคืนจริงหากประสบความสำเร็จเป็นอย่างอื่นข้อความแสดงข้อผิดพลาด | - |
| ตัวจัดการ (ไฟล์: ไฟล์ []) => สตริง | NULL สัญญา | สัญญา | อัพโหลดแบบกำหนดเองส่งคืนข้อความแสดงข้อผิดพลาดเมื่อเกิดข้อผิดพลาด | - |
| รูปแบบ (ไฟล์: ไฟล์ [], ResponseText: String): String | แปลงข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์เพื่อให้ตรงกับโครงสร้างข้อมูลในตัว | - |
| ไฟล์ (ไฟล์: ไฟล์ []): ไฟล์ [] | สัญญา <ไฟล์ []> | ประมวลผลไฟล์ที่อัปโหลดก่อนส่งคืน | - |
| Setheaders (): {[คีย์: สตริง]: สตริง} | ใช้ค่าส่งคืนเพื่อตั้งค่าส่วนหัวก่อนอัปโหลด | - |
| extradata: {[คีย์: สตริง]: สตริง | หยด} | เพิ่มพารามิเตอร์พิเศษใน formData | - |
| หลายรายการ | มีไฟล์ที่อัปโหลดหลายไฟล์ | จริง |
| ชื่อสนาม | อัปโหลดชื่อฟิลด์ | 'ไฟล์[]' |
| RenderLinkdest? (vditor: ivditor, โหนด: ilutenode, เข้าสู่: บูลีน): [สตริง, หมายเลข] | ประมวลผลที่อยู่รูปภาพในคลิปบอร์ด | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | รองรับการลากขนาดหรือไม่? | เท็จ |
| ตำแหน่ง | ตำแหน่งบาร์ลาก: 'ด้านบน', 'ด้านล่าง' | 'ด้านล่าง' |
| หลังจาก (ความสูง: จำนวน) | การโทรกลับจบลงด้วยการลาก | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ดูตัวอย่าง | ClassName on Preview Element | - |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| ดัชนี | ระดับเต็มหน้าจอ | 90 |
| อธิบาย | ค่าเริ่มต้น | |
|---|---|---|
| เปิดใช้งาน | การเริ่มต้นจะแสดงโครงร่าง | เท็จ |
| ตำแหน่ง | โครงร่างตำแหน่ง: 'ซ้าย', 'ขวา' | 'ซ้าย' |
| อธิบาย | |
|---|---|
| ExportJson (Markdown: String) | รับ JSON ที่สอดคล้องกันตาม Markdown |
| getValue () | รับเนื้อหา Markdown |
| gethtml () | รับเนื้อหา HTML |
| InsertValue (ค่า: String, render = true) | แทรกเนื้อหาในโฟกัสและใช้การเรนเดอร์ markdown โดยค่าเริ่มต้น |
| จุดสนใจ() | มุ่งเน้นไปที่บรรณาธิการ |
| เบลอ() | ทำให้บรรณาธิการไม่โฟกัส |
| พิการ() | ปิดการใช้งานตัวแก้ไข |
| เปิดใช้งาน() | บรรณาธิการที่ไม่สามารถทำได้ |
| getSelection (): สตริง | ส่งคืนสตริงที่เลือก |
| setValue (markdown: string, clearstack = false) | ตั้งค่าเนื้อหาตัวแก้ไขและเลือก Clear History Stack |
| Clearstack () | ล้างสแต็กบันทึกการเลิกทำและทำซ้ำ |
| RenderPreview (ค่า?: สตริง) | ตั้งค่าเนื้อหาพื้นที่ตัวอย่าง |
| getCursorPosition (): {top: number, ซ้าย: หมายเลข} | รับตำแหน่งโฟกัส |
| deleteValue () | ลบเนื้อหาที่เลือก |
| updateValue (ค่า: สตริง) | อัปเดตเนื้อหาที่เลือก |
| isuploading () | กำลังดำเนินการอัปโหลดอยู่ในระหว่างดำเนินการหรือไม่ |
| ClearCache () | ล้างแคช |
| disabledCache () | ปิดการใช้งานแคช |
| enableCache () | เปิดใช้งานแคช |
| HTML2MD (ค่า: สตริง) | HTML ถึง MD |
| เคล็ดลับ (ข้อความ: สตริงเวลา: หมายเลข) | ข้อความแจ้งข้อความ เวลาคือ 0 และจะแสดง |
| SetPreviewMode (โหมด: "ทั้งสอง" | "Editor") | ตั้งค่าโหมดตัวอย่าง |
| settheme (ธีม: "มืด" | "คลาสสิก", contenttheme?: สตริง, codetheme?: สตริง, contenthemepath?: สตริง) | ตั้งธีมธีมเนื้อหาและสไตล์บล็อกรหัส |
| getCurrentMode (): สตริง | รับโหมดการแก้ไขปัจจุบันของบรรณาธิการ |
| ทำลาย() | ทำลายบรรณาธิการ |
| getCommentIds (): {id: string, top: number} [] | รับความคิดเห็นทั้งหมด |
| HlCommentIds (IDS: String []) | เน้นความคิดเห็น |
| UNHLCOMMENTIDS (IDS: String []) | ยกเลิกความคิดเห็นและไฮไลท์ |
| RemoveCommentIds (removeIds: string []) | ลบความคิดเห็น |
| updateToolbarconfig (config: {ซ่อน?: บูลีน, พิน?: บูลีน}) | อัปเดตการกำหนดค่าแถบเครื่องมือ |
method.min.js และเรียกมันโดยตรงดังนี้ Vditor . mermaidRender ( document ) import VditorPreview from 'vditor/dist/method.min'
VditorPreview . mermaidRender ( document )preview โดยตรงและพารามิเตอร์มีดังนี้: 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 และ index.min.js ไม่สามารถแนะนำได้ในเวลาเดียวกัน| อธิบาย | |
|---|---|
| PreviewImage (OldImGelement: HTMLimageElement, Lang: keyof ii18n = "zh_cn", Theme = "Classic") | คลิกที่ภาพเพื่อดูตัวอย่าง |
| mermaidrender (องค์ประกอบ: htmlelement, cdn = opotions.cdn, Theme = opotions.theme) | แผนภูมิแผนภูมิ/แผนภูมิ/แผนภูมิ Gant |
| Smilesrender (องค์ประกอบ: htmlelement, cdn = opotions.cdn, ธีม = ตัวเลือก | โครงสร้างสารเคมี |
| Markmaprender (องค์ประกอบ: htmlelement, cdn = opotions.cdn) | แผนที่ Markdown Mind |
| flowchartrender (องค์ประกอบ: htmlelement, cdn = opotions.cdn) | การแสดงผลงานผังงาน |
| coderender (องค์ประกอบ: htmlelement, ตัวเลือก?: ihljs) | เพิ่มปุ่มคัดลอกไปยังบล็อกรหัสในองค์ประกอบ |
| Chartender (องค์ประกอบ: (htmlelement | เอกสาร) = เอกสาร, cdn = opotions.cdn, Theme = opotions.theme) | แผนภูมิการแสดงผล |
| MindMapRender (องค์ประกอบ: (htmlelement | เอกสาร) = เอกสาร, cdn = opotions.cdn, Theme = opotions.theme) | การแสดงภาพภาพสมอง |
| PlantumLrender (องค์ประกอบ: (htmlelement | เอกสาร) = เอกสาร, cdn = opotions.cdn) | การแสดงผล Plantuml |
| abcrender (องค์ประกอบ: (htmlelement | เอกสาร) = เอกสาร, cdn = opotions.cdn) | การแสดงผล |
| md2html (mdtext: string, ตัวเลือก?: ipreviewoptions): สัญญา <string> | ข้อความ Markdown ถูกแปลงเป็น HTML วิธีนี้ต้องใช้การเขียนโปรแกรมแบบอะซิงโครนัส |
| ดูตัวอย่าง (PreviewElement: Htmldivelement, Markdown: String, ตัวเลือก?: iPreviewOptions) | การแสดงบทความหน้า |
| HighlightTrender (HLJSOPTION?: IHLJS, Element?: HTMLELEMENT | เอกสาร, CDN = OPTIONS.CDN) | เน้นการแสดงผลของบล็อกรหัสในองค์ประกอบ |
| MEDIARENDER (องค์ประกอบ: HTMLELEMENT) | แสดงเป็นวิดีโอเสียงและ Iframes ฝังตัวสำหรับลิงก์เฉพาะ |
| Mathrender (องค์ประกอบ: htmlelement, ตัวเลือก?: {cdn ?: string, math?: imath}) | การแสดงสูตรทางคณิตศาสตร์ |
| SpeechRender (องค์ประกอบ: htmlelement, lang?: (keyof ii18nlang)) | อ่านข้อความที่เลือก |
| graphvizrender (องค์ประกอบ: htmlelement, cdn ?: string) | แสดงผล |
| Outlinerender (ContentElement: HTMLELEMENT, TargetElement: Element) | แสดงเค้าโครง |
| lazyloadimagerender (องค์ประกอบ: (htmlelement | เอกสาร) = เอกสาร) | เปิดใช้งานรูปภาพที่เปิดใช้งาน Lazy Loading |
| SetCodeTheme (codetheme: String, cdn = opotions.cdn) | ตั้งค่าชุดรูปแบบรหัสดูตัวเลือก preview.hljs.style สำหรับ codetheme |
| SetContentTheMe (ContentTheMe: String, Path: String) | ตั้งค่าธีมเนื้อหาดูตัวเลือก preview.theme.list สำหรับ contentTheMe |
npm install จากไดเร็กทอรีรูทnpm run start เริ่มต้นเพื่อเริ่มเซิร์ฟเวอร์ท้องถิ่นและเปิด http: // localhost: 9000npm run build รหัสแพ็คเกจบิลด์เพื่อ dist directoryเนื่องจากการใช้กลไกการโหลดตามความต้องการ CDN เริ่มต้นคือ https://unpkg.com/vditor@
หากรหัสได้รับการแก้ไขหรือคุณต้องใช้ CDN ที่สร้างขึ้นเองคุณสามารถทำตามขั้นตอนต่อไปนี้:
cdn , emojiPath และ themes ใน options และ IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , วิธีการ setContentThemeโปรด อ่าน ส่วน อัพเกรด ใน changelog อย่างระมัดระวังเมื่ออัปเกรดเวอร์ชัน
VDitor ใช้โปรโตคอลโอเพนซอร์ส MIT
ในวันแรก ๆ ของการพัฒนา Sym เราใช้ตัวแก้ไขข้อความที่อุดมไปด้วย WYSIWYG โดยตรง ในเวลานั้นบรรณาธิการที่ใช้ HTML เป็นที่นิยมมากและพวกเขาก็สะดวกมากที่จะอ้างในโครงการและพวกเขาก็สอดคล้องกับพฤติกรรมการใช้งานของผู้ใช้ในเวลานั้น
ต่อมาการเพิ่มขึ้นของ Markdown ก็ค่อยๆเปลี่ยนรูปแบบของทุกคน นอกจากนี้โครงการอื่น ๆ ของเราหลายโครงการสำหรับโปรแกรมเมอร์ดังนั้นการย้ายถิ่นฐานไปยัง MD ก็เป็นแนวโน้มทั่วไปเช่นกัน เราเลือก CodeMirror ซึ่งเป็นตัวแก้ไขที่ยอดเยี่ยมที่ให้อินเทอร์เฟซการเขียนโปรแกรมที่หลากหลายแก่นักพัฒนาซอฟต์แวร์และยังเข้ากันได้กับเบราว์เซอร์ต่างๆ
ต่อมาเมื่อธุรกิจโครงการของเราต้องการการตัดสินโดยใช้ Codemirror บางครั้งก็รู้สึกว่า "ยุ่งยาก" ตัวอย่างเช่นเพื่อให้ได้รายการชื่อผู้ใช้ @Automatically ใส่อิโมจิ, อัปโหลดไฟล์ ฯลฯ มันต้องมีการพัฒนาที่สองในเชิงลึกและความต้องการทางธุรกิจเหล่านี้เป็นสิ่งที่สถานการณ์โครงการจำนวนมากมีและจำเป็น
ในที่สุดเราตัดสินใจที่จะเริ่มใช้งานตัวแก้ไขด้วยตนเองใน Sym ด้วยการทำซ้ำหลายเวอร์ชันบรรณาธิการของ Sym กำลังเติบโตมากขึ้นเรื่อย ๆ ในห่วงโซ่ชุมชนที่เราดำเนินการบางคนถามเราว่าเราสามารถถอนตัวแก้ไขแยกต่างหากและมอบให้ทุกคนใช้หรือไม่ ในเวลาเดียวกันโปรแกรมหลักระดับแนวหน้า V ของเราได้รับการยอมรับเล็กน้อยในการรักษาบรรณาธิการที่กระจัดกระจายในโครงการต่าง ๆ และยังมีความประทับใจที่ดีของ TypeScript ดังนั้นเราจึงตัดสินใจใช้ TS เพื่อใช้งาน MD MD ด้านเบราว์เซอร์ใหม่
ดังนั้น Vditor จึงเกิด
