WYSIWYG エディターに画像編集機能を追加する方法

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

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

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

画像やその他のメディアのアップロードは編集者にとって通常の機能かもしれませんが、画像編集は通常そうではありません。そのため、このチュートリアルでは、エディター内に画像編集機能を実装する方法を説明します。画像のトリミング、フィルター、テキストの追加などを見ていきます。

重要なポイント

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

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

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

• 数秒と数行で WYSIWYG エディタをセットアップできます。

• 組み込みの画像編集機能を備えたエディタを統合することで、時間を大幅に節約できます。

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

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

    <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">



    <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 アプリケーションを実行すると、次の画面が表示されます:

エディタを実行したら、ネイティブに統合された Filestack プラグインを有効にして画像編集機能を追加します。これを行うには、エディターのオプションを指定します。

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 の両方を設定したら完了です。アプリケーション内で画像編集機能を備えた高度な WYSIWYG エディターを使用できるようになりました。また、エディターは次のように表示されます:

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

WYSIWYG エディター内での画像編集の使用例

画像のトリミング

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

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

フィルターの適用

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

テキストの追加と強化

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

枠線の挿入

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

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

結論

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

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

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