图像编辑是每个Wysiwyg编辑器的强大功能。它极大地增强了应用程序的功能，并使想要使用上传图像做更多更多事情的用户感到高兴。 如今，用户期望应用程序具有图像编辑功能，但是实现此类功能并不像听起来那么琐碎。

上传图像和其他媒体可能是编辑器具有的正常功能，但是图像编辑通常不是。这就是为什么在本教程中，我将向您展示如何在编辑器中实现图像编辑功能。我们将探索图像裁剪，过滤器，添加文本等等。

使用Froala的内置FILESTACK IMAGE TRUMAGERATIONS轻松添加映像编辑。

customize filestack的选项具有对图像上传和编辑的更多控制。 处理弗罗拉（Froala）事件，每当用户与filestack交互时。

通过将编辑器与内置图像编辑整合在一起。
• ，节省了很多时间。

设置wysiwyg编辑器

• 在进入图像编辑之前，我们首先需要Wysiwyg编辑器。为此，请在您需要的应​​用程序中包含Froala编辑器文件（我们将在此中使用CDN）。然后，我们使用ID“
）的ID初始化
• 元素内部的编辑器。
  在您的js文件上，添加以下代码行：

• 新的froalaeditor（'＃froala-editor'）;
• 运行Web应用程序时，应该查看以下屏幕：

  [2

  运行编辑器后，我们将通过启用本地集成的FileStack插件来添加图像编辑功能。我们通过为编辑器指定选项来做到这一点：

新的froalaeditor（'＃froala-editor'，{ FileStackOptions：{ filestackapi：“ yourfilestackapikey'， uploadtofilestackonly：是的， Pickeroptions：{ 接受： [ '.pdf'， “图像/jpeg”， “图像/png”， '图像/*'， '视频/*'， '声音的/*' ]，， 源源工：[ 'local_file_system'， 'url'， 'Facebook'， 'instagram' 这是给 } }，， Toolbarbuttons：{ 'Morerich'：{ “按钮”：['openfilepickerimageonly'，'Openfilepickervideoonly'，'Openfilepicker'，'insertlink'，'insertlink'，'inserttable'，'socticons'，'specioncharacters'，'specialcharacters'，'inserthr'，'inserthr']，]，]，]，]， “按钮可见”：3 }，， 'moretext'：{ 'buttons'：[“大胆”，“斜体”，“下划线”，“ fontfamily”，“ fontsize'，'textcolor'，'backgroundColor'，'clearformatting'] }，， 'horeparagraph'：{ “按钮”：[“ AlignLeft'，“ AlignCenter”，“ formatolsimple”，“ Anignright”，“ AlignJustify”，“ formatol”，“ formatol”，“ formatul'，'pragraphaphaphformat'，'段落'，'段落风格' }，， 'Moremisc'：{ 'buttons'：['undo'，'redo'，fullscreen'，'selectall'，'html'，'help']， 'align'：“对”， “按钮可见”：2 } }，， 事件：{ 'filestack.uploadedtofilestack'：function（wendesp）{ console.log（“触发回调以上传到filestack”，），） }，， 'Filestack.fileStackPickeropened'：function（wendesp）{ console.log（“打开的选择器触发回调”，），） }，， 'filestack.filestackpickerclosed'：功能（响应）{ console.log（“触发了针对接收器关闭的回调”，），） }，， 'filestack.uploadfailedtofilestack'：function（wendesp）{ console.log（响应）; }，， }，， 高度单：500， Heightmax：1000 }）; 在这里，我们为编辑器的工具栏按钮，大小，事件和FileStack的其他选项声明了一些选项。在

fileStackOptions

属性中，我们声明了我们的filestack api键，该键可以确定文件是否专门上传到FileStack，以及一些Picker选项。这些选项确定允许的文件类型和源。 ，如果尚未创建免费的FileStack帐户，请获取API密钥。将Froala和FileStack设置好后，我们完成了！现在，您可以使用应用程序中的图像编辑功能的高级Wysiwyg编辑器。另外，以下是编辑器现在应该出现的方式： [2 注意编辑器现在如何更好地尺寸。更重要的是，我们现在拥有带有文件架图标的按钮。这些按钮允许用户通过Filestack上传图像，视频和其他文件。现在，要向您展示一些FileStack插件的功能，让我们深入研究一些图像编辑用例。


    
    
    

    
    
    
    



    




On your JS file, add the following line of code:



new FroalaEditor('#froala-editor');



上传图像后，单击它，然后在其旁边显示文件架图标。单击图标以输入文件转换视图。在“转换”选项卡下，选择“作物”，然后将图像调整为您的喜好。请注意，您甚至可以在上传图像之前裁剪并旋转图像。让我们上传图像，然后使用Filestack Transformations进行裁剪。


[2

这是使用Filestack裁剪图像的样子。您可以从不同的种植选项中进行选择，包括自由形式，圆形，方形和16：9，我们在这里使用。裁剪后，单击“检查”按钮并点击“保存”。


  
  
  
应用过滤器
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和Froala，您可以通过单击上传图像旁边的Filestack图标并转到“过滤器”选项卡来实现这一目标。从那里，您可以从许多图像过滤器中进行选择，例如宝丽来，棕褐色，灰度等。现在，让我们在我们的裁剪图像中应用一个过滤器。

[2


  
  
  添加和增强文本


是否将标题或价格添加到产品或房地产清单中，文本对于图像编辑至关重要。使用Froala编辑器，您可以添加带有不同字体和样式的文本。使用前面的图像，让我们添加一些文本并增强它。

[2


  
  
  插入边框


我们还可以使用Filestack的转换功能轻松地将边框或框架插入到我们的图像上。让我们转到“边境”选项卡，并为我们的图像自定义边框：


[2

单击“保存”后，我们应该在编辑器上查看我们的增强图像。从那里，您可以检查Filestack仪表板上的上传图像。转到“内容浏览器”，您会看到我们的图像，您可以单独下载或在应用程序上下载。作为参考，以下是执行所有这些操作后图像应如何看：

[2


  
  
  
结论


对于任何现代应用程序，图像编辑是一个有价值的工具。借助Froala等工具，您可以加快具有出色图像编辑功能的Wysiwyg编辑器的实现。这样的工具允许您裁剪，添加文本和过滤器，插入边框并将叠加层应用于图像。


通过遵循本指南，您现在可以开始实施此类功能而无需太多努力。现在，您已经准备好提供平稳，愉快的图像编辑体验，使用户可以在不离开编辑器的情况下微调自己的图像。

This article was initially posted on
 
Froala's blog
.