Development
How to add TinyMCE in Laravel
TinyMce is a rich content editor being widely used in various web applications. This tutorial covers how we can integrate TinyMCE in a Laravel project. Before we start, we assume that you have already installed the following dependencies;
- Php
- Node
- Composer
- Now let’s create a fresh installation of Laravel using the following composer command
composer create-project laravel/laravel project
- Let’s change the current directory to Laravel installation directory using the command cd
Cd project
- Now to open the current folder in VS Code Studio using the following command
Code .
- Next, Install the node package manager using vs code terminal
npm install
- Add TinyMCE package to project using composer command
composer require tinymce/tinymce
- Open the webpack.mix.js and add following line
mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');this will copy all tinymce required files in public folder that will be used in later stage
- To copy files to public folder use following Mix command
npx mix
- Now open the blade template of your choice and add the following Html
<form method=”post”> <textarea id=”editor”>My first content line!</textarea> </form>
- Now it’s time to add js code to your blade template. Add the following to head <head> or the end of <body> tag.
<script src=”{{ asset(‘js/tinymce/tinymce.min.js’) }}” referrerpolicy=”origin”></script> <script> tinymce.init({ selector: ‘textarea#editor, // Replace this CSS selector to match the placeholder element for TinyMCE plugins: ‘code table lists’, toolbar: ‘undo redo | formatselect| bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table’ }); </script>
- Now finally, run the server to see if all is working fine.
php artisan serve