スキンとテーマの設定
config.skin は、エディターの外観(クロム)を選びます。値はクラスとしてエディターのコンテナーに追加されます。skin: "dark" を指定するとコンテナーに rte-skin-dark が付き、テーマのスタイルシートがそれを基にスタイルを適用します。
var config = {};
config.skin = "dark"; // "" (default look), "dark", "gray", "blue", "rounded-corner"
var editor = new RichTextEditor("#div_editor", config);既定のテーマのスキン
| 値 | 外観 |
|---|---|
(not set) | 既定の明るい外観で、角は直角です。 |
dark | 暗い色のツールバーと外観。暗い色のアプリケーションシェル向けです。 |
gray | 落ち着いたグレーのツールバー。白いページとのコントラストが控えめです。 |
blue | 青いアクセントのツールバー。 |
rounded-corner | 既定の配色で、エディターの枠の角が丸くなります。 |
独自のスキン
エディターは値を検証しないので、対応するクラスに自分でスタイルを付ければ、どんな名前でも使えます。
/* Your own skin: any class name works, the editor just prefixes it. */
.rte-skin-brand .rte-toolbar { background: #101828; }
.rte-skin-brand .rte-toolbar button { color: #e6eefc; }外観ではなく編集面を変更する場合は、contentCssUrl と setContentCssText を参照してください。スキン全体を用意しなくても、rte-square モディファイアーで角を直角にできます。