PHPackages mati365/ckeditor5-livewire - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. mati365/ckeditor5-livewire ActiveLibrary[Templating & Views](/categories/templating) mati365/ckeditor5-livewire ========================== CKEditor 5 integration for Laravel Livewire 1.10.0(1mo ago)413.9kโ†“40.4%4[1 PRs](https://github.com/Mati365/ckeditor5-livewire/pulls)MITTypeScriptPHP >=8.3CI passing Since Oct 26Pushed 2mo ago2 watchersCompare [ Source](https://github.com/Mati365/ckeditor5-livewire)[ Packagist](https://packagist.org/packages/mati365/ckeditor5-livewire)[ RSS](/packages/mati365-ckeditor5-livewire/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (15)Versions (29)Used By (0) ckeditor5-livewire ================== [](#ckeditor5-livewire) [![License: MIT](https://camo.githubusercontent.com/a7e65aee57b11d28e4caff8b945729a66be0bb663f7f93bd24c5aa65699f148e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](LICENSE)[![PRs Welcome](https://camo.githubusercontent.com/8449a7f3ef91618e035cfb7e4b73ba2bcfa5ca36f136d3ad8d5afb0ece60630d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d677265656e2e7376673f7374796c653d666c61742d737175617265)](http://makeapullrequest.com)[![GitHub code size in bytes](https://camo.githubusercontent.com/e9eb3354b7a0b14627e64b8747502f5041fe6d33f4d087cd9ca503889b01b31d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c616e6775616765732f636f64652d73697a652f6d6174693336352f636b656469746f72352d6c697665776972653f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/e9eb3354b7a0b14627e64b8747502f5041fe6d33f4d087cd9ca503889b01b31d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c616e6775616765732f636f64652d73697a652f6d6174693336352f636b656469746f72352d6c697665776972653f7374796c653d666c61742d737175617265)[![GitHub issues](https://camo.githubusercontent.com/2da0d2fbc954394c173e5b8e713ea74866c1184e5c5a26e3ea0522d6411c6070/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6d6174693336352f636b656469746f72352d6c697665776972653f7374796c653d666c61742d737175617265)](https://github.com/Mati365/ckeditor5-livewire/issues)[![TS Coverage](https://camo.githubusercontent.com/e05e33c0320498dab1b7b46967039e85f7cc71e51c024fb182d38750bda77fe9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d3130302532352d627269676874677265656e3f6c6f676f3d74797065736372697074266c6f676f436f6c6f723d7768697465267374796c653d666c61742d737175617265)](https://app.codecov.io/gh/Mati365/ckeditor5-livewire/tree/main/npm_package%2Fsrc)[![PHP Coverage](https://camo.githubusercontent.com/95cd7ef3c0ddcdd41e7af45e777aaa8b756afe00934ff803c3a822b656ac0301/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d3130302532352d627269676874677265656e3f6c6f676f3d706870266c6f676f436f6c6f723d7768697465267374796c653d666c61742d737175617265)](https://app.codecov.io/gh/Mati365/ckeditor5-livewire/tree/main/src)[![NPM Version](https://camo.githubusercontent.com/e2481531e5232efe05ff0811f45731a7d9c63eb91b0e516b5849dbbb14f290db/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f636b656469746f72352d6c697665776972653f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/e2481531e5232efe05ff0811f45731a7d9c63eb91b0e516b5849dbbb14f290db/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f636b656469746f72352d6c697665776972653f7374796c653d666c61742d737175617265)[![Packagist Version](https://camo.githubusercontent.com/b107b0d01c53357e69c85ef0465918917d80bcaf9cbc9ed3aa664c79562b08bd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6174693336352f636b656469746f72352d6c697665776972653f7374796c653d666c61742d73717561726526636f6c6f723d253233393234356261)](https://camo.githubusercontent.com/b107b0d01c53357e69c85ef0465918917d80bcaf9cbc9ed3aa664c79562b08bd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6174693336352f636b656469746f72352d6c697665776972653f7374796c653d666c61742d73717561726526636f6c6f723d253233393234356261) CKEditor 5 for Livewire โ€” a lightweight WYSIWYG editor integration for Laravel. It works with Livewire components and standard Blade forms. Easy to set up, it supports custom builds, dynamic loading, and localization. The package includes JavaScript hooks, reusable components, and options for customization, and is suitable for both open-source and commercial projects. Important This integration is unofficial and not maintained by CKSource. For official CKEditor 5 documentation, visit [ckeditor.com](https://ckeditor.com/docs/ckeditor5/latest/). If you encounter any issues in editor, please report them on the [GitHub repository](https://github.com/ckeditor/ckeditor5/issues). [![CKEditor 5 Classic Editor in Laravel Livewire application](docs/intro-classic-editor.png)](docs/intro-classic-editor.png) Table of Contents ----------------- [](#table-of-contents) - [ckeditor5-livewire](#ckeditor5-livewire) - [Table of Contents](#table-of-contents) - [Installation ๐Ÿš€](#installation-) - [๐Ÿ  Self-hosted via NPM](#-self-hosted-via-npm) - [๐Ÿ“ก CDN Distribution](#-cdn-distribution) - [Basic Usage ๐Ÿ](#basic-usage-) - [Simple Editor โœ๏ธ](#simple-editor-%EF%B8%8F) - [Configuration โš™๏ธ](#configuration-%EF%B8%8F) - [Override default preset configuration ๐Ÿง‘โ€๐Ÿ’ป](#override-default-preset-configuration-) - [Define your configuration directly in the view ๐Ÿ’ป](#define-your-configuration-directly-in-the-view-) - [Define reusable configuration presets ๐Ÿงฉ](#define-reusable-configuration-presets-) - [Dynamic presets ๐ŸŽฏ](#dynamic-presets-) - [Providing the License Key ๐Ÿ—๏ธ](#providing-the-license-key-%EF%B8%8F) - [Localization ๐ŸŒ](#localization-) - [CDN Translation Loading ๐ŸŒ](#cdn-translation-loading-) - [Global Translation Config ๐Ÿ› ๏ธ](#global-translation-config-%EF%B8%8F) - [Custom translations ๐ŸŒ](#custom-translations-) - [Editor Types ๐Ÿ–Š๏ธ](#editor-types-%EF%B8%8F) - [Classic editor ๐Ÿ“](#classic-editor-) - [Inline editor ๐Ÿ“](#inline-editor-) - [Decoupled editor ๐ŸŒ](#decoupled-editor-) - [Multiroot editor ๐ŸŒณ](#multiroot-editor-) - [Advanced configuration โš™๏ธ](#advanced-configuration-%EF%B8%8F) - [Livewire Sync ๐Ÿ”„](#livewire-sync-) - [Two way binding using `wire:model` โ›“๏ธ](#two-way-binding-using-wiremodel-%EF%B8%8F) - [Multiroot Editables ๐ŸŒณโ›“๏ธ](#multiroot-editables-%EF%B8%8F) - [Bidirectional Communication using Events ๐Ÿ”„](#bidirectional-communication-using-events-) - [Editor โ†’ Livewire: Content Change Event ๐Ÿ“ค](#editor--livewire-content-change-event-) - [Livewire โ†’ Editor: Set Content Event ๐Ÿ“ฅ](#livewire--editor-set-content-event-) - [Editor โ†’ Livewire: Editor Ready Event โœ…](#editor--livewire-editor-ready-event-) - [Focus Tracking ๐Ÿ‘๏ธ](#focus-tracking-%EF%B8%8F) - [Watchdog ๐Ÿถ](#watchdog-) - [How it works โš™๏ธ](#how-it-works-%EF%B8%8F) - [Disabling the watchdog ๐Ÿšซ](#disabling-the-watchdog-) - [Context ๐Ÿค](#context-) - [Basic usage ๐Ÿ”ง](#basic-usage--1) - [Custom context translations ๐ŸŒ](#custom-context-translations-) - [Custom plugins ๐Ÿงฉ](#custom-plugins-) - [Editors and Contexts registry ๐Ÿ‘€](#editors-and-contexts-registry-) - [Development โš™๏ธ](#development-%EF%B8%8F) - [Running Tests ๐Ÿงช](#running-tests-) - [Psst... ๐Ÿ‘€](#psst-) - [Trademarks ๐Ÿ“œ](#trademarks-) - [License ๐Ÿ“œ](#license-) Installation ๐Ÿš€ -------------- [](#installation-) Choose between two installation methods based on your needs. Both approaches provide the same functionality but differ in how CKEditor 5 assets are loaded and managed. ### ๐Ÿ  Self-hosted via NPM [](#-self-hosted-via-npm) Bundle CKEditor 5 with your application for full control over assets, custom builds, and offline support. This method is recommended for advanced users or production applications with specific requirements. **Complete setup:** 1. **Add PHP dependency** to your `composer.json`: ``` composer require mati365/ckeditor5-livewire ``` 2. **Install CKEditor 5 via NPM:** ``` npm install ckeditor5 ckeditor5-premium-features ckeditor5-livewire ``` **Note:** If you use `esbuild` as your bundler, the `ckeditor5-premium-features` may be not required. However, it is needed for `vite` as it has stricter verification of dependencies. Even if you don't use any premium features, the package depends on it and you can safely install it on free or open-source licenses. 3. **Import integration** in your `resources/js/app.js`: ``` import 'ckeditor5-livewire'; ``` 4. **Import styles** in your `resources/css/app.css`: ``` @import "ckeditor5/ckeditor5.css"; ``` 5. **Use in Blade templates** (no CDN assets needed): ``` ``` ### ๐Ÿ“ก CDN Distribution [](#-cdn-distribution) Load CKEditor 5 directly from CKSource's CDN - no build configuration required. This method is ideal for most users who want quick setup and don't need custom builds. **Complete setup:** 1. **Add PHP dependency** to your `composer.json`: ``` composer require mati365/ckeditor5-livewire ``` 2. **Install NPM package:** ``` npm install ckeditor5-livewire ``` 3. **Import integration** in your `resources/js/app.js`: ``` import 'ckeditor5-livewire'; ``` 4. **Exclude CKEditor from bundler** in your `vite.config.js`: ``` import { viteCKEditorExternalize } from 'ckeditor5-livewire/bundler/vite-ckeditor5-externalize'; import laravel from 'laravel-vite-plugin'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), viteCKEditorExternalize() ], }); ``` 5. **Add license key** (see [Providing the License Key ๐Ÿ—๏ธ](#providing-the-license-key-%EF%B8%8F) section) 6. **Use in Blade templates:** ``` ``` That's it! ๐ŸŽ‰ Basic Usage ๐Ÿ ------------- [](#basic-usage-) Get started with the most common usage patterns. These examples show how to render editors in your templates and handle real-time content changes. ### Simple Editor โœ๏ธ [](#simple-editor-๏ธ) Create a basic editor with default toolbar and features. Perfect for simple content editing without server synchronization. ``` ``` Configuration โš™๏ธ ---------------- [](#configuration-๏ธ) You can configure the editor *presets* in your `config/ckeditor5.php` file. The default preset is `default`, which provides a basic configuration with a toolbar and essential plugins. The preset is an array that contains the editor configuration, including the toolbar items and plugins. There can be multiple presets, and you can switch between them by passing the `preset` attribute to the component. ### Override default preset configuration ๐Ÿง‘โ€๐Ÿ’ป [](#override-default-preset-configuration-โ€) You can pass initial content and merge additional configuration. In scenario below, the `mergeConfig` will extend the `default` preset configuration to make the menu bar visible. It's only shallow merge, so nested arrays will be replaced, not merged. ``` ``` ### Define your configuration directly in the view ๐Ÿ’ป [](#define-your-configuration-directly-in-the-view-) Override the default configuration with custom plugins and toolbar items. In this example, the editor will only have `Essentials`, `Paragraph`, `Bold`, `Italic`, `Link`, and `Undo` plugins, and the toolbar will contain only bold, italic, link, undo, and redo buttons. The editor locale is set to Polish (`pl`), and a custom translation for the "Bold" label is provided. ``` ``` ### Define reusable configuration presets ๐Ÿงฉ [](#define-reusable-configuration-presets-) In order to override the default preset or add custom presets, publish the configuration file: ``` php artisan vendor:publish --tag=ckeditor5-config ``` Then modify `config/ckeditor5.php`: ```