หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

บรรณาธิการโมนาโก

ตัวแก้ไขโมนาโกเป็นตัวแก้ไขรหัสที่โดดเด่นจากรหัส VS ตรวจสอบเอกสาร VS Code เพื่อดูคุณสมบัติบางอย่างที่รองรับ

ภาพ

ลองดู

ลองใช้บรรณาธิการและดูตัวอย่างต่าง ๆ ในสนามเด็กเล่นแบบโต้ตอบของเรา

สนามเด็กเล่นเป็นวิธีที่ดีที่สุดในการเรียนรู้เกี่ยวกับวิธีการใช้โปรแกรมแก้ไขซึ่งคุณสมบัติรองรับการลองใช้เวอร์ชันที่แตกต่างกันและเพื่อสร้างตัวอย่างที่ทำซ้ำได้น้อยที่สุดสำหรับรายงานข้อผิดพลาด

การติดตั้ง 

 > npm install monaco-editor

คุณจะได้รับ:

  • Inside /esm : ESM เวอร์ชันของตัวแก้ไข (เข้ากันได้กับ EG WebPack)
  • Inside /dev : AMD Bundled ไม่ลดน้อยลง
  • Inside /min : AMD รวมและ minified
  • Inside /min-maps : แผนที่แหล่งสำหรับ min
  • monaco.d.ts : สิ่งนี้ระบุ API ของตัวแก้ไข (นี่คือสิ่งที่เป็นจริงทุกอย่างอื่นถือว่าเป็นส่วนตัวและอาจแตกหักด้วยการเปิดตัวใด ๆ )

ขอแนะนำให้พัฒนากับเวอร์ชัน dev และในการผลิตเพื่อใช้รุ่น min

แนวคิด

Monaco Editor เป็นที่รู้จักกันเป็นอย่างดีว่าเป็นตัวแก้ไขข้อความที่ให้พลังกับรหัส อย่างไรก็ตามมันค่อนข้างเหมาะสมยิ่งขึ้น ความเข้าใจพื้นฐานบางประการเกี่ยวกับแนวคิดพื้นฐานจำเป็นต้องใช้ตัวแก้ไขโมนาโกอย่างมีประสิทธิภาพ

แบบจำลอง

นางแบบเป็นหัวใจสำคัญของบรรณาธิการโมนาโก มันคือสิ่งที่คุณโต้ตอบเมื่อจัดการเนื้อหา โมเดลแสดงถึงไฟล์ที่เปิดแล้ว สิ่งนี้สามารถแสดงไฟล์ที่มีอยู่ในระบบไฟล์ แต่ไม่จำเป็นต้องทำ ตัวอย่างเช่นโมเดลถือเนื้อหาข้อความกำหนดภาษาของเนื้อหาและติดตามประวัติการแก้ไขของเนื้อหา

uris

แต่ละรุ่นจะถูกระบุโดย URI นี่คือเหตุผลว่าทำไมจึงเป็นไปไม่ได้ที่สองรุ่นจะมี URI เดียวกัน เมื่อคุณแสดงเนื้อหาในตัวแก้ไขโมนาโกคุณควรนึกถึงระบบไฟล์เสมือนจริงที่ตรงกับไฟล์ที่ผู้ใช้ของคุณกำลังแก้ไข ตัวอย่างเช่นคุณสามารถใช้ file:/// เป็นเส้นทางพื้นฐาน หากโมเดลถูกสร้างขึ้นโดยไม่มี URI URI ของมันจะเป็น inmemory://model/1 จำนวนเพิ่มขึ้นเมื่อมีการสร้างโมเดลมากขึ้น

บรรณาธิการ

บรรณาธิการเป็นมุมมองผู้ใช้ที่หันหน้าไปทางโมเดล นี่คือสิ่งที่ติดอยู่กับ DOM และสิ่งที่ผู้ใช้ของคุณเห็นด้วยสายตา การดำเนินการแก้ไขทั่วไปกำลังแสดงแบบจำลองการจัดการสถานะมุมมองหรือดำเนินการหรือการดำเนินการตามคำสั่ง

ผู้ให้บริการ

ผู้ให้บริการมีคุณสมบัติการแก้ไขอัจฉริยะ ตัวอย่างเช่นซึ่งรวมถึงข้อมูลความสมบูรณ์และโฮเวอร์ มันไม่เหมือนกับ แต่มักจะแมปกับคุณสมบัติโปรโตคอลเซิร์ฟเวอร์ภาษา

ผู้ให้บริการทำงานกับแบบจำลอง คุณสมบัติอัจฉริยะบางอย่างขึ้นอยู่กับไฟล์ URI ตัวอย่างเช่นสำหรับ TypeScript เพื่อแก้ไขการนำเข้าหรือสำหรับ JSON IntelliSense เพื่อพิจารณาว่า Schema JSON ใดที่จะนำไปใช้กับแบบจำลองใด ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องเลือกแบบจำลองที่เหมาะสม

การทิ้ง

วัตถุที่เกี่ยวข้องกับโมนาโกจำนวนมากมักใช้วิธี .dispose() วิธีนี้มีวัตถุประสงค์เพื่อทำการล้างข้อมูลเมื่อไม่จำเป็นต้องใช้ทรัพยากรอีกต่อไป ตัวอย่างเช่น Calling model.dispose() จะยกเลิกการลงทะเบียนและเพิ่ม URI สำหรับรุ่นใหม่ บรรณาธิการควรถูกกำจัดเพื่อเพิ่มทรัพยากรและลบผู้ฟังโมเดลของพวกเขา

เอกสาร

  • เรียนรู้วิธีการรวมตัวแก้ไขกับตัวอย่างที่สมบูรณ์เหล่านี้
    • รวมเวอร์ชัน AMD
    • รวมรุ่น ESM
  • เรียนรู้วิธีใช้ Editor API และลองปรับแต่งของคุณเองในสนามเด็กเล่น
  • สำรวจเอกสาร API หรืออ่านโดยตรงจาก monaco.d.ts
  • อ่านคู่มือนี้เพื่อให้แน่ใจว่าผู้ใช้ทั้งหมดของคุณสามารถเข้าถึงได้!
  • สร้าง Tokenizer ของพระมหากษัตริย์สำหรับภาษาการเขียนโปรแกรมใหม่ในสนามเด็กเล่น Monarch
  • ถามคำถามเกี่ยวกับ Stackoverflow! ค้นหาปัญหาที่เปิดและปิดมีเคล็ดลับมากมายในนั้น!

ปัญหา

สร้างปัญหาในที่เก็บนี้สำหรับสิ่งที่เกี่ยวข้องกับบรรณาธิการโมนาโก โปรดค้นหาปัญหาที่มีอยู่เพื่อหลีกเลี่ยงการทำซ้ำ

คำถามที่พบบ่อย

❓ ความสัมพันธ์ระหว่างรหัส VS และตัวแก้ไขโมนาโกคืออะไร?

ตัวแก้ไขโมนาโกถูกสร้างขึ้นโดยตรงจากแหล่งที่มาของรหัส VS พร้อมกับบริการบางอย่างรอบ ๆ บริการที่รหัสจำเป็นต้องทำงานในเว็บเบราว์เซอร์นอกบ้าน

❓ ความสัมพันธ์ระหว่างเวอร์ชันของ VS Code และเวอร์ชันของ Monaco Editor คืออะไร?

ไม่มี. ตัวแก้ไขโมนาโกเป็นห้องสมุดและสะท้อนถึงซอร์สโค้ดโดยตรง

❓ ฉันได้เขียนส่วนขยายสำหรับรหัส VS มันจะทำงานกับตัวแก้ไขโมนาโกในเบราว์เซอร์หรือไม่?

เลขที่

หมายเหตุ: หากส่วนขยายนั้นขึ้นอยู่กับ LSP อย่างสมบูรณ์และหากเซิร์ฟเวอร์ภาษาถูกเขียนขึ้นใน JavaScript ก็จะเป็นไปได้

❓ ทำไมต้องเป็นพนักงานเว็บเหล่านี้และทำไมฉันถึงต้องสนใจ?

บริการภาษาสร้างผู้ทำงานบนเว็บเพื่อคำนวณสิ่งของหนักนอกเธรด UI พวกเขาเสียค่าใช้จ่ายอะไรเลยในแง่ของค่าใช้จ่ายของทรัพยากรและคุณไม่ควรกังวลเกี่ยวกับพวกเขามากเกินไปตราบใดที่คุณให้พวกเขาทำงาน (ดูด้านบนกรณีข้ามโดเมน)

❓ loader.js นี้คืออะไร? ฉันสามารถใช้ require.js ไม่?

มันเป็นตัวโหลด AMD ที่เราใช้ในรหัส VS ใช่.

❓ ฉันเห็นคำเตือนว่า "ไม่สามารถสร้างผู้ปฏิบัติงานได้" ฉันควรทำอย่างไร?

HTML5 ไม่อนุญาตให้โหลดหน้าเว็บบน file:// เพื่อสร้างพนักงานเว็บ โปรดโหลดตัวแก้ไขด้วยเว็บเซิร์ฟเวอร์บน http:// หรือ https:// schemes

❓ บรรณาธิการรองรับในเบราว์เซอร์มือถือหรือเฟรมเวิร์กแอพมือถือหรือไม่?

เลขที่

❓ ทำไมตัวแก้ไขไม่รองรับไวยากรณ์ TextMate?

  • โปรดดู https://github.com/bolinfest/monaco-tm ซึ่งรวบรวม monaco-editor , vscode-oniguruma และ vscode-textmate เพื่อรับการสนับสนุนไวยากรณ์ TM ในตัวแก้ไข

การสนับสนุน / การพัฒนาท้องถิ่น

เรายินดีต้อนรับการมีส่วนร่วมจากชุมชน! โปรดดูรายละเอียดว่าคุณสามารถมีส่วนร่วมได้อย่างมีประสิทธิภาพวิธีที่คุณสามารถเรียกใช้โปรแกรมแก้ไขจากแหล่งที่มาและวิธีที่คุณสามารถแก้ไขปัญหาและแก้ไขปัญหาได้

จรรยาบรรณ

โครงการนี้ได้นำรหัสการดำเนินงานของ Microsoft โอเพ่นซอร์สมาใช้ สำหรับข้อมูลเพิ่มเติมโปรดดูจรรยาบรรณคำถามที่พบบ่อยหรือติดต่อ [email protected] พร้อมคำถามหรือความคิดเห็นเพิ่มเติมใด ๆ

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด