piotrkochan/froala-editor-bundle

为 Symfony 5 & 6 提供 Froala 编辑器集成。

维护者

详情

github.com/piotrkochan/froala-editor-bundle

源代码

安装: 7

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 33

类型:symfony-bundle

dev-master 2022-09-04 15:07 UTC

Requires

Requires (Dev)

MIT eb653f8c1593e20bb76456b4f92bb7dc3a6ca675

wysiwygeditorfroala

This package is auto-updated.

Last update: 2024-09-04 19:48:43 UTC

README

Package version Build Status Downloads PHP Version Licence

简介

This is a fork of "leapt/froala-editor-bundle", works with php 7.4+

此包旨在轻松集成并使用 Froala 编辑器在 Symfony 5.4+/6.0+。

此包是 KMSFroalaEditorBundle 的维护分支。

变更日志在此处可用

目录

  1. 从 KMS 迁移到 Kochan Froala 编辑器包
  2. 安装
    1. 步骤 1: 使用 composer 安装包
    2. 步骤 2: 将包添加到您的 bundles.php
    3. 步骤 3: 导入路由
    4. 步骤 4: 加载 Twig 表单小部件
    5. 步骤 5: 配置包
      1. 必需
      2. 其他选项
    6. 步骤 6: 将 Froala 添加到您的表单
    7. 步骤 7: 安装资产文件
    8. 步骤 8: 显示编辑器内容
      1. 手动
      2. 使用 Twig 扩展
    9. 步骤 9: 配置文件（自定义配置）
  3. 更多配置
    1. 插件
    2. 概念：图片上传/管理器
    3. 概念：文件上传
    4. 概念：自动保存
    5. Webpack Encore 配置
  4. 待办事项
  5. 许可协议
  6. 贡献

从 KMS 迁移到 Kochan Froala 编辑器包

现在它只支持 Symfony 5.4+ & 6.0+，以及 PHP >= 8.0。在 v1.0.0 中支持 Symfony 5.3，但在 v1.1.0 中已停止支持。

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

安装

步骤 1: 使用 composer 安装包

composer require Kochan/froala-editor-bundle

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

步骤 2: 将包添加到您的 bundles.php

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

步骤 3: 导入路由

# config/routes.yaml 
kochan_froala_editor:
    resource: '@KochanFroalaEditorBundle/Resources/config/routing.php'
    prefix:   /froalaeditor

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

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

步骤 5: 配置包

必需

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

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

其他选项

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

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

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

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

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

# config/packages/kochan_froala_editor.yaml
kochan_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/kochanfroalaeditor/froala_editor"
    basePath: '/my/custom/path'

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

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

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

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

bin/console froala:install

有几个参数/选项可用

  • 第一个（也是唯一）参数（可选）：文件下载后放置的绝对路径。默认为 vendor/Kochan/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/kochan_froala_editor.yaml
kochan_froala_editor:
    heightMax: 400
    attribution: false
    profiles:
        profile_1:
            heightMax: 500
use Kochan\FroalaEditorBundle\Form\Type\FroalaEditorType;

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

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

  • heightMax: 500
  • attribution：false

更多配置

插件

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

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

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

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

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

概念：图片上传/管理器

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

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

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

# config/packages/kochan_froala_editor.yaml
kochan_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文件上传概念集成到您自己的Web服务器上以存储文件（请参阅自定义选项以配置上传文件夹等）。

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

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

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

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

# config/packages/kochan_froala_editor.yaml
kochan_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/kochan_froala_editor.yaml
kochan_froala_editor:
    includeJS: false
    includeCSS: false

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

待办事项

  • 添加一些测试

许可协议

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

贡献

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

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

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