如何為所見即所得編輯器新增影像編輯功能

影像編輯對於每個所見即所得編輯器來說都是一項強大的功能。它顯著增強了應用程式的功能，並使想要對上傳的圖像執行更多操作的用戶感到滿意。

如今，用戶期望應用程式具有圖像編輯功能，但實現這些功能並不像聽起來那麼簡單。

例如，在某些 LMS、CMS 和文件管理系統中，使用者需要在所見即所得 HTML 編輯器中編輯圖片。

上傳圖像和其他媒體可能是編輯人員的正常功能，但圖像編輯通常不是。這就是為什麼在本教程中，我將向您展示如何在編輯器中實現圖像編輯功能。我們將探索影像裁剪、濾鏡、添加文字等等。

要點

• 使用 Froala 內建的 Filestack 影像轉換來輕鬆新增影像編輯。

• 自訂 Filestack 的選項以更好地控制映像上傳和編輯。

• 處理 Froala 事件以在使用者與 Filestack 互動時執行操作。

• 只需幾秒鐘和幾行即可設定所見即所得編輯器。

• 透過將編輯器與內建影像編輯整合來節省大量時間。

設定所見即所得編輯器

在開始影像編輯之前，我們首先需要一個所見即所得的編輯器。為此，請根據需要將 Froala 編輯器檔案包含在您的應用程式中（我們將在此使用 CDN）。然後，我們在 div 元素中初始化編輯器，其 id 為「froala-editor:」

    <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');

當您執行網頁應用程式時，您應該會看到以下畫面：

一旦我們的編輯器運作起來，我們將透過啟用本機整合的 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
});

在這裡，我們聲明了編輯器工具列按鈕、大小、事件的一些選項以及 Filestack 的其他選項。在 filestackOptions 屬性中，我們宣告了 Filestack API 金鑰，這是一個布林值，用於確定檔案是否專門上傳到 Filestack，以及一些選擇器選項。這些選項決定允許的文件類型和來源。

如果您還沒有，請透過建立免費的 Filestack 帳戶來取得 API 金鑰。設定 Froala 和 Filestack 後，我們就完成了！現在您可以在應用程式中使用具有圖像編輯功能的高級所見即所得編輯器。另外，編輯器現在應該顯示如下：

請注意編輯器現在如何具有更好的尺寸調整。更重要的是，我們現在有了一個有 Filestack 圖示的按鈕。這些按鈕允許用戶透過 Filestack 上傳圖像、影片和其他檔案。現在，為了向您展示 Filestack 插件的一些功能，讓我們深入研究一些圖像編輯用例。

所見即所得編輯器中影像編輯的用例

裁切影像

上傳圖片後，按一下它，旁邊會出現一個 Filestack 圖示。按一下該圖示進入檔案轉換視圖。在“變換”標籤下，選擇“裁剪”並根據您的喜好調整影像。請注意，您甚至可以在上傳圖像之前裁剪和旋轉圖像。讓我們上傳一張圖像，然後使用 Filestack 轉換對其進行裁剪。

這就是使用 Filestack 裁切影像的樣子。您可以選擇不同的裁切選項，包括自由形狀、圓形、方形和我們在這裡使用的 16:9。裁剪完成後，點擊複選按鈕並點擊“儲存”。

應用過濾器

濾鏡已成為每個處理影像的應用程式的重要組成部分。使用 Filestack 和 Froala，您可以透過點擊上傳圖像旁邊的 Filestack 圖示並前往「過濾器」標籤來完成此操作。從那裡，您可以從許多影像濾鏡中進行選擇，例如寶麗來、棕褐色、灰階等等。現在，讓我們對裁剪後的影像套用濾鏡。

新增和增強文字

無論是為章節標題添加標題，還是為產品或房地產清單添加價格，文字對於圖像編輯都是必不可少的。使用 Froala Editor，您可以新增具有不同字體和樣式的文字。使用之前的圖像，讓我們添加一些文字並增強它。

插入邊框

我們也可以使用 Filestack 的轉換功能輕鬆地將邊框或框架插入到影像中。讓我們轉到“邊框”選項卡並為圖像自訂邊框：

點擊「儲存」後，我們應該在編輯器上看到增強的影像。從那裡，您可以在 Filestack 儀表板上檢查上傳的映像。轉到“內容瀏覽器”，您將看到我們的圖像，您可以單獨下載或在您的應用程式中下載該圖像。作為參考，以下是執行所有這些操作後影像的外觀：

結論

對於任何現代應用程式來說，影像編輯都是一個有價值的工具。透過 Froala 等工具，您可以加快實現具有卓越影像編輯功能的所見即所得編輯器。這些工具可讓您裁剪、添加文字和濾鏡、插入邊框以及將疊加層套用至影像。

遵循本指南，您現在可以開始實現這些功能，而不需要太多的努力。現在，您已準備好提供流暢、愉快的影像編輯體驗，讓使用者無需離開編輯器即可微調影像。

本文最初發佈於Froala 的部落格。