tiptap appmsg editor

tiptap-appmsg-editor

基於tiptap 搭建的微信公眾號編輯器示例，支持排版後復製到微信公眾平台，支持開發者自己開發樣式庫、模板庫作為內容插入；如135Editor、壹伴等

在線示例

vite+vue3 版本

vue-tiptap-appmsg-editor

---

功能點羅列

• 文字樣式（字號、顏色、高亮、加粗、行高...）

• 清除文字樣式

• 內容排版（對齊、間距、縮進、浮動）

• 歷史記錄撤銷/重做

• 圖片插入

• 代碼塊內容

• 視頻內容

• 分割線

• 有序/無序列表

• 超鏈接

• 圖片超鏈接

• 微信小程序

• 表情插入

• 圖文樣式庫開發規範

• 插入圖文樣式與模板

• 一鍵複製使用

• 字數統計

持續更新...

文件目錄

 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

樣式組件開發

對於可用的、靈活的、自適應組件，需要你按照一定的規範開發

核心標籤

section：組件內容容器，允許style 所有樣式值

p：文字段落，僅允許text-align 等段落樣式，若文字內容未包含於p 標籤，則解析後自動追加

span：文字樣式容器，僅允許color、font-size、font-family 等文字樣式

img：圖片元素，允許style 所有樣式值

標記標籤

以下標籤為tiptap 標記樣式的node，在插入內容被解析後自動追加，無需額外關注

如插入內容

 < 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 >

strong：加粗node

em：斜體node

u：下劃線node

更合理的組件建議

內容塊(section)之間距離：推薦margin-top/margin-bottom 邊距（段前距/段後距）

文字行距離：推薦line-height 行高（行間距）

使用em 單位替代px 單位，如line-height 值，更加靈活自適應

使用br 實現段落內文字手動換行

借鑒樣式

可以參考其他公眾號編輯平台的樣式，如135Editor、壹伴等

壹伴公眾號樣式平台：https://yiban.io/style_center/0_1_0

Relations

tiptap documentation

tiptap-extension-resizable

tiptap-extension-image

tiptap-extension-video

tiptap-extension-iframe

tiptap-extension-font-size

tiptap-extension-link

tiptap-extension-trailing-node

tiptap-extension-image-link

tiptap-extension-bullet-list

tiptap-extension-ordered-list

tiptap-extension-line-height

tiptap-extension-float

tiptap-extension-margin