久久精品国产一区二区三,亚洲国产午夜精品理论片,国产成人精品高清在线观看99

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

當您執(zhí)行網(wǎng)頁應用程式時，您應該會看到以下畫面：<\/p>\n\n

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

一旦我們的編輯器運作起來，我們將透過啟用本機整合的 Filestack 外掛程式來新增映像編輯功能。我們透過為編輯器指定選項來做到這一點：
\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

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

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

$\"How$ <\/p>

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

\n \n \n 所見即所得編輯器中影像編輯的用例<\/strong>\n<\/h2>\n\n
\n \n \n 裁切影像<\/strong>\n<\/h2>\n\n
上傳圖片後，按一下它，旁邊會出現(xiàn)一個 Filestack 圖示。按一下該圖示進入檔案轉換視圖。在“變換”標籤下，選擇“裁剪”並根據(jù)您的喜好調(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 圖示並前往「過濾器」標籤來完成此操作。從那裡，您可以從許多影像濾鏡中進行選擇，例如寶麗來、棕褐色、灰階等等?，F(xiàn)在，讓我們對裁剪後的影像套用濾鏡。 <\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n 新增和增強文字<\/strong>\n<\/h2>\n\n
無論是為章節(jié)標題添加標題，還是為產(chǎn)品或房地產(chǎn)清單添加價格，文字對於圖像編輯都是必不可少的。使用 Froala Editor，您可以新增具有不同字體和樣式的文字。使用之前的圖像，讓我們添加一些文字並增強它。 <\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n 插入邊框<\/strong>\n<\/h2>\n\n
我們也可以使用 Filestack 的轉換功能輕鬆地將邊框或框架插入到影像中。讓我們轉到“邊框”選項卡並為圖像自訂邊框：<\/p>\n\n
$\"How$ <\/p>
點擊「儲存」後，我們應該在編輯器上看到增強的影像。從那裡，您可以在 Filestack 儀表板上檢查上傳的映像。轉到“內(nèi)容瀏覽器”，您將看到我們的圖像，您可以單獨下載或在您的應用程式中下載該圖像。作為參考，以下是執(zhí)行所有這些操作後影像的外觀：<\/p>\n\n
$\"How$ <\/p>\n\n
\n \n \n 結論<\/strong>\n<\/h2>\n\n
對於任何現(xiàn)代應用程式來說，影像編輯都是一個有價值的工具。透過 Froala 等工具，您可以加快實現(xiàn)具有卓越影像編輯功能的所見即所得編輯器。這些工具可讓您裁剪、添加文字和濾鏡、插入邊框以及將疊加層套用至影像。 <\/p>\n\n
遵循本指南，您現(xiàn)在可以開始實現(xiàn)這些功能，而不需要太多的努力?，F(xiàn)在，您已準備好提供流暢、愉快的影像編輯體驗，讓使用者無需離開編輯器即可微調(diào)影像。 <\/p>\n\n
本文最初發(fā)佈於<\/em><\/strong>Froala 的部落格<\/em><\/strong>。 <\/em><\/strong><\/p>\n\n\n \n\n \n <\/pre>"}
亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

社群

文章合集問答

學習

課程程式設計字典

工具庫

開發(fā)工具網(wǎng)站源碼 PHP 函式庫 JS特效網(wǎng)站素材擴充插件

AI工具

休閒

遊戲下載遊戲教程

繁體中文

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

Login

singup

首頁 web前端 js教程如何為所見即所得編輯器新增影像編輯功能

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

Patricia Arquette

Nov 27, 2024 pm 07:02 PM

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

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

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

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

要點

使用 Froala 內(nèi)建的 Filestack 影像轉換來輕鬆新增影像編輯。

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

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

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

透過將編輯器與內(nèi)建影像編輯整合來節(jié)省大量時間。

設定所見即所得編輯器

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

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

當您執(zhí)行網(wǎng)頁應用程式時，您應該會看到以下畫面：

一旦我們的編輯器運作起來，我們將透過啟用本機整合的 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 後，我們就完成了！現(xiàn)在您可以在應用程式中使用具有圖像編輯功能的高級所見即所得編輯器。另外，編輯器現(xiàn)在應該顯示如下：

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

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

裁切影像

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

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

應用過濾器

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

新增和增強文字

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

插入邊框

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

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

結論

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

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

本文最初發(fā)佈於Froala 的部落格。