1707009211
2024-02-02 17:08:37
この記事では、TinyMCE 統合用の新しいプラグインについて説明したいと思います。 TinyMceEnhancements アドオンには、Optimizely TinyMCE 統合のための一連の改善が含まれています。 HTML エディターで使用される画像に関連する機能に焦点を当てています。 このプラグインを使用すると、画像の属性を変更したり、サイズを制限したり、ALT テキストを設定したりできます。
画像の寸法の管理
HTML エディターに画像を追加すると、TinyMCE は属性の高さと幅を自動的に設定します。
例えば：
|
<画像 送信元=「https://gregwiechec.com/EPiServer/CMS/Content/globalassets/en/startpage/polarbearonice.png,,128?epieditmode=false」 幅=「300」 身長=「175」> |
これは、クライアント上で画像のサイズが 300px x 175px に変更されても、ブラウザーは依然としてフルサイズの画像を返すことを意味します。 多くの場合、現在画面に表示されているサイズで画像を返したいと考えます。
この問題を解決するには、次のような一般的なプラグインのいずれかを使用できます。 Baaijte.Optimizely.ImageSharp.Web。 このプラグインを使用すると、クエリ文字列に幅と高さを入力すると、指定されたサイズの画像がサーバーから返されます。
残念ながら、TinyMCE は属性として高さと幅のみを追加します。 TinyMceEnhancements を使用すると、エディターの動作方法を変更できます。 高さと幅に使用されるクエリ文字列パラメータの名前を設定するには、ImageSizeSettings オプションを使用します。
|
サービス。構成、設定<TinyMce機能拡張オプション>(オプション => { オプション。画像属性 = 新しい () { 画像サイズ設定 = 新しい () { 幅名 = “幅”、 身長名 = “身長” } }; } |
今後、エディタに画像を追加するとき、または画像サイズを変更するときに、クエリ文字列も変更されます。
|
<画像 送信元=「https://gregwiechec.com/EPiServer/CMS/Content/globalassets/en/startpage/polarbearonice.png,,128?epieditmode=false&width=300&height=17」> |
その後、Baaijte.Optimizely.ImageSharp.Web (または別のプラグイン) がサイズ変更された画像を返します。
画像サイズの制限
TinyMceEnhancements プラグインを使用すると、画像の最大サイズを制限することもできます。 これにより、画像が大きくなりすぎるのを防ぐことができます。 画像の最大サイズを設定するには、 ImageRestrictions オプション：
|
公共 空所 サービスの構成(Iサービスコレクション サービス) { サービス。構成、設定<TinyMce機能拡張オプション>(uiオプション => { uiオプション。画像制限 = 新しい () { 最大幅 = 300、 最大高さ = 200、 KeepRatio = 真実 }; }); } |
現在、TinyMCE に追加される画像は 300×200 ピクセルを超えることはできません。
カスタム属性の追加
一部のプラグインでは、追加のクエリ文字列パラメータを追加する必要があります。 たとえば、クエリ文字列に format=webp が含まれている場合、Baaijte.Optimizely.ImageSharp.Web は webp 形式で画像を返します。
TinyMceEnhancements を使用して画像クエリ文字列に静的属性を追加するには、次のように設定します。 StaticAttributes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
公共 空所 サービスの構成(Iサービスコレクション サービス) { //… サービス。構成、設定<TinyMce機能拡張オプション>(uiオプション =>。 { uiオプション。画像属性 = 新しい () { 静的属性 = 新しい[] { 新しい ImageQueryStringAttribute { 名前 = “フォーマット”、 価値 = 「ウェブ」 } } }; }); // … } |
上記のコードを使用すると、 format=webp クエリ文字列が各画像に追加されます。
|
<画像 送信元=「https://gregwiechec.com/EPiServer/CMS/Content/globalassets/en/startpage/polarbearonice.png,,128?epieditmode=false&format=webp」> |
ALTテキストを設定する
Alt テキスト属性は、人々と検索エンジンの両方にとって画像にアクセスしやすくするため、非常に重要です。
もちろん、TinyMCE では ALT 属性を設定できますが、必須ではありません。
TinyMceEnhancements プラグインは、画像を追加するときに ALT テキストを入力するためのダイアログ ボックスを表示するように構成できます。
さらに、ダイアログが表示されたときに完成するデフォルトの ALT テキストを構成できます。 デフォルトの ALT テキストを追加するには、 ImageAltTextSettings オプション：
|
公共 空所 サービスの構成(Iサービスコレクション サービス) { サービス。構成、設定<TinyMce機能拡張オプション>(uiオプション => { uiオプション。ImageAltText設定 = 新しい () { ImageAlt属性 = 新しい[] { 「著作権」 } }; }); } |
エディターに画像を追加すると、ヒント付きの ALT テキスト ダイアログが表示されます。
特定のプロパティに対する TinyMceEnhancements の構成
デフォルトでは、画像サイズと ALT テキストの両方の管理が有効になっています。 これは、AddTinyMceEnhancements メソッドを使用して構成できます。
|
公共 空所 サービスの構成(Iサービスコレクション サービス) { //… だった 画像属性を構成する = 間違い; だった configureImageAlt = 真実; サービス。。。。。。。 。追加TinyMce() 。追加TinyMce機能強化(画像属性を構成する、 configureImageAlt) // TinyMCEEnhancements アドオンをオンにする // … } |
特定の TinyMce インスタンスに対してのみ有効にすることもできます。たとえば、次のようになります。
|
公共 静的 クラス ServiceCollectionExtensions { 公共 静的 Iサービスコレクション カスタマイズTinyMce(これ Iサービスコレクション サービス) { サービス。構成、設定<TinyMce構成>(構成 => { 構成。のために<記事ページ>(t => t。共有ボディ) 。画像プラグインの構成() 。ImageAltプラグインの構成(); } } } |
#TinyMCE #の機能強化 #TinyMceEnhancements #プラグイン