daddl3/symfony-ckeditor-5-webpack

Symfony CKEditor5 Bundle for Webpack and Vite

0.0.5 2024-05-03 12:22 UTC

Requires

• php: ^8.2
• symfony/config: ^6 | ^7
• symfony/console: ^6 | ^7
• symfony/dependency-injection: ^6 | ^7
• symfony/form: ^6 | ^7
• symfony/framework-bundle: ^6 | ^7
• symfony/http-client: ^6 | ^7
• symfony/http-kernel: ^6 | ^7
• symfony/process: ^6 | ^7
• symfony/security-csrf: ^6 | ^7
• symfony/twig-bundle: ^6 | ^7

Requires (Dev)

• phpstan/phpstan: ^1.10
• roave/security-advisories: dev-latest
• symfony/webpack-encore-bundle: ^2.1

MIT

• daddl3

README

This bundle is designed to simplify the integration of CKEditor 5 into Symfony applications, offering multiple configuration options for various form fields. It includes a wide range of free tools to enhance the functionality of your text editors.

Installation

To install this bundle, execute the following command in your project directory:

    composer require daddl3/symfony-ckeditor-5-webpack

This command adds the Symfony CKEditor 5 Webpack Vite bundle to your project dependencies.

Usage Instructions

Genral

To customize the default configuration, simply include a YAML file within your package as shown below. Here's a comprehensive example featuring all known and registered configurations.

Please refer to symfony_ckeditor5.yaml for further details.

I have written the config in such a way that only one editor needs to be specified, and then any conceivable configuration can be made.

Adding to package.json

To ensure the necessary packages are installed, include the following line in your package.json file within the dependencies section:

    "@symfony/ckeditor5": "file:vendor/daddl3/symfony-ckeditor-5-webpack"

Then, run npm install or yarn install to install all required packages.

Webpack Configuration

For projects using Webpack, you need to integrate CKEditor with the following steps:

1. Require the CKEditor webpack entry file in your Webpack configuration:

const addCKEditor = require("./vendor/daddl3/symfony-ckeditor-5-webpack/assets/js/ckeditor-webpack-entry");

1. Invoke the addCKEditor function passing in the Encore object:

addCKEditor(Encore);

1. Add an entry for CKEditor in the Encore configuration:

Encore.addEntry(
    "ckeditor5",
    "./vendor/daddl3/symfony-ckeditor-5-webpack/assets/js/ckeditor5.js"
);

1. Install @ckeditor/ckeditor5-dev-utils

  yarn add @ckeditor/ckeditor5-dev-utils --dev

Vite Configuration

For projects using Vite, perform the following steps:

1. Import the CKEditor Vite plugin in your Vite configuration file:

import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5";

1. Add the CKEditor plugin to your Vite configuration's plugins array:

export default {
    plugins: [ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") })]
};

1. Specify the CKEditor script as an input in your Vite configuration:

ckeditor5: "./vendor/daddl3/symfony-ckeditor-5-webpack/assets/js/ckeditor5.js";

1. Install @ckeditor/vite-plugin-ckeditor5

  yarn add @ckeditor/vite-plugin-ckeditor5 --dev

Form Intregation

->add('form', Ckeditor5TextareaType::class, [
    'attr' => [
        'data-ckeditor5-config' => 'custom'
    ],
])

Add your configuration in the config. You can also leave out the attribute and a standard configuration will then be automatically adopted. If you store a config that is called "default", then this standard configuration will be used.

Image Upload

Routes

add a routes.yaml into your config and add to use the default controller

daddl3_symfonyckeditor5webpackvite_imageupload_upload:
    path: /ckeditor/upload
    controller: daddl3\SymfonyCKEditor5WebpackViteBundle\Controller\ImageUploadController::upload
    methods: [POST]

daddl3_symfonyckeditor5webpackvite_imageupload_browse:
    path: /ckeditor/browse
    controller: daddl3\SymfonyCKEditor5WebpackViteBundle\Controller\ImageUploadController::browse
    methods: [GET]

otherwise you have to configure the routes or use cloudServices

Easy Admin

to use this form you have to implement it

easy_admin:
    entities:
        Ckeditor5TextareaType: # Replace with your actual entity name
            class: daddl3\SymfonyCKEditor5WebpackViteBundle\Form\Ckeditor5TextareaType
            form:
                fields:
                    # Define other fields as needed
                    - { property: "text", type: 'App\Form\Ckeditor5TextareaType' }

And add it in your form

TextareaField::new('body')
    ->setFormType(Ckeditor5TextareaType::class)
    // If you want to use an own config
    ->setFormTypeOptions([
        'attr' => [
            'data-ckeditor5-config' => 'custom1'
        ],
    ]),
    // Don't forget to implement the JavaScript and CSS
    ->addHtmlContentsToHead($script . $link),

TODO

• Integrate CKEditor 5 Pro features.

When you need something, just text me.