99麻豆久久久国产精品免费,xxxx中国hd

new FroalaEditor('#froala-editor');\n<\/pre>\n\n\n\n
當您執(zhí)行網(wǎng)頁應(yīng)用程式時，您應(yī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 金鑰。設(shè)定 Froala 和 Filestack 後，我們就完成了！現(xiàn)在您可以在應(yīng)用程式中使用具有圖像編輯功能的高級所見即所得編輯器。另外，編輯器現(xiàn)在應(yīng)該顯示如下：<\/p>\n\n
<\/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 圖示。按一下該圖示進入檔案轉(zhuǎn)換視圖。在“變換”標籤下，選擇“裁剪”並根據(jù)您的喜好調(diào)整影像。請注意，您甚至可以在上傳圖像之前裁剪和旋轉(zhuǎn)圖像。讓我們上傳一張圖像，然後使用 Filestack 轉(zhuǎn)換對其進行裁剪。 <\/p>\n\n
<\/p>\n\n
這就是使用 Filestack 裁切影像的樣子。您可以選擇不同的裁切選項，包括自由形狀、圓形、方形和我們在這裡使用的 16:9。裁剪完成後，點擊複選按鈕並點擊“儲存”。 <\/p>\n\n
\n  \n  \n  應(yīng)用過濾器<\/strong>\n<\/h2>\n\n濾鏡已成為每個處理影像的應(yīng)用程式的重要組成部分。使用 Filestack 和 Froala，您可以透過點擊上傳圖像旁邊的 Filestack 圖示並前往「過濾器」標籤來完成此操作。從那裡，您可以從許多影像濾鏡中進行選擇，例如寶麗來、棕褐色、灰階等等?，F(xiàn)在，讓我們對裁剪後的影像套用濾鏡。 <\/p>\n\n
<\/p>\n\n
\n  \n  \n  新增和增強文字<\/strong>\n<\/h2>\n\n無論是為章節(jié)標題添加標題，還是為產(chǎn)品或房地產(chǎn)清單添加價格，文字對於圖像編輯都是必不可少的。使用 Froala Editor，您可以新增具有不同字體和樣式的文字。使用之前的圖像，讓我們添加一些文字並增強它。 <\/p>\n\n
<\/p>\n\n
\n  \n  \n  插入邊框<\/strong>\n<\/h2>\n\n我們也可以使用 Filestack 的轉(zhuǎn)換功能輕鬆地將邊框或框架插入到影像中。讓我們轉(zhuǎn)到“邊框”選項卡並為圖像自訂邊框：<\/p>\n\n
<\/p>
點擊「儲存」後，我們應(yīng)該在編輯器上看到增強的影像。從那裡，您可以在 Filestack 儀表板上檢查上傳的映像。轉(zhuǎn)到“內(nèi)容瀏覽器”，您將看到我們的圖像，您可以單獨下載或在您的應(yīng)用程式中下載該圖像。作為參考，以下是執(zhí)行所有這些操作後影像的外觀：<\/p>\n\n
<\/p>\n\n
\n  \n  \n  結(jié)論<\/strong>\n<\/h2>\n\n對於任何現(xiàn)代應(yīng)用程式來說，影像編輯都是一個有價值的工具。透過 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成人天堂

	

    
        
            
                
                    
                
            
            
                
                    社群
                    
                        
                            文章
                            合集
                            問答
                        
                    
                

                
                    學習
                    
                        
                            課程
                            程式設(shè)計字典
                        
                    
                

                
                    工具庫
                    
                        
                            開發(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
														
						
					
					
					
						
						
						
						

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

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

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

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


  
  
  要點



使用 Froala 內(nèi)建的 Filestack 影像轉(zhuǎn)換來輕鬆新增影像編輯。 
自訂 Filestack 的選項以更好地控制映像上傳和編輯。 
處理 Froala 事件以在使用者與 Filestack 互動時執(zhí)行操作。 
只需幾秒鐘和幾行即可設(shè)定所見即所得編輯器。 
透過將編輯器與內(nèi)建影像編輯整合來節(jié)省大量時間。 



  
  
  設(shè)定所見即所得編輯器


在開始影像編輯之前，我們首先需要一個所見即所得的編輯器。為此，請根據(jù)需要將 Froala 編輯器檔案包含在您的應(yīng)用程式中（我們將在此使用 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)頁應(yīng)用程式時，您應(yī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 金鑰。設(shè)定 Froala 和 Filestack 後，我們就完成了！現(xiàn)在您可以在應(yīng)用程式中使用具有圖像編輯功能的高級所見即所得編輯器。另外，編輯器現(xiàn)在應(yīng)該顯示如下：

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


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



  
  
  裁切影像


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



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


  
  
  應(yīng)用過濾器


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




  
  
  新增和增強文字


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




  
  
  插入邊框


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

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




  
  
  結(jié)論


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

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

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