tiptap appmsg editor

tiptap-appmsg-editor

Tiptapに基づいて構築されたWeChatパブリックアカウントエディターの例は、WeChatパブリックプラットフォームへのタイプベースのコピーをサポートし、開発者をサポートして、コンテンツ挿入としてスタイルライブラリとテンプレートライブラリを開発します。 135編集者、Yibanなど

オンラインの例

Vite+Vue3バージョン

vue-tiptap-appmsg-editor

---

関数ポイントのリスト

• テキストスタイル（フォントサイズ、色、ハイライト、太字、ラインの高さ...）

• クリアテキストスタイル

• コンテンツレイアウト（アライメント、間隔、インデント、フローティング）

• 履歴を元に戻す/やり直します

• 画像挿入

• コードブロックコンテンツ

• ビデオコンテンツ

• 分割線

• 注文/順序付けされていないリスト

• ハイパーリンク

• 写真ハイパーリンク

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

強い：太字ノード

EM：イタリックノード

U：下線ノード

より合理的なコンポーネントの提案

コンテンツブロック間の距離：推奨されるマージントップ/マージンボトムマージン（セクションフロント/セクションバック距離）

テキストラインの距離：推奨されるラインハイイトラインの高さ（ライン間隔）

より柔軟で適応性のあるラインハイト値などのPXユニットの代わりにEMユニットを使用します

BRを使用して、段落でテキストを手動でラップします

参照スタイル

135編集者、Yibanなど、他の公式アカウント編集プラットフォームのスタイルを参照できます。

Yiban公式アカウントスタイルプラットフォーム：https：//yiban.io/style_center/0_1_0

関係

Tiptapドキュメント

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