TutuDocs · คอมโพเนนต์ที่ฝังได้
โค้ดเพียงบรรทัดเดียว — เพิ่มโปรแกรมแก้ไขเอกสารลงในเว็บไซต์ของคุณได้ในไม่กี่วินาที
ฝังโปรแกรมแก้ไขเอกสาร TutuDocs (การจัดหน้า / ตาราง / รูปภาพ / เค้าโครง) ลงในเว็บไซต์ใดก็ได้ของคุณ ผู้เยี่ยมชมเขียนเอกสารได้บนเว็บไซต์ของคุณโดยตรง ปรับแต่งธีมได้ และการอัปเดตผลิตภัณฑ์มีผลโดยอัตโนมัติ — คุณไม่ต้องดูแลรักษาเลย
คัดลอกแล้ววาง — ก่อนแท็ก
</body> ของหน้าเว็บคุณ <script src="https://tutudocs.com/embed.js"
data-key="pk_live_YOUR_KEY"
data-mount="#tutudocs-editor" defer></script> แทนที่ pk_live_YOUR_KEY ด้วยคีย์ที่คุณสร้างเองในคอนโซล (ผู้ใช้ที่ลงทะเบียนคนใดก็ได้ — ไม่ต้องตรวจสอบ มีผลทันที); คอนเทนเนอร์ #tutudocs-editor ต้องมีความกว้างและความสูง ลงทะเบียน URL ที่ฝังของคุณเมื่อตั้งค่า (รายการอนุญาต; สำหรับการพัฒนาในเครื่องให้ใส่ localhost); จะแสดงเฉพาะบนเว็บไซต์ที่คุณลงทะเบียนไว้เท่านั้น
ลองใช้งานจริง
คลิกปุ่มด้านล่างเพื่อลองใช้โปรแกรมแก้ไขเอกสารที่ฝังไว้ได้ที่นี่เลย
JS API (สำหรับ callback / การปรับแต่ง)
<script src="https://tutudocs.com/embed.js"></script>
<script>
const editor = TutuDocs.mount('#tutudocs-editor', {
key: 'pk_live_YOUR_KEY',
theme: 'auto', // auto | light | dark
onSave: (file) => {
// file.dataUrl = the exported Word document (.docx, base64)
upload(file.dataUrl);
}
});
// After the user clicks Done, onSave returns the .docx; or call it directly:
// const { dataUrl } = await editor.export();
</script>ตัวเลือกการกำหนดค่าทั้งหมด
| พารามิเตอร์ | ชนิด | คำอธิบาย |
|---|---|---|
| key | string | คีย์สาธารณะ pk_ ของคุณ (สร้างในคอนโซล) จำเป็นต้องระบุ |
| theme | 'auto'|'light'|'dark' | ธีม; auto จะปรับตามโหมดสว่าง/มืดของโฮสต์/ระบบ |
| saveText | string | ข้อความปุ่ม «เสร็จสิ้น» (ค่าเริ่มต้น «เสร็จสิ้นและส่งกลับ», ≤16 อักขระ) แสดงในแถบบนแบบดั้งเดิมของโปรแกรมแก้ไข (ข้างๆ แชร์/ประวัติ) |
| hideSuite | boolean | ซ่อนตัวเปิดชุดโปรแกรม (ซ่อนโดยค่าเริ่มต้นเมื่อฝัง เพื่อลดการรบกวน) |
เมท็อด
editor.export()ส่งออกเอกสารปัจจุบันเป็น .docx → Promise<{dataUrl,mime,size}>editor.setTheme('dark')สลับธีมขณะทำงานeditor.destroy()ถอดคอมโพเนนต์ (ลบ iframe)
callback ของเหตุการณ์
onReady()โปรแกรมแก้ไขพร้อมแล้วonSave(file)ผู้ใช้คลิก «เสร็จสิ้น» → file.dataUrl คือเอกสาร Word ที่ส่งออก (.docx)onError(e)e.message เป็นภาษาที่เข้าใจง่าย (ไม่ได้เปิดใช้งาน / ไม่มีสิทธิ์ / โหลดไม่สำเร็จ)onClose()เลเยอร์ลอยแบบเต็มจอถูกปิดแล้ว
ความปลอดภัย · อัปเดตอัตโนมัติ
- · บริการตนเอง อนุมัติอัตโนมัติ: ผู้ใช้ที่ลงทะเบียนคนใดก็ได้ลงทะเบียนชื่อเว็บไซต์ + URL ที่ฝังในคอนโซล แล้วได้คีย์ที่ใช้งานได้ทันที
- · คีย์เป็นสาธารณะ; ป้องกันการนำไปใช้ในทางที่ผิดด้วยรายการอนุญาต/ปฏิเสธของ URL ที่ลงทะเบียน (รายการปฏิเสธมาก่อน) โดเมนที่ไม่ได้ลงทะเบียนจะถูกปฏิเสธพร้อมข้อความให้ลงทะเบียน; คุณหยุดชั่วคราวหรือกลับมาใช้งานได้ทุกเมื่อ
- · สถิติแหล่งที่มาจริง: การโหลดแต่ละครั้งนับตาม Origin (รวมที่ถูกบล็อกด้วย); คอนโซลแสดงรายละเอียดแยกตามแหล่งที่มา และคุณเพิ่มโดเมนที่ไม่ได้ลงทะเบียนเข้ารายการอนุญาตได้ด้วยคลิกเดียว
- · โปรแกรมแก้ไขทำงานบนโดเมนของ TutuDocs เอง (แยกอิสระ); หน้าเว็บของคุณเข้าถึงข้อมูลรับรองใดๆ ของ TutuDocs ไม่ได้ และเอกสารส่วนตัวของ TutuDocs ของผู้เยี่ยมชมจะไม่ปรากฏในคอมโพเนนต์ที่ฝังไว้เลย
- · คอมโพเนนต์โฮสต์เองและอัปเดตอัตโนมัติโดย TutuDocs — การอัปเกรดฟีเจอร์ไม่ต้องแก้โค้ดฝั่งคุณ; ไม่ต้องดูแลรักษาเลย