Download tiptap appmsg editor - Unduh Kode Sumber Sumber tiptap appmsg editor

tiptap appmsg editor

Sumber daya lainnya

1.0.0

Unduh

Tippap-Appmsg-Editor

Contoh Editor Akun Publik WeChat yang dibangun di atas Tiptap mendukung penyalinan berbasis tipe ke platform publik WeChat, dan mendukung pengembang untuk mengembangkan perpustakaan gaya dan perpustakaan templat sebagai penyisipan konten; seperti 135Editor, Yiban, dll.

Contoh online

Versi Vite+Vue3

VUE-TIPTAP-APPMSG-editor

Daftar Poin Fungsi

Gaya teks (ukuran font, warna, highlight, tebal, tinggi garis ...)
Gaya teks yang jelas
Tata letak konten (penyelarasan, jarak, lekukan, mengambang)
Sejarah Undo/Redo
Penyisipan gambar
Konten Blok Kode
Konten video
Garis pembagian
Daftar yang dipesan/tidak dipesan
Hyperlink
Gambar hyperlink
Applet WeChat
Penyisipan ekspresi
Spesifikasi untuk Pengembangan Perpustakaan Gaya Grafis
Masukkan gaya dan templat grafis
Menyalin satu klik
Jumlah kata

Pembaruan Berkelanjutan ...

Direktori File

 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 // 点击外部关闭实现

Editor Kustom

Kembangkan editor gaya khusus berdasarkan contoh ini, Anda perlu memperhatikan gaya konten

Karena gaya default konten artikel ada, untuk memastikan bahwa gaya berikut ada di area pengeditan dan sidebar 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 ;
}

Untuk gaya konten lainnya, Anda dapat melihat file gaya default konten akun resmi: src/styles/editor.css

Pengembangan Komponen Gaya

Untuk komponen yang tersedia, fleksibel, adaptif, Anda perlu mengembangkannya sesuai dengan spesifikasi tertentu

Tag inti

Bagian: Wadah Konten Komponen, Mengizinkan Gaya Semua Nilai Gaya

P: Paragraf Teks, hanya Teks-Align dan gaya paragraf lainnya yang diizinkan. Jika konten teks tidak termasuk dalam tag P, itu akan ditambahkan secara otomatis setelah penguraian.

SPAN: Wadah gaya teks, hanya gaya teks seperti warna, ukuran font, font-family, dll. Diizinkan.

IMG: Elemen Gambar, Izinkan Semua Nilai Gaya

Tag tag

Tag berikut adalah simpul gaya tag Tiptap, yang secara otomatis ditambahkan setelah konten insert diuraikan, tanpa perhatian tambahan

Jika menyisipkan konten

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

Hasil penyisipan yang sebenarnya

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