tiptap appmsg editor

Tiptap-Appmsg-Eduitor

Beispiel des WeChat Public Account Editors, das auf Tiptap basiert, unterstützt das typische Kopieren auf der WeChat Public Platform und unterstützt Entwickler bei der Entwicklung von Stilbibliotheken und Vorlagenbibliotheken als Inhaltsinsertion. wie 135Editor, Yiban usw.

Online -Beispiele

VITE+VUE3 Version

VUE-TIPTAP-APPMSG-EDOR

---

Liste der Funktionspunkte

• Textstil (Schriftgröße, Farbe, Highlight, Fettdruck, Linienhöhe ...)

• Klarer Textstil

• Inhaltslayout (Ausrichtung, Abstand, Eindrückung, schwebend)

• Geschichte rückgängig/wiederher

• Bildinsertion

• Code -Block -Inhalt

• Videoinhalt

• Trennlinie

• Bestellte/ungeordnete Liste

• Hyperlink

• Bildhyperlink

• Wechat -Applet

• Ausdrucksinsertion

• Spezifikationen für die Entwicklung der Bibliothek für grafische Stile

• Fügen Sie Grafikstile und Vorlagen ein

• Ein Klickkopieren

• Wortanzahl

Kontinuierliches Update ...

Dateiverzeichnis

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

Benutzerdefinierter Herausgeber

Entwickeln Sie einen benutzerdefinierten Style -Editor basierend auf diesem Beispiel. Sie müssen auf Inhaltsstile achten

Da der Standardstil des Artikelsinhalts vorhanden ist, um sicherzustellen

. 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 ;
}

Weitere Inhaltsstile finden Sie in der Standardstildatei des offiziellen Kontoinhalts: src/styles/editor.css

Stilkomponentenentwicklung

Für verfügbare, flexible, adaptive Komponenten müssen Sie sie nach bestimmten Spezifikationen entwickeln

Kern -Tags

Abschnitt: Komponentinhaltsbehälter, der Stil aller Stilwerte ermöglicht

P: Textabsätze, nur Text-Align und andere Absätze sind zulässig. Wenn der Textinhalt nicht im P -Tag enthalten ist, wird er nach der Parsen automatisch hinzugefügt.

Span: Textstil-Behälter, nur Textstile wie Farbe, Schriftgröße, Schriftfamilie usw. sind erlaubt.

IMG: Bildelement, alle Stilwerte zulassen

Tags -Tags

Das folgende Tag ist ein Zehenspitzen -Tag -Style -Knoten, der automatisch nach dem Analyse des Einfügungsinhalts ohne zusätzliche Aufmerksamkeit hinzugefügt wird

Wenn Inhalte einfügen

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

Tatsächliches Einfügen Ergebnis

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

Stark: Fettdruck

EM: Kursiv Knoten

U: Unterstreichung des Knotens

Angemessenere Komponentenvorschläge

Abstand zwischen Inhaltsblöcken: Empfohlener Margin-Rand (Rand-Rand-Bottom-Rand

Textlinienentfernung: Empfohlene Linienhöhe (Linienabstand)

Verwenden Sie EM-Einheiten anstelle von PX-Einheiten, wie z.

Verwenden Sie BR, um den Text manuell in Absätze zu wickeln

Referenzstile

Sie können sich auf die Stile anderer offizieller Account -Bearbeitungsplattformen wie 135Editor, Yiban usw. beziehen.

Yiban offizielle Kontostilplattform: https://yiban.io/style_center/0_1_0

Beziehungen

Zehenspitzendokumentation

Zehenspitzen-Extensionsanlagen

Zehenspitzenverlängerung

Tiptap-Extension-video

Zehenspitzen-Extension-Unframe

Tiptap-Extension-Font-Größe

Zehenspitzenlink

Tiptap-Extasion-Tailing-Node

Zehenspitzenlink

Zehenspitzenliste

Zehenspitzenliste

Zehenspitzen-Extensionslinie-Höhe

Zehenspitzen-Extasionsfloat

Zehenspitzenmargin