← すべてのドキュメント

スタイルのインポート

サイトで使っている CSS クラスを、エディターのスタイルメニューに追加します。importStyles: true を設定すると、ページのスタイルシートから p.lede や img.rounded などのクラスセレクターを探し、段落、インライン、画像、リンクの各メニューに追加します。作成者は仮のスタイルではなく、サイトのデザインシステムのクラスを選べます。

段落スタイルメニューを開いたエディター。Lede、Pull Quote、Highlight、Note、Section Title が並んでいます
サイトのスタイルシートから作成した段落スタイルメニューです（importStylesReplace: true）。

有効にする

この機能は importstyles.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。importStyles: true を設定するまで無効です。専用ボタンはなく、メインツールバーの paragraphstyle と inlinestyle、画像ツールバーの imagestyle、リンクツールバーの linkstyle のメニューに項目を追加します。

この例のスタイルシートです。

p.lede { font-size: 1.25em; color: #334155; }
blockquote.pull-quote { border-left: 4px solid #2563eb; padding-left: 12px; font-style: italic; }
span.badge { background: #fde68a; padding: 0 4px; border-radius: 4px; }
.highlight { background: #dcfce7; }
img.rounded { border-radius: 12px; }
a.cta { background: #2563eb; color: #fff; padding: 4px 10px; border-radius: 6px; }
article .card p.note:hover { color: #0f766e; }
p.lede.wide { max-width: none; }
.js-toggle { display: none; }
@media (min-width: 600px) { h2.section-title { letter-spacing: .02em; } }
<link rel="stylesheet" href="site.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Intro paragraph that should become a lede.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  contentCssUrl: "site.css",   // so the classes also look right inside the editor
  importStyles: true
});
</script>

このスタイルシートから次のメニューが作成されました。editor.getImportedStyles() は applied: { imageStyles: 1, linkStyles: 1, inlineStyles: 2, paragraphStyles: 5 } を報告しました。

メニューインポートした項目
段落スタイルLede、Pull Quote、Highlight、Note、Section Title
インラインスタイルBadge、Highlight
画像スタイルRounded
リンクスタイルCta

最初の段落で Lede を選ぶと、<p class="lede">Intro paragraph that should become a lede.</p> として保存されました。

クラスの分類方法

  • セレクターの最後の部分だけを使います。article .card p.note:hover では、段落用に note を取得します。疑似クラスと属性フィルターは無視します。
  • クラスの前の要素でメニューを決めます。img、figure、picture は画像スタイル、a はリンクスタイル、span、strong、b、em、i、code、mark、small、sub、sup、abbr、q、cite はインラインスタイル、p、div、見出し、blockquote、リスト、pre、セクション、テーブルセルは段落スタイルになります。要素のないクラス（.highlight）は、インラインと段落の両方に追加します。ほかの要素はスキップします。
  • 1 つの要素に 2 つのクラスがあるセレクター（p.lede.wide）は、単独のクラスでは一致しないためスキップします。
  • @media と @supports 内のクラスも検出します。
  • ラベルはクラス名から作成します。pull-quote は「Pull Quote」になります。先頭の my-cls-、u-、c- は除きます。
  • エディター自体のスタイルシートは読み取りません。/richtexteditor/ フォルダー内のものと、エディターが挿入したスタイルが対象外です。

オプション

オプション既定値動作
importStylesfalseインポートを有効にします。
importStylesSheetsnull（読み取り可能なすべてのスタイルシート）読み取るスタイルシートです。URL に照合する文字列（"site.css"）、RegExp（/theme/）、または CSSStyleSheet を受け取って true か false を返す関数を指定します。
importStylesExclude/^(rte[-_]|ck[-_]|cke[-_]|mce[-_]|tox[-_]|js[-_]|is[-_]|has[-_])/iインポートしないクラス名です。RegExp、クラス名を受け取る関数、文字列の接頭辞を指定できます。上記では、既定の設定で .js-toggle がスキップされました。
importStylesFilternullfunction (className, selectorText, menu)。クラスを除外するには false、ラベルを指定するには文字列を返します。menu は "paragraphStyles"、"inlineStyles"、"imageStyles"、"linkStyles" のいずれかです。
importStylesReplacefalsefalse は設定済みの項目の後にインポートしたクラスを追加し、true は置き換えます。
importStylesLimit100各メニューの最大項目数です。超過したクラスはコンソールに警告を出して除外します。0 は無制限です。

たとえば、あるクラスを除外し、別のクラスの名前を変えるには、次のようにします。

importStylesFilter: function (cls, selector, menu) {
  if (cls === "highlight") return false;
  if (cls === "lede") return "Lead paragraph";
}

API

  • editor.getImportedStyles() は、直前のインポート結果を { applied, truncated, droppedCount, unreadableSheets, documentsScanned, replaced } として返します。
  • editor.scanStylesheetClasses(options) は、メニューを変更せず、インポート対象を { classes: [{ cls, tag, selector }], unreadableSheets, documents } として返します。importStyles が無効でも使えます。
  • editor.importStyles(options) はインポートを再実行します。別のスタイルシートを読み込んだ後などに使います。オプションは短い名前 { sheets, exclude, filter, replace, limit } で指定します。

注意点

  • 別オリジンのスタイルシートは読み取れません。ブラウザーがルールの読み取りをブロックするため、unreadableSheets に数えてスキップし、残りのスキャンを続けます。上記のテストでは、同じスタイルシートを別オリジンから読み込んだコピーが unreadableSheets: 1 と報告されました。使用するクラスを含むスタイルシートは、自分のドメインから配信してください。
  • 両方の文書を読み取ります。ページ本体と、contentCssUrl を読み込むエディターの編集領域が対象です。インポートはエディターの起動時と、準備完了後に再度実行します。
  • ページに複数のエディターがある場合は、独自の一覧を渡してください。2.6.12 で importStylesReplace: false を使うと、共有の既定一覧（RTE_DefaultConfig.paragraphStyles など）にクラスが追加されます。そのため、後から同じページに作成したエディターでは、importStyles が無効でもそのクラスが表示されます。各エディターで paragraphStyles、inlineStyles、imageStyles、linkStyles を設定するか、importStylesReplace: true を指定すると、一覧を分離できます。
  • 保存する HTML にはクラス名（class="lede"）だけが残ります。コンテンツの表示先にも同じスタイルシートが必要です。HTML サニタイザーでは class を許可してください。
  • 単一用途のクラスが数百個あるユーティリティ CSS のページでは、上限を増やすより、importStylesSheets または importStylesFilter で対象を絞ってください。

関連情報：段落とインラインスタイルのデモ、設定リファレンス。