tiptap appmsg editor ดาวน์โหลด - tiptap appmsg editor ซอร์สโค้ดดาวน์โหลดแหล่งดาวน์โหลด

tiptap appmsg editor

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

TIPTAP-APPMSG-Editor

ตัวอย่างของตัวแก้ไขบัญชีสาธารณะ WeChat ที่สร้างขึ้นบน TIPTAP รองรับการคัดลอกตามประเภทไปยังแพลตฟอร์มสาธารณะ WeChat และสนับสนุนนักพัฒนาเพื่อพัฒนาไลบรารีสไตล์และไลบรารีเทมเพลตเป็นการแทรกเนื้อหา เช่น 135Editor, Yiban ฯลฯ

ตัวอย่างออนไลน์

Vite+Vue3 เวอร์ชัน

Vue-Tiptap-Appmsg-editor

รายการคะแนนฟังก์ชั่น

สไตล์ข้อความ (ขนาดตัวอักษร, สี, ไฮไลต์, ตัวหนา, ความสูงของเส้น ... )
รูปแบบข้อความที่ชัดเจน
เค้าโครงเนื้อหา (การจัดตำแหน่ง, ระยะห่าง, การเยื้อง, ลอย)
ประวัติ undo/redo
การแทรกรูปภาพ
เนื้อหาบล็อกรหัส
เนื้อหาวิดีโอ
เส้นแบ่ง
รายการที่สั่งซื้อ/ไม่ได้เรียงลำดับ
การเชื่อมโยงหลายมิติ
ภาพไฮเปอร์ลิงก์
แอปเพล็ต WeChat
การแทรกการแสดงออก
ข้อมูลจำเพาะสำหรับการพัฒนาไลบรารีสไตล์กราฟิก
แทรกรูปแบบกราฟิกและเทมเพลต
การคัดลอกคลิกเดียว
จำนวนคำ

อัปเดตอย่างต่อเนื่อง ...

ไดเรกทอรีไฟล์

 tiptap-appmsg-editorsrc
├─js
| ├─editor.js // tiptap编辑器实例
| ├─function.js // 编辑器功能实现
| ├─sidebar.js // 侧边栏实现
| ├─svg.js // svg图标插入
| ├─toolbar.js // 工具栏实现
├─images
|   ├─svg
|   ├─sprite
|   |   └emoji_sprite.png // 表情雪碧图
|   ├─icon
|   |  ├─icon-image-link.png // 图片超链接标识图
|   |  └icon-weapp-link.png // 小程序标识图
├─main.js
├─templates // 样式组件和内容模板
├─styles
|   ├─base.css
|   ├─editor.css  // 编辑器默认样式
|   ├─index.css // 页面主样式
|   └reset.css
├─plugins
|    ├─tabs // tab实现
|    ├─modal // 弹窗实现
|    ├─dropdown // 下拉菜单实现
|    ├─clickoutside // 点击外部关闭实现

บรรณาธิการที่กำหนดเอง

พัฒนาตัวแก้ไขสไตล์ที่กำหนดเองตามตัวอย่างนี้คุณต้องใส่ใจกับสไตล์เนื้อหา

เนื่องจากรูปแบบเริ่มต้นของเนื้อหาบทความมีอยู่เพื่อให้แน่ใจว่ารูปแบบต่อไปนี้มีอยู่ในพื้นที่แก้ไข TIPTAP และแถบด้านข้าง

. tiptap . ProseMirror {
  min-height : 960 px ;
  outline : none;
  color : rgba ( 0 , 0 , 0 , 0.9 );
  font-size : 17 px ;
  line-height : 1.6 ;
  text-align : justify;
}

. ProseMirror * {
  max-width : 100 % ;
  margin : 0 ;
  padding : 0 ;
  box-sizing : border-box !important ;
  word-wrap : break-word !important ;
}

. ProseMirror p {
  clear : both;
  min-height : 1 em ;
}

. ProseMirror > p {
  margin-top : 0 ;
  margin-bottom : 24 px ;
}

สำหรับสไตล์เนื้อหาเพิ่มเติมคุณสามารถดูไฟล์สไตล์เริ่มต้นของเนื้อหาบัญชีอย่างเป็นทางการ: src/styles/editor.css

การพัฒนาองค์ประกอบสไตล์

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

แท็กหลัก

ส่วน: คอนเทนเนอร์เนื้อหาส่วนประกอบช่วยให้สไตล์มีค่าสไตล์ทั้งหมด

P: ย่อหน้าข้อความเท่านั้นที่อนุญาตให้ใช้แบบข้อความและรูปแบบย่อหน้าอื่น ๆ เท่านั้น หากเนื้อหาข้อความไม่รวมอยู่ในแท็ก P มันจะถูกเพิ่มโดยอัตโนมัติหลังจากการแยกวิเคราะห์

ช่วง: คอนเทนเนอร์สไตล์ข้อความเฉพาะรูปแบบข้อความเช่นสี, ขนาดตัวอักษร, ฟอนต์-ครอบครัว ฯลฯ ได้รับอนุญาต

IMG: องค์ประกอบภาพอนุญาตค่าสไตล์ทั้งหมด

แท็กแท็ก

แท็กต่อไปนี้เป็นโหนดสไตล์แท็ก tiptap ซึ่งจะถูกเพิ่มโดยอัตโนมัติหลังจากเนื้อหาแทรกถูกแยกวิเคราะห์โดยไม่ต้องให้ความสนใจเพิ่มเติม

หากแทรกเนื้อหา

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
  </ p >
</ section >

ผลการแทรกจริง

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < u >
      < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
    </ u >
  </ p >
</ section >