Téléchargement tiptap appmsg editor - tiptap appmsg editor Source Code Télécharger

tiptap appmsg editor

Autres ressources

1.0.0

Télécharger

éditeur de Tiptap-Appmsg

Exemple d'éditeur de compte public WeChat construit sur TIPTAP prend en charge la copie basée sur les types sur la plate-forme publique WeChat, et prend en charge les développeurs pour développer des bibliothèques de style et des bibliothèques de modèles en tant qu'insertion de contenu; comme 135editor, yiban, etc.

Exemples en ligne

VITE + VUE3 Version

VUE-TIPTAP-APPMSG-Editor

Liste des points de fonction

Style de texte (taille de police, couleur, reflet, gras, hauteur de ligne ...)
Style de texte clair
Disposition du contenu (alignement, espacement, indentation, flottant)
HISTOIRE UNDO / REMOPER
Insertion d'images
Contenu du bloc de code
Contenu vidéo
Ligne de partage
Liste commandée / non ordonnée
Lien hypertexte
Hyperlien d'image
Applet WeChat
Insertion d'expression
Spécifications pour le développement de la bibliothèque de style graphique
Insérer des styles et des modèles graphiques
Copie en un clic
Nombre de mots

Mise à jour continue ...

Répertoire de fichiers

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

Éditeur personnalisé

Développer un éditeur de style personnalisé en fonction de cet exemple, vous devez faire attention aux styles de contenu

Étant donné que le style par défaut du contenu de l'article existe, afin de s'assurer que les styles suivants existent dans la zone d'édition et la barre latérale 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 ;
}

Pour plus de styles de contenu, vous pouvez voir le fichier de style par défaut du contenu du compte officiel: src/styles/editor.css

Développement de composants de style

Pour les composants adaptatifs disponibles, flexibles et disponibles, vous devez les développer en fonction de certaines spécifications

Balises de base

Section: Conteneur de contenu du composant, permettant au style toutes les valeurs de style

P: Les paragraphes de texte, seuls les styles de texte et d'autres styles de paragraphe sont autorisés. Si le contenu texte n'est pas inclus dans la balise P, il sera automatiquement ajouté après l'analyse.

Span: Container de style texte, seuls les styles de texte tels que la couleur, la taille de la police, la famille de police, etc. sont autorisés.

IMG: élément d'image, permettez toutes les valeurs de style

Balises de balise

La balise suivante est un nœud de style balise TIPTAP, qui est automatiquement ajouté après l'analyse du contenu d'insertion, sans attention supplémentaire

Si insérer le contenu

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

Résultat d'insertion réel

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