如何为所见即所得编辑器添加图像编辑功能

# Web 开发 # JavaScript

图像编辑是每个所见即所得编辑器的强大功能。它显著增强了应用程序的功能，并让想要对上传的图像进行更多操作的用户感到满意。

如今，用户希望应用程序具有图像编辑功能，但实现这样的功能并不像听起来那么简单。

例如，在某些 LMS、CMS 和文档管理系统中，用户需要在 WYSIWYG HTML 编辑器中进行图像编辑。

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

关键要点

使用 Froala 的内置 Filestack 图像转换轻松添加图像编辑。

自定义 Filestack 的选项以更好地控制图像上传和编辑。

处理 Froala 事件以在用户与 Filestack 交互时执行操作。

仅需几秒钟和几行代码即可设置所见即所得编辑器。

通过集成内置图像编辑功能的编辑器可以节省大量时间。

设置所见即所得编辑器

在开始图像编辑之前，我们首先需要一个所见即所得的编辑器。为此，请根据需要将 Froala 编辑器文件包含在您的应用程序中（我们将在此使用 CDN）。然后，我们在 id 为“”的元素内初始化编辑器





    
    
    

    Image Editing with Froala and Filestack

在您的 JS 文件中，添加以下代码行：

new FroalaEditor('#froala-editor');

当您运行 Web 应用程序时，您应该会看到以下屏幕：

一旦我们的编辑器运行起来，我们将通过启用本机集成的 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 附加选项的选项。在属性中，我们声明了 Filestack API 密钥、一个布尔值（用于确定文件是否专门上传到 Filestack）和一些选择器选项。这些选项决定了允许的文件类型和来源。

如果您还没有，请通过创建免费的 Filestack 帐户获取 API 密钥。设置完 Froala 和 Filestack 后，我们就大功告成了！您现在可以在应用程序中使用具有图像编辑功能的高级所见即所得编辑器。此外，编辑器现在应显示如下：

请注意，编辑器现在的尺寸更合适了。更重要的是，我们现在有了带有 Filestack 图标的按钮。这些按钮允许用户通过 Filestack 上传图片、视频和其他文件。现在，为了向您展示 Filestack 插件的一些功能，让我们深入了解一些图片编辑用例。

WYSIWYG 编辑器中图像编辑的用例

裁剪图像

上传图片后，单击该图片，旁边会显示一个 Filestack 图标。单击图标进入文件转换视图。在“转换”选项卡下，选择“裁剪”并根据自己的喜好调整图片。请注意，您甚至可以在上传图片之前裁剪和旋转图片。让我们上传图片，然后使用 Filestack 转换裁剪它。

使用 Filestack 裁剪图像的效果如下。您可以从不同的裁剪选项中进行选择，包括自由形状、圆形、正方形和我们在此处使用的 16:9。裁剪完成后，单击复选按钮并点击“保存”。

应用过滤器

滤镜已成为每个处理图像的应用程序的重要组成部分。使用 Filestack 和 Froala，您可以通过单击上传图像旁边的 Filestack 图标并转到“滤镜”选项卡来实现此目的。从那里，您可以从许多图像滤镜中进行选择，例如宝丽来、棕褐色、灰度等。现在，让我们将滤镜应用于裁剪后的图像。

添加和增强文本

无论是将标题添加到章节标题，还是将价格添加到产品或房地产清单，文本对于图像编辑都是必不可少的。使用 Froala 编辑器，您可以添加具有不同字体和样式的文本。使用之前的图像，让我们添加一些文本并对其进行增强。

插入边框

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

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

结论

对于任何现代应用程序来说，图像编辑都是一个有价值的工具。使用 Froala 等工具，您可以加快实现具有出色图像编辑功能的所见即所得编辑器。此类工具允许您裁剪、添加文本和过滤器、插入边框以及将叠加层应用于图像。

按照本指南，您现在可以轻松开始实现这些功能。现在，您已准备好提供流畅、愉快的图像编辑体验，让用户无需离开编辑器即可微调图像。

**本文最初发布于** **。**

CLIS.CC