← すべてのドキュメント

Shadow DOM

独自の Web コンポーネントやマイクロフロントエンドなどの shadow root 内で、エディターを動かせます。ページのスタイルシートは shadow root に届かないため、そのままではスタイルが付きません。このプラグインは、エディターを含む shadow root にエディター自身のスタイルシートをコピーし、後からプラグインが追加するものも継続してコピーします。

カスタム要素の shadow root 内のエディター。スタイル付きのツールバーと、その横に開いた Insert Link ダイアログに URL、Text、Open in new tab、Cancel、Insert が表示されています
カスタム要素の shadow root 内に作成したエディターと、開いた Insert Link ダイアログです。どちらにもスタイルが適用されています。

有効にする

この機能は shadowdom.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。通常どおりページにエディターのスタイルシートを読み込み、shadow root 内の要素にエディターを作成すれば、残りはプラグインが処理します。ボタンはありません。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<note-editor id="host"></note-editor>
<script>
class NoteEditor extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = '<div class="box"><p>Text inside a <b>shadow root</b>.</p></div>';
    this.editor = new RichTextEditor(root.querySelector(".box"), { toolbar: "basic", height: "220px" });
  }
}
customElements.define("note-editor", NoteEditor);
</script>

rte-webcomponent.js の既成の <rich-text-editor> 要素も、同じプラグインを使います。shadow 属性を付けると、専用の shadow root 内にエディターをマウントします。

<script src="/richtexteditor/rte-webcomponent.js"></script>
<rich-text-editor shadow toolbar="basic" height="220px"><p>Hello</p></rich-text-editor>

shadowdom.js が読み込まれていない場合、この要素はコンソールに警告を出し、スタイルなしで描画する代わりに light DOM にとどまります。

オプション

オプション既定値動作
shadowStyleAdoptiontrueエディターのスタイルシートを shadow root にコピーします。false でコピーを無効にします。
shadowStyleSourcesnull独自のスキン上書き用に shadow root に追加するスタイルシート URL です。文字列または配列で指定します。

コピーするもの

  • rte.js の読み込み元フォルダーから配信する <link rel="stylesheet"> 要素、またはエディターのファイル名（rte_theme、rte_mobile、richtexteditor_content、richtexteditor_preview、aitoolkit）を持つものです。同じ URL の新しい <link> 要素として作成するため、ブラウザーのキャッシュから取得できます。
  • id が rte- または __rte で始まる <style> 要素（プラグインのスタイル）と、id がなく CSS にエディターのセレクターを含む <style> 要素です。後者は、Vite などのバンドラーがインポートしたテーマを挿入する方法です。
  • ページが document.adoptedStyleSheets で採用したスタイルシートです。

それ以外のページのスタイルはコピーせず、コンポーネントのカプセル化を保ちます。各コピーには data-rte-adopted="1" が付きます。上記のテストでは、テーマ、AI Toolkit のスタイルシート、プラグインの <style> 要素の合計 9 個がコピーされ、ツールバーの高さは 41 ピクセルでした。shadowStyleAdoption: false では、スタイルのないボタンが縦に並び、高さは 7,561 ピクセルになりました。

ページの <head> を監視するため、起動後にプラグインのパネルを初めて開いたときに追加されるスタイルもコピーします。ダイアログとメニューはエディターの要素内に作成するため、shadow root 内でコピーしたスタイルを使用します。

API

  • editor.isInShadowDom() — shadow root 内にある場合は true を返します。
  • editor.getShadowRoot() — その shadow root、または null を返します。
  • editor.getAdoptedStyleCount() — コピーしたスタイルシート数を返します（上記では 9）。
  • editor.adoptEditorStyles(target) — エディターのスタイルシートを別のルートにコピーします。プレビューを表示する別の shadow root などに使えます。引数なしではエディター自身の shadow root を使います。

注意点

  • 編集領域は iframe なので、文書自体の CSS は通常どおりそこに読み込みます（contentCssUrl）。このプラグインの対象はツールバー、メニュー、ダイアログだけです。
  • shadow root の外では何もせず、監視も作成しません。
  • ページのスタイルシート内にある独自の外観の上書きは shadow root に届きません。shadowStyleSources に列挙するか、自分で shadow root 内に配置してください。
  • 保存する HTML には影響しません。getHTMLCode() は <p>Text inside a <b>shadow root</b>.</p> を返しました。

関連情報：クイックスタート、フォームの検証。