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

pubishページ

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

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

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

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

使用：wangEditor プラグイン。

手順：

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

---

チャンネルリスト

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

手順：

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

---

カバー設定

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

手順：

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

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

データ収集と保存

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

手順：

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