README

介绍

本扩展旨在简化在Symfony 4.4+/5.0+中集成和使用Froala编辑器。

如果您想与低于4.3版本的Symfony一起使用，请参阅v2文档。v2.x与Symfony 2.x到4.x兼容，但一些弃用功能未修复，并且静态文件已集成到扩展中。

还有一个可用的v3版本，与Symfony 4.3+/5.0+兼容，但表单类型选项没有以froala_前缀，这是v4扩展的主要原因。

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

从v3迁移到Froala Editor bundle v4

它现在仅支持Symfony 4.4+ & 5.0+。

如果您以某种方式覆盖/继承自扩展的类，请小心，因为一些参数和返回类型已添加。

所有表单类型选项现在必须以前缀froala_开头

// Before
$builder->add('field', FroalaEditorType::class, [
    'toolbarButtons' => [...],
]);

// After
$builder->add('field', FroalaEditorType::class, [
    'froala_toolbarButtons' => [...],
]);

安装

步骤1：使用composer安装扩展

composer require kms/froala-editor-bundle

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

步骤2：将扩展添加到您的bundles.php

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

步骤3：导入路由

# config/routes.yaml 
kms_froala_editor:
    resource: '@KMSFroalaEditorBundle/Resources/config/routing.yml'
    prefix:   /froalaeditor

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

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

步骤5：配置扩展

必需

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

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

其他选项

支持所有Froala选项（在此处提供列表）。只需添加选项名称（如果它在您的表单类型中，则以前缀froala_开头）和您的值。如果您想保留Froala的默认值，则不要在配置文件中提供任何内容。对于需要数组的选项，提供一个值数组。对于需要对象的选项，提供一个键/值数组。

请注意，某些选项需要一些插件（所有信息都在Froala文档中提供）。

以下是对每种选项类型的示例

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

为了更好地与Symfony集成，已添加一些自定义选项，请参阅以下完整列表

# config/packages/kms_froala_editor.yaml
kms_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 javascripts inclusion (not concerning CodeMirror).
    # Usage: if you are using Grunt 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 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/kmsfroalaeditor/froala_editor"
    basePath: "/my/custom/path".

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

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

只需在表单中添加一个Froala类型

use KMS\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/kms/froala-editor-bundle/src/Resources/public/froala_editor/目录中

bin/console froala:install

有几个参数/选项可用

第一个（也是唯一）参数（可选）：下载后文件将放置的绝对路径。默认为vendor/kms/froala-editor-bundle/src/Resources/public/froala_editor/。
选项tag：要安装的Froala版本（例如，v3.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" />

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

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

使用Twig扩展

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

{{ froala_display(myContentHtml) }}

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

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

当使用配置文件时，将使用并覆盖根配置选项

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

use KMS\FroalaEditorBundle\Form\Type\FroalaEditorType;

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

在这个例子中，profile_1配置文件将设置这些配置选项

heightMax: 500
attribution：false

更多配置

插件

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

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

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

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

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

概念：图片上传/管理器

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

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

为了更好地与Symfony集成，已添加一些自定义选项，请参阅以下完整列表

# config/packages/kms_froala_editor.yaml
kms_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 rewritting for your assets.
    # Default: same value as provided as folder.
    imageUploadPath: "/my/upload/path"

概念：文件上传

此捆绑包提供了将Froala文件上传概念集成到您的自定义Web服务器上的功能（有关上传文件夹之类的配置选项，请参阅自定义选项）。

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

为了更好地与Symfony集成，已添加一些自定义选项，请参阅以下完整列表

# config/packages/kms_froala_editor.yaml
kms_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/kms_froala_editor.yaml
kms_froala_editor:
    saveURL: "my_save_route"
    saveInterval: 2500
    saveParam: "content"

为了更好地与Symfony集成，已添加一些自定义选项，请参阅以下完整列表

# config/packages/kms_froala_editor.yaml
kms_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;

function froalaDisplayError(p_editor, error ) {
    alert(`Error ${error.code}: ${error.message}`);
}

window.froalaDisplayError = froalaDisplayError;

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

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

如果需要，请勿忘记将生成的Encore CSS/JS文件导入到您的HTML中。

待办事项

添加一些测试

许可证

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

贡献

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

请注意，有一些助手可以维护代码质量，您可以使用以下命令运行这些助手

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

kms / froala-editor-bundle

维护者

详情

README

介绍

目录

从v3迁移到Froala Editor bundle v4

安装

步骤1：使用composer安装扩展

步骤2：将扩展添加到您的bundles.php

步骤3：导入路由

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

步骤5：配置扩展

必需

其他选项

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

步骤7：安装资产文件

步骤8：显示编辑器内容

手动

使用Twig扩展

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

更多配置

插件

概念：图片上传/管理器

概念：文件上传

概念：自动保存

Webpack Encore配置

待办事项

许可证

贡献