バージョン

igTextEditor のスタイルおよびテーマ設定

igTextEditor コントロールは、jQuery ベースのコントロールで、多くのスタイル設定オプションがあります。テキスト エディターのスタイルをカスタマイズするには、さまざまなテーマを使用する、またはカスタム CSS ルールをコントロールに直接適用します。

Ignite UI for jQuery パッケージには、いくつかの jQuery UI や Bootstrap テーマが用意されています。また Bootstrap は、独自のブートストラップのテーマの生成やカスタマイズをサポートしています。詳細は、スタイル設定とテーマ設定を参照してください。エディターを含めたページ上のすべてのコントロールのスタイルは、どのテーマでも設定できます。

ThemeRoller の使用

igTextEditor コントロールは jQuery UI CSS フレームワークを使用するため、jQuery UI ThemeRoller を使用してすべてのスタイルを設定することもできます。これにより、独自に作成したテーマのカスタマイズや使用可能なギャラリーからのテーマの選択ができます。これらのテーマは、Ignite UI for jQuery のデフォルトのテーマと置き換えられます。

ドロップ リストを使用するテキスト エディターで Darkness テーマを使用:

カスタム スタイル

ご使用の CSS には、テキスト エディターの多くの要素にスタイル オーバーライドが含まれている場合があります。使用可能なすべてのクラスについては、API リファレンスのテーマ設定クラスを参照してください。スタイルを適用するには、すべてのエディターに摘要されたグローバル クラスをオーバーライドする、またはID や他の特定の trait で特定の要素をターゲットとして指定し、コントロールごとにカスタマイズできるようにします。

エディターがコンテナー内で描画されるときにトップ要素に適用されるデフォルトのクラスは、'ui-igedit-container ui-state-default' です。これは、一般的な要素のオーバーライド、またはプレースホルダー ui-igedit-placeholder などのきわめて特殊な要素をターゲットにする場合に使用できます。

<style>
.ui-igedit-placeholder
{
    text-shadow: 1px 0px #00aeef;
}
</style>

関連トピック

オンラインで表示: GitHub