---
title: "RTE出力のHTMLラッピングを制御する"
slug: "control-the-html-wrapping-for-rte-output"
abstract: "RTEはスコープスタイル用に出力をck-content divにラップします。disableContentWrap:trueに設定して削除できますが、その場合は自分でスタイリングを担当しなければなりません。"
---
# RTE出力のHTMLラッピングを制御する

ページビルダーでは、[リッチテキストエディタ](https://doc.sitecore.com/sai/en/users/sitecoreai/add-rich-text-to-a-page.html) (RTE)が専用のコンテンツスタイルシートに依存し、編集・公開されたコンテンツが正しくレンダリングされるようにしています。一部の機能には、生成するHTMLのスタイル化のための追加のCSSが含まれます。例えば:

-   画像および画像キャプション
-   ブロッククォート
-   リストとリスト間隔
-   表
-   メディアのプレゼンテーションと連携

これらのコンテンツスタイルがない場合:

-   画像キャプションやブロッククォートは期待されるスタイルを失うかもしれません。
-   タイポグラフィ、間隔、インラインの特徴スタイルが、著者がエディターで見るものと一致しないことがあります。
-   プレビューや公開された成果物は編集体験とは異なる場合があります。

これらのスタイルをページの他の部分から隔離し、一貫したレンダリングを確保するために、生成されたHTMLはck-contentクラスを用いてラッパーに包まれ、必要なフォーマットとレンダリングルールを適用します。

サイト固有エディタープロファイルで特定のサイトの自動ラッパーを無効にしたい場合は、以下が必要です:

-   RTE出力の周りに自分のHTMLマークアップが、先祖チェーンのどこかでck-contentクラスを使用しているか確認してください。
-   または、サイトのスタイルシートに同等のCSSを提供し、content-styles.cssで通常提供されているものをすべて置き換え.ck-content。同等のスタイリングを自分で実装する際は、使用するすべてのCKEditor機能(画像、ブロック引用符、表など)がプレビューと公開サイトの両方で正しくレンダリングされているかを必ず確認してください。

## デフォルトのラッパーの理解

ページビルダーは以下のスタイルシートからコンテンツスタイルを読み込みます: https://edge-platform.sitecorecloud.io/v1/files//styles/content-styles.css?sitecoreContextId=<ContextId>

このスタイルシートには、CKEditorの推奨に従い、.ck-contentクラスでスコープ化されたエディターのコンテンツスタイルが含まれています。

-   すべてのルールは、アプリケーション全体への漏れを防ぐために .ck-content で前付けされています。
-   編集者と公開コンテンツの両方に同じスタイルシートが使われているので、著者が見るものはラッパーが存在すれば最終サイトと一致します。

スタイルが確実に適用されるように、RTEからレンダリングされたHTMLは以下のck-contentクラスを持つコンテナにラップされます。

<div class="ck-content">
 <!-- RTE output -->
</div>

このラッパー:

-   コンテンツスタイルをRTE出力にのみ適用するようにスコープ化します。
-   画像、キャプション、ブロッククォート、表、タイポグラフィなどの特徴の正確なレンダリングを保証します。
-   CKEditorのスタイルがページの他の部分に影響するのを防ぎます。

## 親ck-contentラッパーを使いましょう

ck.contentラッパーを避けつつ組み込みのコンテンツスタイルを使いたい場合は、RTE出力の親要素にck-contentクラスを適用できます。親要素にすでにOldクラスck-contentがある場合は、Page Builderはフィールド値の周りに追加のラッパーを追加しません。これにより、マークアップ構造(例えばコンポーネントレベルやバリアントレベル)をコントロールでき、共有content-styles.cssルールの恩恵を受けながら、スコープが.ck-content。

### カスタム親ラッパーの例(追加のラッパーなし)

コンポーネントマークアップ:

<div class="my-rich-text ck-content">
 <!-- RTE field output is rendered here without an additional ck-content wrapper -->
 {{ rteFieldValue }}
</div>

公開サイトでの効果的な成果:

<div class="my-rich-text ck-content">
 <p>Some rich text with images, lists, etc.</p>
</div>

親要素をck-contentに提供しない場合、ページビルダーはデフォルトで自動的にラッパーを追加します:

<div class="my-rich-text">
 <div class="ck-content">
 <p>Some rich text with images, lists, etc.</p>
 </div>
</div>

どちらの方法でも、コンテンツスタイルが正しく適用されることを保証します。主な違いは、あなたとページビルダーのどちらがラッパー要素を制御するかです。

## サイトのラッパーを無効にしてください

もしck-contentラッパーを回避しつつもCKEditor提供のスタイルに頼る場合は、content-styles.cssのエディターのコンテンツルールをコピーして自分のセレクターに適応させる必要があります。これを行わないと、画像キャプションやブロック引用などの機能が、編集者と公開されたサイトの間でスタイルがなかったり一貫性がなかったりする可能性が高いです。

RTEが追加の <div class="ck-content">...</div> ラッパーを追加しないように、disableContentWrapをtrueに設定したRTEツールバープロファイルを作成してください。例えば:

{
 "toolbar": { "items": "bold", "italic" },
 "disableContentWrap": true
}

disableContentWrapがtrueに設定されている場合、RTEは自動ck-contentラッパーなしでコンテンツを出力します。つまり、すべてのコンテンツスタイリングルールはRTEで設定されたものではなく、あなたのサイトから引き継がれ、スペース、タイポグラフィ、リスト、表、メディアのレンダリングが乱れたり不一致になったりすることがあります。