Rich Text EditorのHTMLタブで入力したマークアップがXHTMLに変換されないようにする

samatsu 5/14/2019 1776 N/A Sitecore XP

Sitecoreに付属するRich Text Editorは、Rich Text EditorのDesignタブや、HTMLタブで入力したアークアップをxhtmlとして有効なフォーマットに自動変換してくれます。

例えば、次のHTMLをRich Text EditorのHTMLタブから直接入力します。

<article>
<a href="http://www.google.co.jp">
<h3>サンプル見出し</h3>
<p><img src="sample.jpg" alt="html5">HTML5としては有効な形式</p>
</a>
</article>

DESIGNタブをクリックして、再びHTMLタブをクリックすると、次のようなXHTMLと互換の形式にご丁寧に変換してくれます。<a>タグの中にブロック要素があったのですが、<a>タグが細かく分割され、<h3>や<p>タグなどの各ブロック要素に<a>タグが追加されていることが確認できます。ついでにimgタグにも自己クローズタグが追加されています。

<article>
<a href="http://www.google.co.jp">
</a>
<h3><a href="http://www.google.co.jp">サンプル見出し</a></h3>
<p><a href="http://www.google.co.jp"><img src="sample.jpg" alt="html5" />HTML5としては有効な形式</a></p>
</article>

スタイルシートの設定にも依存しますが、最終的にブラウザーに表示される形式に違いはないので、問題がないといえば問題はありません。何事も気にしないのが一番です。

そして、<a>タグはインライン要素なので、HTML4やxhtmlの仕様としては、インライン要素である<a>タグにブロック要素を含められないのでこの変換はある意味適切といえます。

ただ、html5の場合、<a>タグの子要素としてブロックレベルの要素を配置できるんですよね。たしか。。。。

ということで、Rich Text EditorのHTMLタブで入力したマークアップの内容をxhtmlに自動変換をさせないようにする方法を記載します。

動作確認は Sitecore 9.1 の環境になります。

1. Rich Text EditorでXHTMLへの返還を無効化する方法

Sitecoreをインストールした、編集サーバーの次のパスにあるファイルをメモ長などで開きます。

<インストールフォルダー>\sitecore\shell\Controls\Rich Text Editor\EditorPage.aspx

<form></form>で囲まれた </form>クローズタグの直前に、次にマークアップを追加します。

<script runat="server">
  protected override void OnLoad(EventArgs e)
  {
    Editor.DisableFilter(EditorFilters.ConvertToXhtml);
    base.OnLoad(e);
  }
</script>

ファイルを保存します。

実際にRich Text Editorを起動し、HTMLタブで入力した内容が変換されなくなるはずです。

Sitecore は 内部的に TelerikのRadEditorをRichText Editor として使用しています。コードの中で、下記ページに用意されているオプションである、ConvertToXhtmlを無効化して、XHTMLへの自動変換をしないようにしています。

https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/content-filters

この設定を使用するとことで 意図しないxhtml形式のマークアップに変換されるのを回避できます。