README

介绍

此包旨在轻松地将 Froala 编辑器集成到 Symfony 6.4+/7.0+ 中。

此包是 KMSFroalaEditorBundle 的维护分支。

变更日志可在以下位置找到

CHANGELOG-1.x.md

从 KMS 迁移到 Leapt Froala 编辑器包

目前仅支持 Symfony 6.4+ & 7.0+ 和 PHP >= 8.2。v1.0.0 支持 Symfony 5.3，但在 v1.1.0 中已取消支持。v1.4.0 支持 Symfony < 6.4，但在 v1.5.0 中已取消支持。

将所有 "kms" 替换为 "leapt"，匹配大小写：KMS 变为 Leapt，kms 变为 leapt。

可用演示

如果您想在本地安装包之前尝试它，可以运行此演示项目：[https://github.com/leapt/demo](https://github.com/leapt/demo)

安装

步骤 1：使用 composer 安装包

composer require leapt/froala-editor-bundle

注意：如果您使用 Symfony Flex 安装包并接受配方，则可以跳过步骤 2 到 4。

步骤 2：将包添加到 bundles.php

// config/bundles.php
return [
    //..
    Leapt\FroalaEditorBundle\LeaptFroalaEditorBundle::class => ['all' => true],
];

步骤 3：导入路由

# config/routes.yaml 
leapt_froala_editor:
    resource: '@LeaptFroalaEditorBundle/Resources/config/routing.php'
    prefix:   /froalaeditor

步骤 4：加载 Twig 表单小部件

# In config/packages/twig.yaml
twig:
    form_themes:
        - '@LeaptFroalaEditor/Form/froala_widget.html.twig'

步骤 5：配置包

必需

首先，您必须选择您的语言，其他设置是可选的（见下文）。

# config/packages/leapt_froala_editor.yaml 
leapt_froala_editor:
    language: 'nl'

其他选项

支持所有 Froala 选项（[在此处提供列表](https://www.froala.com/wysiwyg-editor/docs/options)）。只需添加选项名称（如果它在您的表单类型中，则前面加 froala_）并设置您的值。如果您想保留 Froala 默认值，则在配置文件中不提供任何内容。对于需要数组的选项，提供值数组。对于需要对象的选项，提供键/值数组。

注意，某些选项需要一些插件（所有信息均提供在 [Froala 文档](https://www.froala.com/wysiwyg-editor/docs/options) 中）。

以下为每种选项类型的示例

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    toolbarInline: true
    tableColors: [ '#FFFFFF', '#FF0000' ]
    saveParams: { "id" : "myEditorField" }

为了更好地与 Symfony 集成，添加了一些自定义选项，下面是完整列表

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Froala licence number if you want to use a purchased licence.
    serialNumber: 'XXXX-XXXX-XXXX'

    # Disable CodeMirror inclusion.
    includeCodeMirror: false

    # Disable Font Awesome inclusion.
    includeFontAwesome: false

    # Disable all bundle JavaScript inclusion (not concerning CodeMirror).
    # Usage: if you are using Grunt or Webpack or other, and you want to include yourself all scripts. 
    includeJS: false

    # Disable all bundle CSS inclusion (not concerning Font Awesome nor CodeMirror).
    # Usage: if you are using Grunt or Webpack or other, and you want to include yourself all stylesheets. 
    includeCSS: false

    # Change the froala base path.
    # Useful eg. when you load it from your own public directory.
    # Defaults to "/bundles/leaptfroalaeditor/froala_editor"
    basePath: '/my/custom/path'

    # Custom JS file.
    # Usage: add custom plugins/buttons...
    customJS: '/custom/js/path'

步骤 6：将 Froala 添加到您的表单

只需在您的表单中添加 Froala 类型

use Leapt\FroalaEditorBundle\Form\Type\FroalaEditorType;

$builder->add('field', FroalaEditorType::class);

所有配置项都可以覆盖

$builder->add('field', FroalaEditorType::class, [
    'froala_language'      => 'fr',
    'froala_toolbarInline' => true,
    'froala_tableColors'   => ['#FFFFFF', '#FF0000'],
    'froala_saveParams'    => ['id' => 'myEditorField'],
]);

步骤 7：安装资源文件

要安装资源文件，有 froala:install 命令，该命令下载 Froala 编辑器的最新版本，并将其默认放置在 vendor/leapt/froala-editor-bundle/src/Resources/public/froala_editor/ 目录中

bin/console froala:install

有几个参数/选项可用

第一个（也是唯一）参数（可选）：文件下载后放置的绝对路径。默认为 vendor/leapt/froala-editor-bundle/src/Resources/public/froala_editor/。
选项 tag：要安装的 Froala 版本（例如 v4.0.1）。默认为 master。
选项 clear（不期望值，默认禁用）：允许命令清除之前安装的文件（如果路径已存在）。

启动安装命令后，您需要链接资源，例如：

bin/console assets:install --symlink public

步骤 8：显示编辑器内容

手动

为了在编辑器外保留编辑后的HTML外观，您必须包含以下CSS文件：

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

此外，您应确保将编辑的内容放在具有fr-view类的元素内：

<div class="fr-view">
    {{ myContentHtml|raw }}
</div>

使用 Twig 扩展

要使用Twig扩展，只需调用display函数（注意，如果includeCSS参数为false，则不包含前端CSS文件）：

{{ froala_display(myContentHtml) }}

步骤 9：配置文件（自定义配置）

您可以在您的表单中定义多个配置配置文件，而无需重复这些配置。

使用配置文件时，将使用根配置选项并覆盖它们：

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    heightMax: 400
    attribution: false
    profiles:
        profile_1:
            heightMax: 500

use Leapt\FroalaEditorBundle\Form\Type\FroalaEditorType;

$builder->add('field', FroalaEditorType::class, [
    'froala_profile' => 'profile_1',
]);

在此示例中，profile_1配置文件将设置以下配置选项：

heightMax: 500
attribution：false

更多配置

插件

所有Froala插件都已启用，但如果您不需要其中一个，您可以禁用一些插件...

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Disable some plugins.
    pluginsDisabled: [ 'save', 'fullscreen' ]

...或只选择要启用的插件

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Enable only some plugins.
    pluginsEnabled: [ 'image', 'file' ]

可以通过在表单构建器中传递相同的数组来为每个Froala实例启用/禁用插件。

概念：图片上传/管理器

此捆绑包提供了将Froala图像上传概念集成到您的网站服务器以存储您的图像的功能（有关配置如上传文件夹的详细信息，请参阅自定义选项）。

如果想要使用自己的上传程序，可以覆盖配置（如果需要这样做，请解释为什么改进提供的上传程序）。

为了更好地与 Symfony 集成，添加了一些自定义选项，下面是完整列表

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # The image upload folder in your /web directory.
    # Default: "/upload".
    imageUploadFolder: '/my/upload/folder'

    # The image upload URL base.
    # Usage: if you are using URL rewriting for your assets.
    # Default: same value as provided as folder.
    imageUploadPath: '/my/upload/path'

概念：文件上传

此捆绑包提供了将Froala文件上传概念集成到您的网站服务器以存储您的文件的功能（请参阅自定义选项以配置如上传文件夹等）。

如果想要使用自己的上传程序，可以覆盖配置（如果需要这样做，请解释为什么改进提供的上传程序）。

为了更好地与 Symfony 集成，添加了一些自定义选项，下面是完整列表

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # The file upload folder in your /web directory.
    # Default: "/upload".
    fileUploadFolder: '/my/upload/folder'

    # The file upload URL base.
    # Usage: if you are using URL rewritting for your assets.
    # Default: same value as provided as folder.
    fileUploadPath: '/my/upload/path'

    # Your public directory, from the root directory.
    # Default: "/public"
    publicDir: '/home'

概念：自动保存

使用Froala自动保存概念在您的服务器上自动请求保存操作的功能正在运行，只需在您的配置文件中输入正确的选项即可：

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    saveURL: 'my_save_route'
    saveInterval: 2500
    saveParam: "content"

为了更好地与 Symfony 集成，添加了一些自定义选项，下面是完整列表

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Add some parameters to your save URL.
    # Usage: if you need parameters to generate your save action route (see save explaination below).
    # Default: null.
    saveURLParams: { "id" : "myId" }

您可以在您的保存路由中添加一些参数（请参阅自定义选项）。

Webpack Encore 配置

如果想要使用npm/yarn和Webpack Encore加载Froala资产文件，请按照以下步骤操作：

import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

// Load your languages
import 'froala-editor/js/languages/fr.js';

// Load all plugins, or specific ones
import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/css/plugins.pkgd.min.css';

window.FroalaEditor = FroalaEditor;

/**
 * @param editor Editor instance
 * @param error Error object generated by Froala
 * @param response Response object coming from the server
 */
function froalaDisplayError(editor, error, response) {
    alert(`Error ${error.code}: ${error.message}`);
}

window.froalaDisplayError = froalaDisplayError;

除了定义通用的froalaDisplayError函数外，您还可以为每个错误事件定义一个，使用以下函数名：

froalaImageErrorEventHandler
froalaImageManagerErrorEventHandler
froalaSaveErrorEventHandler
froalaFileErrorEventHandler
froalaVideoErrorEventHandler

现在您可以禁用Froala捆绑包CSS/JS的包含：

# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    includeJS: false
    includeCSS: false

如果需要，别忘了在HTML中导入生成的Encore CSS/JS文件。

待办事项

添加一些测试

许可协议

此捆绑包提供了WYSIWYG Froala Editor商业版本的集成。如果您没有许可证，请阅读Froala许可协议并访问定价页面。

贡献

欢迎贡献，例如发送拉取请求以添加功能/测试。

请注意，有一些辅助工具用于维护代码质量，您可以使用以下命令运行它们：

composer cs:dry # Code style check
composer phpstan # Static analysis
vendor/bin/phpunit # Run tests

leapt / froala-editor-bundle

维护者

详细信息

README

介绍

目录

从 KMS 迁移到 Leapt Froala 编辑器包

可用演示

安装

步骤 1：使用 composer 安装包

步骤 2：将包添加到 bundles.php

步骤 3：导入路由

步骤 4：加载 Twig 表单小部件

步骤 5：配置包

必需

其他选项

步骤 6：将 Froala 添加到您的表单

步骤 7：安装资源文件

步骤 8：显示编辑器内容

手动

使用 Twig 扩展

步骤 9：配置文件（自定义配置）

更多配置

插件

概念：图片上传/管理器

概念：文件上传

概念：自动保存

Webpack Encore 配置

待办事项

许可协议

贡献