WYSIWYG Text Editor UMEDITOR (จีน) โหลดรวดเร็วและใช้ง่าย

byNongJava •14:30

0

UMEDITOR (แปลภาษาไทย)

Demo Download

UMeditor

UMeditor แก้ไขข้อความที่อุดมไปด้วย

UMeditor เรียก UM เป็นueditorรุ่นที่เรียบง่าย เพื่อตอบสนองความพอร์ทัลของเราเป็นกล่องตอบกลับโพสต์ที่เรียบง่ายและความต้องการกล่องสำหรับการปรับแต่งเป็นพิเศษแก้ไขข้อความที่อุดมไปด้วยออนไลน์ เป้าหมายของเราคือไม่เพียง แต่จะเพิ่มประสบการณ์การแก้ไขแก้ไขออนไลน์ แต่ยังต้องการที่จะเปลี่ยนเกณฑ์เกี่ยวกับเทคโนโลยี front-end เทคโนโลยีที่อุดมไปด้วยข้อความเพื่อให้เราไม่รู้สึกว่านี่เป็นหลุม

คุณสมบัติหลัก

น้ำหนักเบา : จำนวนของไฟล์ต้นแบบรหัสเป็น 139K
โหลดได้เร็วขึ้น : การยกเลิกการใช้โหมด iframe แบบดั้งเดิมโดยใช้ div ลักษณะโหลดในการสั่งซื้อเพื่อให้บรรลุความเร็วในการโหลดได้เร็วขึ้นและอัตราความล้มเหลวในการโหลดศูนย์
ปรับแต่ง : รายการการกำหนดค่าที่สมบูรณ์แบบระดับสูงที่ปรับแต่ง
Scalable : รหัสความชัดเจนแยกระดับฟังก์ชั่นปลั๊กติด, การปรับแต่งที่มีความยืดหยุ่นที่จำเป็น
พื้นหลังสนับสนุนเพิ่มเติม : สนับสนุน PHP, ASP, JSP, พื้นหลังการปรับใช้รหัสสี่สุทธิ
คุณลักษณะที่อุดมด้วย : สนับสนุนแทรกสมการ QQ หน้าจอวางลากและวางภาพอัพโหลดแทรกแผนที่, ฟังก์ชั่นแบบร่าง

การเริ่มต้นและประสบการณ์การใช้งาน

ขั้นตอนที่หนึ่ง: ดาวน์โหลดบรรณาธิการ

Umeditor เว็บไซต์อย่างเป็นทางการเพื่อดาวน์โหลดรุ่นล่าสุดของรุ่นรหัสที่มา _examples เปิด / index.html หลังจากดาวน์โหลดคุณสามารถดูตัวอย่างการสาธิต [หน้าดาวน์โหลด]

ขั้นตอนที่สอง: การใช้งานในการแก้ไขหน้า

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

<! - บรรณาธิการโหลดภาชนะ ->   < สคริปต์ ดังกล่าวข้างต้น ID = "ตู้คอนเทนเนอร์" ชื่อ = "เนื้อหา" ประเภท = " text / plain " สไตล์ = "ความกว้าง: 600px; ความสูง: 200px; " >      นี่คือการเริ่มต้นเขียนเนื้อหาของคุณ  </ สคริปต์ >

ใน<head> </ head>แท็กสุดท้ายแทรกความจำเป็นที่จะอ้างอิงและแก้ไขรหัสตัวอย่าง (หมายเหตุปรับเปลี่ยนเส้นทางไฟล์อ้างอิง):

<! - ไฟล์รูปแบบ ->   < เชื่อมโยง rel = "สไตล์ชีตนี้"  href = " ./umeditor/themes/default/css/umeditor.css " >   <! - อ้างอิง jQuery ->   < สคริปต์ ที่ src = " ./ umeditor / พรรคที่สาม / jquery.min.js " > </ สคริปต์ >   <! - แฟ้มการกำหนดค่า ->   < สคริปต์ ประเภท = "ข้อความ / JavaScript "  src = " ./umeditor/umeditor.config.js " > < / สคริปต์ >   <! - แฟ้มแหล่งที่มาแก้ไข ->   < สคริปต์ ประเภท = "ข้อความ / JavaScript "  src = " ./umeditor/umeditor.js " > </ สคริปต์ >   <! - ไฟล์ชุดภาษา ->   < สคริปต์ ประเภท = "ข้อความ / JavaScript "  src = " ./umeditor/lang/zh-cn/zh-cn.js " > </ script >   <! - ยกตัวอย่างแก้ไขรหัส ->   < script  ประเภท = "ข้อความ / JavaScript " >       $ ( ฟังก์ชั่น () {           หน้าต่าง . UM  =  เอ่อ . getEditor ( 'ตู้คอนเทนเนอร์' {               / * การกำหนดค่าพารามิเตอร์ผ่านดูรายชื่อพารามิเตอร์สามารถติดตั้ง * umeditor.config.js /               Toolbar : [ 'ใช้ยกเลิกการทำซ้ำ | Bold ขีดเส้นใต้ตัวเอียง' ]           });       });   </ สคริปต์ >

เวลานี้คุณอีกครั้งเปิดหน้าเว็บเบราว์เซอร์ของคุณให้ดูด้านล่างแก้ไขนี้แสดงให้เห็นว่าคุณมีการใช้งานที่ประสบความสำเร็จ

ขั้นตอนที่สาม: รับและกำหนดเนื้อหาของบรรณาธิการ

/ * รับเนื้อหาบรรณาธิการ * /   var HTML =  UM . GetContent ();   var TXT =  UM . ยูเอ็ม . GetContentTxt ();    / * กำหนดเนื้อหาการแก้ไข * /   UM . setContent ( 'การตั้งค่าเนื้อหาของบรรณาธิการ. ' );