投稿の書式設定: リッチ テキスト エディター、画像、コード ブロック

概要

Discussions のすべてのトピックとすべての返信は、同じ軽量なリッチ テキスト エディターで作成します。このエディターには、強調、リスト、引用、コード ブロック、リンク、インライン画像など、フォーラムに必要な書式が用意されていますが、スレッドをページ レイアウトの作業に変えてしまうような機能はありません。テキストは HTML としてサイトの Discussions Topics リストと Discussions Posts リストの Body (本文) 列に保存され、保存時と表示時の両方で許可リスト方式のサニタイザーを通過するため、投稿にスクリプト、スタイル、埋め込みフレームが含まれることはありません。

この記事では、ツール バー、キーボード ショートカット、リンク、引用とコード ブロック、画像を挿入する 3 つの方法、そしてサニタイザーが保持するものと削除するものについて説明します。

エディターが表示される場所

• New topic (新しいトピック) フォームでは、タイトルの下の Describe the topic or question (トピックまたは質問を説明してください) フィールドとして表示されます。トピックの本文は省略可能で、必須なのはタイトルだけです。
• トピックの末尾では、プレースホルダー Write a reply... (返信を書く...) が表示された返信ボックスとして表示されます。Post (投稿) ボタンは、ボックスが空の間は無効で、テキストまたは画像が入力されると有効になります。
• 任意の返信の下で Reply (返信) をクリックした後に表示されます。このときエディターには、Reply to (返信先) に続けて投稿者の名前が表示され、エディターが空の間はその Post ボタンが無効になります。
• 自分が書いた返信で Edit (編集) をクリックしたときに表示されます (モデレーターはどの返信でも編集できます)。既存のテキストがエディターに読み込まれ、Save (保存) で新しいバージョンが保存されます。エディターが空の間は Save が無効です。
• トピックで Edit (編集) をクリックしたときに表示されます。作成者は、トピックがロックされていない間は編集でき、モデレーターはどのトピックでも編集できます。タイトル、カテゴリ (ボードにカテゴリがある場合)、本文はその場で変更でき、本文には同じエディターが使われます。Save または Cancel (キャンセル) で編集を終了します。

ツール バー

編集領域の上にあるツール バーには 11 個のボタンがあります。ボタンにポインターを合わせると、その名前と、ある場合はショートカットが表示されます。

ツール バーのボタンをクリックしてもテキストからフォーカスは外れないため、ボタンをクリックしてそのまま入力を続けられます。画像のアップロード中は、ツール バーの末尾に小さなスピナーが表示されます。

キーボード ショートカット

その他の組み合わせ (たとえば、元に戻す Ctrl+Z や書式なしで貼り付ける Ctrl+Shift+V) は、他の編集可能なフィールドと同様にブラウザーが処理します。

リンク

1. リンクにするテキストを選択し (省略可能)、Link (Ctrl+K) をクリックします。
2. Link address にアドレスを入力または貼り付け、Insert (挿入) をクリックするか Enter キーを押します。

テキストを選択していた場合は、そのテキストがリンクになります。何も選択していなかった場合は、アドレス自体がリンク テキストとして挿入されます。プロトコルなしで入力したアドレス (vitextra.com/support) は https://vitextra.com/support として保存されます。エディターは http:、https:、mailto: およびサイト相対 (/sites/...) のアドレスを受け付け、すべてのリンクは rel="noopener noreferrer" 付きで書き込まれます。

引用とコード ブロック

Quote は、カーソルがある段落をブロック引用に変換します。左側に色付きのバーが付き、テキストはやや控えめな色で表示されます。返信先のメッセージやドキュメントの抜粋を引用するのに便利です。

Code block は、段落を整形済みブロックに変換します。等幅フォント (Windows では Consolas)、網掛けの背景が適用され、スペースと改行がそのまま保持されます。長い行は水平スクロール バーを表示する代わりに折り返されるため、スマートフォンでもブロックが読みやすいままです。PowerShell、スクリプト、構成の断片、ログの抜粋など、インデントが重要なあらゆる内容に使用してください。

引用やコード ブロックから抜けるには、その中にカーソルを置いて Clear formatting をクリックします。ブロックが通常の段落に戻ります。または、ほとんどのエディターと同様に、ブロックの末尾で Enter キーを 2 回押します。

画像

テキスト内の任意の場所に、次の 3 つの方法で画像を配置できます。

• ツール バーの Insert image — ファイル選択ダイアログが開きます。複数の画像を一度に選択できます。
• 貼り付け — 別のアプリケーションからスクリーンショットや画像をコピーし、エディターで Ctrl+V キーを押します。
• ドラッグ アンド ドロップ — コンピューター上の 1 つ以上の画像ファイルを編集領域にドロップします。

各画像は、サイトの Discussions Assets ドキュメント ライブラリ内の、現在の年の名前が付いたフォルダー (2026、2027、…) に、時刻ベースのプレフィックスで始まる一意のファイル名でアップロードされます。そのため、2 人のユーザーが screenshot.png をアップロードしても互いに上書きすることはありません。その後、エディターはカーソル位置に画像を挿入し、元のファイル名を代替テキストとして設定します。画像は元のサイズで表示され、投稿の幅より広い場合は幅に合わせて縮小されます。

その他に、知っておくと役立つ点をいくつか挙げます。

• エディター内で画像のサイズを変更することはできません。小さく表示したい場合は、アップロード前に画像をトリミングまたは縮小してください。
• 投稿内の画像は、Discussions Assets ライブラリを閲覧できるすべてのユーザーに表示されます。既定では、他の Discussions リストと同様にサイトのアクセス許可を継承します。
• 返信またはトピックを削除すると、そこで使用していた画像も Discussions Assets ライブラリから削除されます。トピックを削除すると、その返信と返信内の画像も削除されます。このクリーンアップはベスト エフォートで、このライブラリのファイルのみが対象です。また、編集中に投稿から取り除いた画像はライブラリに残るため、サイトの所有者はいつでもライブラリをクリーンアップできます。
• このライブラリは他のリストと一緒に作成されます。掲示板が以前のプレビュー ビルドで作成されたものである場合、モデレーター (リストの管理 アクセス許可を持つユーザー) が Web パーツのあるページを (編集モードかどうかにかかわらず) 開くと、不足しているリストが追加されます。それまでは、画像ボタンがエラーを報告します。「KB10431. 画像または添付ファイルをアップロードできない」を参照してください。

他のアプリケーションからの貼り付け

Word、Outlook、Web ページ、Teams などから書式付きのコンテンツを貼り付けると、エディターはサニタイザーが許可する構造 (段落、太字と斜体、リスト、リンク、表、見出し) を保持し、それ以外 (フォント、色、サイズ、配置、インライン スタイル、クラス) は黙って破棄します。貼り付けた HTML に外部リンクとして含まれる画像はそのアドレスを保持し、ファイルとして貼り付けた画像は前述のとおりアップロードされます。プレーン テキストを貼り付けると、プレーン テキストとして挿入されます。

サニタイザーが保持するもの

同じ許可リストが投稿の保存時と表示時に適用されるため、リスト フォームから書き込まれたコンテンツや、クラシック掲示板からインポートされたコンテンツも同様にクリーンアップされます。

それ以外はすべて削除されます。

• script、style、iframe、object、embed、svg、math、template、noscript は、HTML コメントと同様に、その内容ごと削除されます。
• その他のタグ (たとえば font、video、form、input) は削除されますが、そのテキストは保持されます。
• 上記以外のすべての属性 (style、class、id、onclick およびその他のイベント ハンドラー) は破棄されます。
• 別のスキーム (javascript:、リンクの場合の data:、file:) を使用するアドレスを持つリンクや画像は、その属性を失います。

残ったすべての a タグには rel="noopener noreferrer" が付与されます。style は決して保持されないため、文字色、背景色、フォント ファミリ、フォント サイズ、配置は、ブラウザー拡張機能で入力したものでもドキュメントから貼り付けたものでも残りません。これは、投稿の見た目を統一し、サイトのテーマに従わせるための意図的な設計です。