好吊妞视频这里有精品,久久精品国产精品亚洲38

new FroalaEditor('#froala-editor');\n<\/pre>\n\n\n\n
當(dāng)您運(yùn)行網(wǎng)絡(luò)應(yīng)用程序時(shí)，您應(yīng)該會(huì)看到以下屏幕：<\/p>\n\n
$\"How$ <\/p>\n\n
一旦我們的編輯器運(yùn)行起來(lái)，我們將通過(guò)啟用本機(jī)集成的 Filestack 插件來(lái)添加圖像編輯功能。我們通過(guò)為編輯器指定選項(xiàng)來(lái)做到這一點(diǎn)：
\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在這里，我們聲明了編輯器工具欄按鈕、大小、事件的一些選項(xiàng)以及 Filestack 的其他選項(xiàng)。在 filestackOptions<\/em> 屬性中，我們聲明了 Filestack API 密鑰，這是一個(gè)布爾值，用于確定文件是否專門上傳到 Filestack，以及一些選擇器選項(xiàng)。這些選項(xiàng)決定允許的文件類型和來(lái)源。<\/p>\n\n
如果您還沒(méi)有，請(qǐng)通過(guò)創(chuàng)建免費(fèi)的 Filestack 帳戶來(lái)獲取 API 密鑰。設(shè)置 Froala 和 Filestack 后，我們就完成了！您現(xiàn)在可以在應(yīng)用程序中使用具有圖像編輯功能的高級(jí)所見(jiàn)即所得編輯器。另外，編輯器現(xiàn)在應(yīng)該顯示如下：<\/p>\n\n
<\/p>
請(qǐng)注意編輯器現(xiàn)在如何具有更好的尺寸調(diào)整。更重要的是，我們現(xiàn)在有了帶有 Filestack 圖標(biāo)的按鈕。這些按鈕允許用戶通過(guò) Filestack 上傳圖像、視頻和其他文件。現(xiàn)在，為了向您展示 Filestack 插件的一些功能，讓我們深入研究一些圖像編輯用例。<\/p>\n\n
\n  \n  \n  所見(jiàn)即所得編輯器中圖像編輯的用例<\/strong>\n<\/h2>\n\n\n  \n  \n  裁剪圖像<\/strong>\n<\/h2>\n\n上傳圖像后，單擊它，旁邊會(huì)出現(xiàn)一個(gè) Filestack 圖標(biāo)。單擊該圖標(biāo)進(jìn)入文件轉(zhuǎn)換視圖。在“變換”選項(xiàng)卡下，選擇“裁剪”并根據(jù)您的喜好調(diào)整圖像。請(qǐng)注意，您甚至可以在上傳圖像之前裁剪和旋轉(zhuǎn)圖像。讓我們上傳一張圖像，然后使用 Filestack 轉(zhuǎn)換對(duì)其進(jìn)行裁剪。<\/p>\n\n
<\/p>\n\n
這就是使用 Filestack 裁剪圖像的樣子。您可以選擇不同的裁剪選項(xiàng)，包括自由形狀、圓形、方形和我們?cè)谶@里使用的 16:9。裁剪完成后，單擊復(fù)選按鈕并點(diǎn)擊“保存”。<\/p>\n\n
\n  \n  \n  應(yīng)用過(guò)濾器<\/strong>\n<\/h2>\n\n濾鏡已成為每個(gè)處理圖像的應(yīng)用程序的重要組成部分。使用 Filestack 和 Froala，您可以通過(guò)單擊上傳圖像旁邊的 Filestack 圖標(biāo)并轉(zhuǎn)到“過(guò)濾器”選項(xiàng)卡來(lái)完成此操作。從那里，您可以從許多圖像過(guò)濾器中進(jìn)行選擇，例如寶麗來(lái)、棕褐色、灰度等等?，F(xiàn)在，讓我們對(duì)裁剪后的圖像應(yīng)用濾鏡。<\/p>\n\n
<\/p>\n\n
\n  \n  \n  添加和增強(qiáng)文本<\/strong>\n<\/h2>\n\n無(wú)論是為章節(jié)標(biāo)題添加標(biāo)題，還是為產(chǎn)品或房地產(chǎn)列表添加價(jià)格，文本對(duì)于圖像編輯都是必不可少的。使用 Froala Editor，您可以添加具有不同字體和樣式的文本。使用之前的圖像，讓我們添加一些文本并增強(qiáng)它。<\/p>\n\n
<\/p>\n\n
\n  \n  \n  插入邊框<\/strong>\n<\/h2>\n\n我們還可以使用 Filestack 的轉(zhuǎn)換功能輕松地將邊框或框架插入到圖像中。讓我們轉(zhuǎn)到“邊框”選項(xiàng)卡并為圖像自定義邊框：<\/p>\n\n
<\/p>
單擊“保存”后，我們應(yīng)該在編輯器上看到增強(qiáng)后的圖像。從那里，您可以在 Filestack 儀表板上檢查上傳的圖像。轉(zhuǎn)到“內(nèi)容瀏覽器”，您將看到我們的圖像，您可以單獨(dú)下載或在您的應(yīng)用程序中下載該圖像。作為參考，以下是執(zhí)行所有這些操作后圖像的外觀：<\/p>\n\n
<\/p>\n\n
\n  \n  \n  結(jié)論<\/strong>\n<\/h2>\n\n對(duì)于任何現(xiàn)代應(yīng)用程序來(lái)說(shuō)，圖像編輯都是一個(gè)有價(jià)值的工具。借助 Froala 等工具，您可以加快實(shí)現(xiàn)具有卓越圖像編輯功能的所見(jiàn)即所得編輯器。這些工具允許您裁剪、添加文本和濾鏡、插入邊框以及將疊加層應(yīng)用于圖像。<\/p>\n\n
通過(guò)遵循本指南，您現(xiàn)在可以開(kāi)始實(shí)現(xiàn)這些功能，而不需要太多的努力?，F(xiàn)在，您已準(zhǔn)備好提供流暢、愉快的圖像編輯體驗(yàn)，讓用戶無(wú)需離開(kāi)編輯器即可微調(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国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

	

    
        
            
                
                    
                
            
            
                
                    社區(qū)
                    
                        
                            文章
                            合集
                            問(wèn)答
                        
                    
                

                
                    學(xué)習(xí)
                    
                        
                            課程
                            編程詞典
                        
                    
                

                
                    工具庫(kù)
                    
                        
                            開(kāi)發(fā)工具
                            網(wǎng)站源碼
                            PHP 庫(kù)
                            JS特效
                            網(wǎng)站素材
                            擴(kuò)展插件
                        
                    
                

                
                    AI工具
                

                
                    休閑
                    
                        
                            游戲下載
                            游戲教程

                        
                    
                
            
        
                    
                
                
            
                
            
                簡(jiǎn)體中文
                
                    
                                                簡(jiǎn)體中文
                                                English
                                                繁體中文
                                                日本語(yǔ)
                                                ???
                                                Melayu
                                                Fran?ais
                                                Deutsch
                                            
                
            
            
                            
                    Login
                
                
                    singup
                
            
        
    


	
	
		
			
							
					
						首頁(yè)
						
												web前端
						
												js教程
						
						如何向所見(jiàn)即所得編輯器添加圖像編輯功能
					
					
					
						
							如何向所見(jiàn)即所得編輯器添加圖像編輯功能
							
								
									
									
									
									
																			Patricia Arquette
                                										
								
                			
							Nov 27, 2024 pm	 07:02 PM
														
						
					
					
					
						
						
						
						

					圖像編輯對(duì)于每個(gè)所見(jiàn)即所得編輯器來(lái)說(shuō)都是一項(xiàng)強(qiáng)大的功能。它顯著增強(qiáng)了應(yīng)用程序的功能，并使想要對(duì)上傳的圖像執(zhí)行更多操作的用戶感到滿意。

如今，用戶期望應(yīng)用程序具有圖像編輯功能，但實(shí)現(xiàn)這些功能并不像聽(tīng)起來(lái)那么簡(jiǎn)單。

例如，在某些 LMS、CMS 和文檔管理系統(tǒng)中，用戶需要在所見(jiàn)即所得 HTML 編輯器中編輯圖像。

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


  
  
  要點(diǎn)



使用 Froala 內(nèi)置的 Filestack 圖像轉(zhuǎn)換來(lái)輕松添加圖像編輯。
自定義 Filestack 的選項(xiàng)以更好地控制圖像上傳和編輯。
處理 Froala 事件以在用戶與 Filestack 交互時(shí)執(zhí)行操作。
只需幾秒鐘和幾行即可設(shè)置所見(jiàn)即所得編輯器。
通過(guò)將編輯器與內(nèi)置圖像編輯集成來(lái)節(jié)省大量時(shí)間。



  
  
  設(shè)置所見(jiàn)即所得編輯器


在開(kāi)始圖像編輯之前，我們首先需要一個(gè)所見(jiàn)即所得的編輯器。為此，請(qǐng)根據(jù)需要將 Froala 編輯器文件包含在您的應(yīng)用程序中（我們將在此使用 CDN）。然后，我們?cè)?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');




當(dāng)您運(yùn)行網(wǎng)絡(luò)應(yīng)用程序時(shí)，您應(yīng)該會(huì)看到以下屏幕：



一旦我們的編輯器運(yùn)行起來(lái)，我們將通過(guò)啟用本機(jī)集成的 Filestack 插件來(lái)添加圖像編輯功能。我們通過(guò)為編輯器指定選項(xiàng)來(lái)做到這一點(diǎn)：



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




在這里，我們聲明了編輯器工具欄按鈕、大小、事件的一些選項(xiàng)以及 Filestack 的其他選項(xiàng)。在 filestackOptions 屬性中，我們聲明了 Filestack API 密鑰，這是一個(gè)布爾值，用于確定文件是否專門上傳到 Filestack，以及一些選擇器選項(xiàng)。這些選項(xiàng)決定允許的文件類型和來(lái)源。

如果您還沒(méi)有，請(qǐng)通過(guò)創(chuàng)建免費(fèi)的 Filestack 帳戶來(lái)獲取 API 密鑰。設(shè)置 Froala 和 Filestack 后，我們就完成了！您現(xiàn)在可以在應(yīng)用程序中使用具有圖像編輯功能的高級(jí)所見(jiàn)即所得編輯器。另外，編輯器現(xiàn)在應(yīng)該顯示如下：

請(qǐng)注意編輯器現(xiàn)在如何具有更好的尺寸調(diào)整。更重要的是，我們現(xiàn)在有了帶有 Filestack 圖標(biāo)的按鈕。這些按鈕允許用戶通過(guò) Filestack 上傳圖像、視頻和其他文件?，F(xiàn)在，為了向您展示 Filestack 插件的一些功能，讓我們深入研究一些圖像編輯用例。


  
  
  所見(jiàn)即所得編輯器中圖像編輯的用例



  
  
  裁剪圖像


上傳圖像后，單擊它，旁邊會(huì)出現(xiàn)一個(gè) Filestack 圖標(biāo)。單擊該圖標(biāo)進(jìn)入文件轉(zhuǎn)換視圖。在“變換”選項(xiàng)卡下，選擇“裁剪”并根據(jù)您的喜好調(diào)整圖像。請(qǐng)注意，您甚至可以在上傳圖像之前裁剪和旋轉(zhuǎn)圖像。讓我們上傳一張圖像，然后使用 Filestack 轉(zhuǎn)換對(duì)其進(jìn)行裁剪。



這就是使用 Filestack 裁剪圖像的樣子。您可以選擇不同的裁剪選項(xiàng)，包括自由形狀、圓形、方形和我們?cè)谶@里使用的 16:9。裁剪完成后，單擊復(fù)選按鈕并點(diǎn)擊“保存”。


  
  
  應(yīng)用過(guò)濾器


濾鏡已成為每個(gè)處理圖像的應(yīng)用程序的重要組成部分。使用 Filestack 和 Froala，您可以通過(guò)單擊上傳圖像旁邊的 Filestack 圖標(biāo)并轉(zhuǎn)到“過(guò)濾器”選項(xiàng)卡來(lái)完成此操作。從那里，您可以從許多圖像過(guò)濾器中進(jìn)行選擇，例如寶麗來(lái)、棕褐色、灰度等等?，F(xiàn)在，讓我們對(duì)裁剪后的圖像應(yīng)用濾鏡。




  
  
  添加和增強(qiáng)文本


無(wú)論是為章節(jié)標(biāo)題添加標(biāo)題，還是為產(chǎn)品或房地產(chǎn)列表添加價(jià)格，文本對(duì)于圖像編輯都是必不可少的。使用 Froala Editor，您可以添加具有不同字體和樣式的文本。使用之前的圖像，讓我們添加一些文本并增強(qiáng)它。




  
  
  插入邊框


我們還可以使用 Filestack 的轉(zhuǎn)換功能輕松地將邊框或框架插入到圖像中。讓我們轉(zhuǎn)到“邊框”選項(xiàng)卡并為圖像自定義邊框：

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




  
  
  結(jié)論


對(duì)于任何現(xiàn)代應(yīng)用程序來(lái)說(shuō)，圖像編輯都是一個(gè)有價(jià)值的工具。借助 Froala 等工具，您可以加快實(shí)現(xiàn)具有卓越圖像編輯功能的所見(jiàn)即所得編輯器。這些工具允許您裁剪、添加文本和濾鏡、插入邊框以及將疊加層應(yīng)用于圖像。

通過(guò)遵循本指南，您現(xiàn)在可以開(kāi)始實(shí)現(xiàn)這些功能，而不需要太多的努力?，F(xiàn)在，您已準(zhǔn)備好提供流暢、愉快的圖像編輯體驗(yàn)，讓用戶無(wú)需離開(kāi)編輯器即可微調(diào)圖像。

本文最初發(fā)布于Froala 的博客。