How Laravel and Composer work with WYSIWYGs

There’s usually a lot of questions to answer when selecting the right framework for your application. If you need one that doesn’t make use of JavaScript, in any way, shape, or form, there’s options available. However, if you need something that has some flexibility with an active community and clear docs, it’s still hard to narrow down your choices.

Let’s consider the Laravel framework. It’s a framework built using PHP, which brings a lot of advantages for web development. 

This article gives you an introduction to Laravel, Composer, and also explores other important development decisions. These include ways to keep your framework up to date, and how Composer and Laravel integrate with WYSIWYG components, that is, the essential rich text editor component in your project.

What is Composer in Laravel?

Laravel is a scalable framework for building applications. To make building applications easier, Laravel works with Composer – which is a dependency manager – and Composer gets libraries and other components as needed. 

Laravel provides a lot of the same advantages as other web application frameworks, allowing you to install and track any required dependencies and libraries. It also  provides more specific features such as dependency injection, unit testing, queues, and real-time events.

Essentially, using Laravel and Composer represents a big saving in time and energy. What's also useful is the Blade templating engine that comes packaged with Laravel.

Using Laravel and Composer with Blades

As a templating engine, Blade has two key tasks in Laravel:

1. Processing templates written in PHP
2. Outputting a web application a browser can display.

A Blade template renders the front end application on the server, which makes database connections faster.

Blade templates are also cached until they are modified, which adds to your application's speed. Combined with Blade, Laravel and Composer are save your customer's time and energy.

✏️NOTE: If you need a dynamic User Interface (UI) you can set up the Laravel Livewire framework with Composer. This version of Laravel includes the capacity for a dynamic and reactive front end. Laravel Liverwire works with Blade directives as well, so you can combine all these components together.

How to install Laravel using Composer

To get Laravel installed using Composer, you need to make sure you have PHP and Composer itself available in your development environment. Then you can use Composer commands to get Laravel installed, and you do this by creating a new project:

1. Create a new Laravel project using Composer's create-project command:

   composer create-project laravel/laravel example-app

   COPY
2. Verify your new project is ready by changing into the example-app/ directory.

How to run a Laravel project

With your Laravel project now created, to get it up and running you need to run an artisan command:

php artisan serve

Artisan is the command line interface that comes packaged with Laravel, like the Blade templating engine. You can see a list of all the available commands when you run php artisan list. Use the help argument to get more information on any of the commands.

Laravel Composer update: keeping your project up-to-date

The first consideration when keeping your Laravel project up to date is to make sure you update the Laravel framework itself. You can do this with Composer. Run the composer update laravel/framework to update Laravel. You can also check for any outdated packages you have installed:

1. Run composer outdated to list any packages with new versions available
2. Use the composer update command to update the specific package

✏️NOTE: To keep Laravel Livewire up to date, you can use the same Composer command (composer update laravel/livewire). If you're using a version of Laravel Livewire prior to version 3, there is an upgrade guide available to make the update process easier.

Managing Laravel without composer: possibilities and challenges

If you cannot or do not want to run Composer as your dependency manager, be aware that it’s strongly recommended to make use of Composer to handle your Laravel dependencies. Composer solves two major problems when developing with Laravel:

1. Keeping track of the number of dependencies for your project
2. Configuring the correct version numbers of different dependencies

In fact, when it comes to version number tracking, Composer has the tilde (~) operator, which you can use to allow Composer to allow minor updates, while keeping major dependency versions stable.

When it comes to visualizing your dependencies, you don’t need to use Composer to view dependency trees. There are alternatives to visualize dependencies in your application.

Laravel and Composer are designed to work together, and they’ll need to be present in one place for project development. However, Composer does not need to be available when your Laravel application is deployed to production environments. The option to manage dependencies in a development environment only is always available.

Implementing WYSIWYG editors in Laravel projects

To implement different WYSIWYG editors into Laravel, the editor must work as a Laravel component. This can be put together using some script tags within Blade files. There are dedicated integration packages available:

TinyMCE: You can rapidly integrate TinyMCE into your Laravel project using the dedicated Laravel composer package.  This adds TinyMCE as your Laravel project’s WYSIWYG, using the composer require tinymce/tinymce command.

Froala: Using the constructor function FroalaEditor, it’s possible to add the Froala editor into a Laravel project Blade file. To configure the editor beyond the basic setup, you’ll need to make use of Froala’s APIs to modify the FroalaEditor function.

TipTap: Community integrations for the TipTap editor are available to test out, and the TipTap docs website is even experimenting with using Laravel Livewire.

CKEditor 5: While CKEditor does not support frameworks written in languages other than JavaScript, you can still include CKEditor 5 into your Laravel application. You can make use of the CKEditor online builder, and move the file directory into the Laravel application assets folder.

Quill: Similar to TipTap, the community experiments with different kinds of use-cases for Laravel integration, such as using Quill in a Laravel application form.

Laravel, Composer and TinyMCE

For more information on how you can add TinyMCE to Laravel with Composer, check on the documentation. For more on TinyMCE and PHP, the how-to guide on saving TinyMCE content to a database works as a starter guide for how to start linking your server and front-end with TinyMCE.

Contact us if you have any questions on how TinyMCE can best work for your Laravel project.