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

图像编辑对于每个所见即所得编辑器来说都是一项强大的功能。它显着增强了应用程序的功能，并使想要对上传的图像执行更多操作的用户感到满意。

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

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

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

要点

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

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

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

• 只需几秒钟和几行即可设置所见即所得编辑器。

• 通过将编辑器与内置图像编辑集成来节省大量时间。

设置所见即所得编辑器

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

    <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">



    <div>



<p>On your JS file, add the following line of code:<br>
</p>

<pre class="brush:php;toolbar:false">new FroalaEditor('#froala-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，以及一些选择器选项。这些选项决定允许的文件类型和来源。

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

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

所见即所得编辑器中图像编辑的用例

裁剪图像

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

这就是使用 Filestack 裁剪图像的样子。您可以选择不同的裁剪选项，包括自由形状、圆形、方形和我们在这里使用的 16:9。裁剪完成后，单击复选按钮并点击“保存”。

应用过滤器

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

添加和增强文本

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

插入边框

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

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

结论

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

通过遵循本指南，您现在可以开始实现这些功能，而不需要太多的努力。现在，您已准备好提供流畅、愉快的图像编辑体验，让用户无需离开编辑器即可微调图像。

本文最初发布于Froala 的博客。