99久久久国产精品免费蜜臀,99精品久久99久久久久

new FroalaEditor('#froala-editor');\n<\/pre>\n\n\n\n

Web アプリケーションを?qū)g行すると、次の畫面が表示されます:<\/p>\n\n

$\"How$ <\/p>\n\n

エディタを?qū)g行したら、ネイティブに統(tǒng)合された Filestack プラグインを有効にして畫像編集機(jī)能を追加します。これを行うには、エディターのオプションを指定します。
\n<\/p>\n\n

new FroalaEditor('#froala-editor',{\n filestackOptions: {\n filestackAPI: 'YourFilestackAPIKey',\n uploadToFilestackOnly: true,\n pickerOptions: {\n accept: [\n '.pdf',\n 'image\/jpeg',\n 'image\/png',\n 'image\/*',\n 'video\/*',\n 'audio\/*'\n ],\n fromSources: [\n 'local_file_system',\n 'url',\n 'facebook',\n 'instagram'\n ]\n }\n },\n toolbarButtons: {\n 'moreRich': {\n 'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],\n 'buttonsVisible': 3\n },\n 'moreText': {\n 'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']\n },\n 'moreParagraph': {\n 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']\n },\n 'moreMisc': {\n 'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],\n 'align': 'right',\n 'buttonsVisible': 2\n }\n },\n events: {\n 'filestack.uploadedToFilestack': function (response) {\n console.log(\"Callback is triggered for upload to Filestack \",)\n },\n 'filestack.filestackPickerOpened': function (response) {\n console.log(\"Callback is triggered for picker opened \",)\n },\n 'filestack.filestackPickerClosed': function (response) {\n console.log(\"Callback is triggered for picker closed \",)\n },\n 'filestack.uploadFailedToFilestack': function (response) {\n console.log(response);\n },\n },\n heightMin: 500,\n heightMax: 1000\n});\n<\/pre>\n\n\n\n

ここでは、エディターのツールバーボタン、サイズ、イベント、ファイルスタックの追加オプションのいくつかのオプションを宣言しました。 filestackOptions<\/em> プロパティで、Filestack API キー、ファイルを Filestack にのみアップロードするかどうかを決定するブール値、およびいくつかのピッカーオプションを宣言しました。これらのオプションは、許可されるファイルの種類とソースを決定します。<\/p>\n\n

まだ取得していない場合は、無料の Filestack アカウントを作成して API キーを取得します。 Froala と Filestack の両方を設(shè)定したら完了です。アプリケーション內(nèi)で畫像編集機(jī)能を備えた高度な WYSIWYG エディターを使用できるようになりました。また、エディターは次のように表示されます:<\/p>\n\n

$\"How$ <\/p>

エディターのサイズ設(shè)定が改善されたことに注目してください。さらに重要なのは、Filestack アイコンを含むボタンが追加されたことです。これらのボタンを使用すると、ユーザーは Filestack 経由で畫像、ビデオ、その他のファイルをアップロードできます。ここで、Filestack プラグインの機(jī)能の一部を紹介するために、いくつかの畫像編集の使用例を見てみましょう。<\/p>\n\n

\n \n \n WYSIWYG エディター內(nèi)での畫像編集の使用例<\/strong>\n<\/h2>\n\n
\n \n \n 畫像のトリミング<\/strong>\n<\/h2>\n\n
畫像をアップロードした後、畫像をクリックすると、その橫にファイルスタックアイコンが表示されます。アイコンをクリックしてファイル変換ビューに入ります。「変形」タブで「クロップ」を選択し、好みに合わせて畫像を調(diào)整します。畫像をアップロードする前でも、トリミングや回転ができることに注意してください。畫像をアップロードし、後で Filestack 変換を使用してトリミングしましょう。<\/p>\n\n
$\"How$ <\/p>\n\n
Filestack を使用して畫像をトリミングすると、次のようになります。自由形式、円、正方形、およびここで使用する 16:9 など、さまざまなトリミングオプションから選択できます。トリミングが完了したら、チェックボタンをクリックして「保存」をクリックします。<\/p>\n\n
\n \n \n フィルターの適用<\/strong>\n<\/h2>\n\n
フィルターは、畫像を処理するすべてのアプリの重要な部分になっています。 Filestack と Froala を使用すると、アップロードされた畫像の橫にある Filestack アイコンをクリックし、[フィルター] タブに移動(dòng)することでこれを?qū)g現(xiàn)できます。そこから、ポラロイド、セピア、グレースケールなどの多くの畫像フィルターから選択できます。次に、トリミングした畫像にフィルターを適用しましょう。<\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n テキストの追加と強(qiáng)化<\/strong>\n<\/h2>\n\n
章のタイトルにタイトルを追加する場合でも、商品や不動(dòng)産のリストに価格を追加する場合でも、畫像編集にはテキストが不可欠です。 Froala Editor を使用すると、さまざまなフォントやスタイルを使用してテキストを追加できます。先ほどの畫像を使用して、テキストを追加して強(qiáng)化しましょう。<\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n 枠線の挿入<\/strong>\n<\/h2>\n\n
Filestack の変換機(jī)能を使用して、畫像に枠線やフレームを簡単に挿入することもできます。「境界線」タブに移動(dòng)して、畫像の境界線をカスタマイズしましょう:<\/p>\n\n
$\"How$ <\/p>
「保存」をクリックすると、エディターに拡張された畫像が表示されます。そこから、Filestack ダッシュボードでアップロードされた畫像を確認(rèn)できます。「コンテンツブラウザ」に移動(dòng)すると、畫像が表示されます。これは、個(gè)別にダウンロードすることも、アプリケーション上でダウンロードすることもできます。參考までに、これらの操作をすべて実行した後の畫像は次のようになります:<\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n 結(jié)論<\/strong>\n<\/h2>\n\n
最新のアプリケーションにとって、畫像編集は貴重なツールです。 Froala のようなツールを使用すると、優(yōu)れた畫像編集機(jī)能を備えた WYSIWYG エディタの実裝を迅速化できます。このようなツールを使用すると、畫像のトリミング、テキストやフィルターの追加、境界線の挿入、オーバーレイの適用を行うことができます。<\/p>\n\n
このガイドに従うことで、それほど労力をかけずにそのような機(jī)能の実裝を開始できるようになります。これで、ユーザーがエディターを離れることなく畫像を微調(diào)整できる、スムーズで楽しい畫像編集エクスペリエンスを提供する準(zhǔn)備が整いました。<\/p>\n\n
この記事は最初に <\/em><\/strong> Froala のブログ<\/em><\/strong> に投稿されました。<\/em><\/strong><\/p>\n\n\n \n\n \n <\/pre>"}
国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

コミュニティ

記事トピックスに質(zhì)問

學(xué)ぶ

コースプログラミング辭典

ツールライブラリ

開発ツール公式サイト PHP ライブラリ JS特殊効果サイト素材拡張プラグイン

AIツール

レジャー

ゲームのダウンロードゲームのチュートリアル

日本語

簡體中文 English 繁體中文日本語 ??? Melayu Fran?ais Deutsch

Login

singup

ホームページウェブフロントエンド jsチュートリアル WYSIWYG エディターに畫像編集機(jī)能を追加する方法

WYSIWYG エディターに畫像編集機(jī)能を追加する方法

Patricia Arquette

Nov 27, 2024 pm 07:02 PM

畫像編集は、すべての WYSIWYG エディタにとって強(qiáng)力な機(jī)能です。これにより、アプリケーションの機(jī)能が大幅に強(qiáng)化され、アップロードした畫像をさらに活用したいユーザーが満足します。

現(xiàn)在、ユーザーはアプリケーションに畫像編集機(jī)能があることを期待していますが、そのような機(jī)能の実裝は思っているほど簡単ではありません。

たとえば、一部の LMS、CMS、およびドキュメント管理システムでは、ユーザーは WYSIWYG HTML エディター內(nèi)で畫像編集を必要とします。

畫像やその他のメディアのアップロードは編集者にとって通常の機(jī)能かもしれませんが、畫像編集は通常そうではありません。そのため、このチュートリアルでは、エディター內(nèi)に畫像編集機(jī)能を?qū)g裝する方法を説明します。畫像のトリミング、フィルター、テキストの追加などを見ていきます。

重要なポイント

Froala の組み込み Filestack 畫像変換を使用して、畫像編集を簡単に追加します。

Filestack のオプションをカスタマイズして、畫像のアップロードと編集をより詳細(xì)に制御します。

ユーザーが Filestack と対話するたびにアクションを?qū)g行するために Froala イベントを処理します。

數(shù)秒と數(shù)行で WYSIWYG エディタをセットアップできます。

組み込みの畫像編集機(jī)能を備えたエディタを統(tǒng)合することで、時(shí)間を大幅に節(jié)約できます。

WYSIWYG エディターのセットアップ

畫像編集に入る前に、まず WYSIWYG エディターが必要です。これを行うには、必要に応じて Froala Editor ファイルをアプリケーションに含めます (ここでは CDN を使用します)。次に、ID が「froala-editor:」 である div
要素內(nèi)でエディターを初期化します。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Image Editing with Froala and Filestack</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" /> </head> <body> <div> <p>On your JS file, add the following line of code:<br> </p> <pre class="brush:php;toolbar:false">new FroalaEditor('#froala-editor');

Web アプリケーションを?qū)g行すると、次の畫面が表示されます:

エディタを?qū)g行したら、ネイティブに統(tǒng)合された Filestack プラグインを有効にして畫像編集機(jī)能を追加します。これを行うには、エディターのオプションを指定します。

new FroalaEditor('#froala-editor',{ filestackOptions: { filestackAPI: 'YourFilestackAPIKey', uploadToFilestackOnly: true, pickerOptions: { accept: [ '.pdf', 'image/jpeg', 'image/png', 'image/*', 'video/*', 'audio/*' ], fromSources: [ 'local_file_system', 'url', 'facebook', 'instagram' ] } }, toolbarButtons: { 'moreRich': { 'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'], 'buttonsVisible': 3 }, 'moreText': { 'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting'] }, 'moreParagraph': { 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'] }, 'moreMisc': { 'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'], 'align': 'right', 'buttonsVisible': 2 } }, events: { 'filestack.uploadedToFilestack': function (response) { console.log("Callback is triggered for upload to Filestack ",) }, 'filestack.filestackPickerOpened': function (response) { console.log("Callback is triggered for picker opened ",) }, 'filestack.filestackPickerClosed': function (response) { console.log("Callback is triggered for picker closed ",) }, 'filestack.uploadFailedToFilestack': function (response) { console.log(response); }, }, heightMin: 500, heightMax: 1000 });

ここでは、エディターのツールバーボタン、サイズ、イベント、ファイルスタックの追加オプションのいくつかのオプションを宣言しました。 filestackOptions プロパティで、Filestack API キー、ファイルを Filestack にのみアップロードするかどうかを決定するブール値、およびいくつかのピッカーオプションを宣言しました。これらのオプションは、許可されるファイルの種類とソースを決定します。

まだ取得していない場合は、無料の Filestack アカウントを作成して API キーを取得します。 Froala と Filestack の両方を設(shè)定したら完了です。アプリケーション內(nèi)で畫像編集機(jī)能を備えた高度な WYSIWYG エディターを使用できるようになりました。また、エディターは次のように表示されます:

エディターのサイズ設(shè)定が改善されたことに注目してください。さらに重要なのは、Filestack アイコンを含むボタンが追加されたことです。これらのボタンを使用すると、ユーザーは Filestack 経由で畫像、ビデオ、その他のファイルをアップロードできます。ここで、Filestack プラグインの機(jī)能の一部を紹介するために、いくつかの畫像編集の使用例を見てみましょう。

WYSIWYG エディター內(nèi)での畫像編集の使用例

畫像のトリミング

畫像をアップロードした後、畫像をクリックすると、その橫にファイルスタックアイコンが表示されます。アイコンをクリックしてファイル変換ビューに入ります。「変形」タブで「クロップ」を選択し、好みに合わせて畫像を調(diào)整します。畫像をアップロードする前でも、トリミングや回転ができることに注意してください。畫像をアップロードし、後で Filestack 変換を使用してトリミングしましょう。

Filestack を使用して畫像をトリミングすると、次のようになります。自由形式、円、正方形、およびここで使用する 16:9 など、さまざまなトリミングオプションから選択できます。トリミングが完了したら、チェックボタンをクリックして「保存」をクリックします。

フィルターの適用

フィルターは、畫像を処理するすべてのアプリの重要な部分になっています。 Filestack と Froala を使用すると、アップロードされた畫像の橫にある Filestack アイコンをクリックし、[フィルター] タブに移動(dòng)することでこれを?qū)g現(xiàn)できます。そこから、ポラロイド、セピア、グレースケールなどの多くの畫像フィルターから選択できます。次に、トリミングした畫像にフィルターを適用しましょう。

テキストの追加と強(qiáng)化

章のタイトルにタイトルを追加する場合でも、商品や不動(dòng)産のリストに価格を追加する場合でも、畫像編集にはテキストが不可欠です。 Froala Editor を使用すると、さまざまなフォントやスタイルを使用してテキストを追加できます。先ほどの畫像を使用して、テキストを追加して強(qiáng)化しましょう。

枠線の挿入

Filestack の変換機(jī)能を使用して、畫像に枠線やフレームを簡単に挿入することもできます。「境界線」タブに移動(dòng)して、畫像の境界線をカスタマイズしましょう:

「保存」をクリックすると、エディターに拡張された畫像が表示されます。そこから、Filestack ダッシュボードでアップロードされた畫像を確認(rèn)できます。「コンテンツブラウザ」に移動(dòng)すると、畫像が表示されます。これは、個(gè)別にダウンロードすることも、アプリケーション上でダウンロードすることもできます。參考までに、これらの操作をすべて実行した後の畫像は次のようになります:

結(jié)論

最新のアプリケーションにとって、畫像編集は貴重なツールです。 Froala のようなツールを使用すると、優(yōu)れた畫像編集機(jī)能を備えた WYSIWYG エディタの実裝を迅速化できます。このようなツールを使用すると、畫像のトリミング、テキストやフィルターの追加、境界線の挿入、オーバーレイの適用を行うことができます。

このガイドに従うことで、それほど労力をかけずにそのような機(jī)能の実裝を開始できるようになります。これで、ユーザーがエディターを離れることなく畫像を微調(diào)整できる、スムーズで楽しい畫像編集エクスペリエンスを提供する準(zhǔn)備が整いました。

この記事は最初に Froala のブログ に投稿されました。