<ul id="agkqe"><sup id="agkqe"></sup></ul>
\n    
\n\n\n\n
On your JS file, add the following line of code:
\n<\/p>\n\n
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 上傳圖像、影片和其他檔案。現(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日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

	


    



	
	

		

			

							

					

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

					
					

						

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

							
							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)頁應用程式時，您應該會看到以下畫面：



How to Add Image Editing Capabilities to Your WYSIWYG 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 後，我們就完成了！現(xiàn)在您可以在應用程式中使用具有圖像編輯功能的高級所見即所得編輯器。另外，編輯器現(xiàn)在應該顯示如下：



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




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





  
  
  裁切影像




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



How to Add Image Editing Capabilities to Your WYSIWYG Editor



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




  
  
  應用過濾器




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



How to Add Image Editing Capabilities to Your WYSIWYG Editor




  
  
  新增和增強文字




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



How to Add Image Editing Capabilities to Your WYSIWYG Editor




  
  
  插入邊框




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



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



How to Add Image Editing Capabilities to Your WYSIWYG Editor




  
  
  結論




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



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



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



          

            
        
以上是如何為所見即所得編輯器新增影像編輯功能的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！



						

					
					

						
本網(wǎng)站聲明

						
本文內(nèi)容由網(wǎng)友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權的內(nèi)容，請聯(lián)絡admin@php.cn

					

				

				



				



				
    


					


											

							

								

									
									
熱AI工具

								

								

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
免費脫衣圖片

											

										

																		

											
												Undresser.AI Undress
											
											

												
													
Undresser.AI Undress

												
												
人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
用於從照片中去除衣服的線上人工智慧工具。

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI脫衣器

											

										

																		

											
												Video Face Swap
											
											

												
													
Video Face Swap

												
												
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

											

										

																

								
							

						

					


					


											

							

								

									
									
熱工具

								

								

																		

											
												記事本++7.3.1
											
											

												
													
記事本++7.3.1

												
												
好用且免費的程式碼編輯器

											

										

																			

											
												SublimeText3漢化版
											
											

												
													
SublimeText3漢化版

												
												
中文版，非常好用

											

										

																			

											
												禪工作室 13.0.1
											
											

												
													
禪工作室 13.0.1

												
												
強大的PHP整合開發(fā)環(huán)境

											

										

																			

											
												Dreamweaver CS6
											
											

												
													
Dreamweaver CS6

												
												
視覺化網(wǎng)頁開發(fā)工具

											

										

																			

											
												SublimeText3 Mac版
											
											

												
													
SublimeText3 Mac版

												
												
神級程式碼編輯軟體(SublimeText3)

											

										

																	

								
							

						

										

					
					
				

			
							

					

						
						


													

								
									JavaScript與Java：您應該學到哪種語言？
								
								JavaScript與Java：您應該學到哪種語言？
								Jun 10, 2025 am	 12:05 AM
								
javascriptisidealforwebdevelogment，whilejavasuitslarge-scaleapplicationsandandandroiddevelopment.1）javascriptexceleatingingingingingingingbeatingwebexperienceswebexperienceswebexperiencesandfull-stackdeevermentwithnode.js.2）

							

														

								
									在JavaScript中使用哪些評論符號：一個明確的解釋
								
								在JavaScript中使用哪些評論符號：一個明確的解釋
								Jun 12, 2025 am	 10:27 AM
								
在JavaScript中，選擇單行註釋（//）還是多行註釋（//）取決於註釋的目的和項目需求：1.使用單行註釋進行快速、內(nèi)聯(lián)的解釋；2.使用多行註釋進行詳細的文檔說明；3.保持註釋風格的一致性；4.避免過度註釋；5.確保註釋與代碼同步更新。選擇合適的註釋風格有助於提高代碼的可讀性和可維護性。

							

														

								
									JavaScript評論的最終指南：增強代碼清晰度
								
								JavaScript評論的最終指南：增強代碼清晰度
								Jun 11, 2025 am	 12:04 AM
								
是的，javascriptcommentsarenectary和shouldshouldshouldseffectional.1）他們通過codeLogicAndIntentsgudedepleders，2）asevitalincomplexprojects，和3）handhanceClaritywithOutClutteringClutteringThecode。

							

														

								
									JavaScript評論：簡短說明
								
								JavaScript評論：簡短說明
								Jun 19, 2025 am	 12:40 AM
								
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）

							

														

								
									Java vs. JavaScript：清除混亂
								
								Java vs. JavaScript：清除混亂
								Jun 20, 2025 am	 12:27 AM
								
Java和JavaScript是不同的編程語言，各自適用於不同的應用場景。 Java用於大型企業(yè)和移動應用開發(fā)，而JavaScript主要用於網(wǎng)頁開發(fā)。

							

														

								
									掌握JavaScript評論：綜合指南
								
								掌握JavaScript評論：綜合指南
								Jun 14, 2025 am	 12:11 AM
								
評論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1）heelpindebugging，登機，andOnderStandingCodeeVolution.2）使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3）bestcractices.3）bestcracticesincracticesinclud

							

														

								
									JavaScript數(shù)據(jù)類型：深度潛水
								
								JavaScript數(shù)據(jù)類型：深度潛水
								Jun 13, 2025 am	 12:10 AM
								
JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

							

														

								
									JavaScript：探索用於高效編碼的數(shù)據(jù)類型
								
								JavaScript：探索用於高效編碼的數(shù)據(jù)類型
								Jun 20, 2025 am	 12:46 AM
								
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）

							

													


													
								See all articles