• \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

    當您運行網(wǎng)絡(luò)應(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

    如果您還沒有,請通過創(chuàng)建免費的 Filestack 帳戶來獲取 API 密鑰。設(shè)置 Froala 和 Filestack 后,我們就完成了!您現(xiàn)在可以在應(yīng)用程序中使用具有圖像編輯功能的高級所見即所得編輯器。另外,編輯器現(xiàn)在應(yīng)該顯示如下:<\/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 圖標。單擊該圖標進入文件轉(zhuǎn)換視圖。在“變換”選項卡下,選擇“裁剪”并根據(jù)您的喜好調(diào)整圖像。請注意,您甚至可以在上傳圖像之前裁剪和旋轉(zhuǎn)圖像。讓我們上傳一張圖像,然后使用 Filestack 轉(zhuǎn)換對其進行裁剪。<\/p>\n\n

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

    這就是使用 Filestack 裁剪圖像的樣子。您可以選擇不同的裁剪選項,包括自由形狀、圓形、方形和我們在這里使用的 16:9。裁剪完成后,單擊復選按鈕并點擊“保存”。<\/p>\n\n

    \n \n \n 應(yīng)用過濾器<\/strong>\n<\/h2>\n\n

    濾鏡已成為每個處理圖像的應(yīng)用程序的重要組成部分。使用 Filestack 和 Froala,您可以通過單擊上傳圖像旁邊的 Filestack 圖標并轉(zhuǎn)到“過濾器”選項卡來完成此操作。從那里,您可以從許多圖像過濾器中進行選擇,例如寶麗來、棕褐色、灰度等等?,F(xiàn)在,讓我們對裁剪后的圖像應(yīng)用濾鏡。<\/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 的轉(zhuǎn)換功能輕松地將邊框或框架插入到圖像中。讓我們轉(zhuǎn)到“邊框”選項卡并為圖像自定義邊框:<\/p>\n\n

    \"How<\/p>

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

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

    \n \n \n 結(jié)論<\/strong>\n<\/h2>\n\n

    對于任何現(xiàn)代應(yīng)用程序來說,圖像編輯都是一個有價值的工具。借助 Froala 等工具,您可以加快實現(xiàn)具有卓越圖像編輯功能的所見即所得編輯器。這些工具允許您裁剪、添加文本和濾鏡、插入邊框以及將疊加層應(yīng)用于圖像。<\/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

    圖像編輯對于每個所見即所得編輯器來說都是一項強大的功能。它顯著增強了應(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');
    

    當您運行網(wǎng)絡(luò)應(yīng)用程序時,您應(yī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,以及一些選擇器選項。這些選項決定允許的文件類型和來源。

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

    How to Add Image Editing Capabilities to Your WYSIWYG Editor

    請注意編輯器現(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)換對其進行裁剪。

    How to Add Image Editing Capabilities to Your WYSIWYG Editor

    這就是使用 Filestack 裁剪圖像的樣子。您可以選擇不同的裁剪選項,包括自由形狀、圓形、方形和我們在這里使用的 16:9。裁剪完成后,單擊復選按鈕并點擊“保存”。

    應(yīng)用過濾器

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

    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 的轉(zhuǎn)換功能輕松地將邊框或框架插入到圖像中。讓我們轉(zhuǎn)到“邊框”選項卡并為圖像自定義邊框:

    How to Add Image Editing Capabilities to Your WYSIWYG Editor

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

    How to Add Image Editing Capabilities to Your WYSIWYG Editor

    結(jié)論

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

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

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

    以上是如何向所見即所得編輯器添加圖像編輯功能的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

    本站聲明
    本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權(quán)歸原作者所有,本站不承擔相應(yīng)法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn

    熱AI工具

    Undress AI Tool

    Undress AI Tool

    免費脫衣服圖片

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驅(qū)動的應(yīng)用程序,用于創(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)

    Java vs. JavaScript:清除混亂 Java vs. JavaScript:清除混亂 Jun 20, 2025 am 12:27 AM

    Java和JavaScript是不同的編程語言,各自適用于不同的應(yīng)用場景。Java用于大型企業(yè)和移動應(yīng)用開發(fā),而JavaScript主要用于網(wǎng)頁開發(fā)。

    JavaScript評論:簡短說明 JavaScript評論:簡短說明 Jun 19, 2025 am 12:40 AM

    JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)

    如何在JS中與日期和時間合作? 如何在JS中與日期和時間合作? Jul 01, 2025 am 01:27 AM

    JavaScript中的日期和時間處理需注意以下幾點:1.創(chuàng)建Date對象有多種方式,推薦使用ISO格式字符串以保證兼容性;2.獲取和設(shè)置時間信息可用get和set方法,注意月份從0開始;3.手動格式化日期需拼接字符串,也可使用第三方庫;4.處理時區(qū)問題建議使用支持時區(qū)的庫,如Luxon。掌握這些要點能有效避免常見錯誤。

    為什么要將標簽放在的底部? 為什么要將標簽放在的底部? Jul 02, 2025 am 01:22 AM

    PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

    JavaScript與Java:開發(fā)人員的全面比較 JavaScript與Java:開發(fā)人員的全面比較 Jun 20, 2025 am 12:21 AM

    JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)

    JavaScript:探索用于高效編碼的數(shù)據(jù)類型 JavaScript:探索用于高效編碼的數(shù)據(jù)類型 Jun 20, 2025 am 12:46 AM

    javascripthassevenfundaMentalDatatypes:數(shù)字,弦,布爾值,未定義,null,object和symbol.1)numberSeadUble-eaduble-ecisionFormat,forwidevaluerangesbutbecautious.2)

    什么是在DOM中冒泡和捕獲的事件? 什么是在DOM中冒泡和捕獲的事件? Jul 02, 2025 am 01:19 AM

    事件捕獲和冒泡是DOM中事件傳播的兩個階段,捕獲是從頂層向下到目標元素,冒泡是從目標元素向上傳播到頂層。1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實現(xiàn);2.事件冒泡是默認行為,useCapture設(shè)為false或省略;3.可使用event.stopPropagation()阻止事件傳播;4.冒泡支持事件委托,提高動態(tài)內(nèi)容處理效率;5.捕獲可用于提前攔截事件,如日志記錄或錯誤處理。了解這兩個階段有助于精確控制JavaScript響應(yīng)用戶操作的時機和方式。

    Java和JavaScript有什么區(qū)別? Java和JavaScript有什么區(qū)別? Jun 17, 2025 am 09:17 AM

    Java和JavaScript是不同的編程語言。1.Java是靜態(tài)類型、編譯型語言,適用于企業(yè)應(yīng)用和大型系統(tǒng)。2.JavaScript是動態(tài)類型、解釋型語言,主要用于網(wǎng)頁交互和前端開發(fā)。

    See all articles