Kyle Chen's Blog

Action speaks louder than Words

0%

【ArticleHub Project ノート】03.Publishページの開発

https://github.com/KyleAndKelly/ArticleHub

pubishページ

リッチテキストエディター

リッチテキスト:スタイルや多様なフォーマットを含むテキストで、フロントエンドではタグとインラインスタイルを組み合わせて実現される。

リッチテキストエディター:リッチテキストコンテンツを作成するためのコンテナ。

目標:記事投稿ページにリッチテキストエディターを統合する。

使用wangEditor プラグイン。

手順

  1. CSS を導入してスタイルを定義。
  2. HTML 構造を定義。
  3. JS を導入してエディターを作成。
  4. 内容変更を監視し、隠しテキストエリアに保存(後でデータ収集しやすいように)。

image.png


チャンネルリスト

目標:チャンネルリストを表示し、ユーザーが選択できるようにする。

手順

  1. チャンネルリストのデータを取得する。
  2. ドロップダウンメニューに表示する。

image-20241124112044365


カバー設定

目標:記事のカバーを設定する。

手順

  1. タグ構造とスタイルを準備。
  2. ファイルを選択して FormData に保存。
  3. 画像を個別にアップロードし、画像の URL アドレスを取得。
  4. プレビューし、img タグで表示(「+」アイコンのアップロードタグを非表示にする)。

注意:画像の URL アドレスは一時的に img タグに保存され、記事との関連付けはまだ行われていない。

image.png

データ収集と保存

目標:記事内容を収集し、保存する。

手順

  1. form-serialize プラグインを使用してフォームデータを収集する。
  2. axios を使用してサーバーに送信し、保存する。
  3. Alert 警告フレームを呼び出して結果をユーザーにフィードバック。
  4. フォームをリセットし、リストページにリダイレクトする。
    image.png