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 serveContinue Reading
-
Health2 years ago
Melissa Peterman Weight Loss – What is Her Secret?
-
Design4 years ago
How to write Urdu, Arabic and Persian in Adobe Illustrator
-
Tech3 years ago
7 Types of Propaganda Techniques Advertisers Use
-
After Effects Tutorial4 years ago
How to Install Duik rigging tool in after effects
-
After Effects Tutorial5 years ago
Paper Plane Animation in After Effects
-
After Effects Tutorial5 years ago
2D Car Animation Tutorial in After Effects
-
Lifestyle5 months ago
Jorge Garcia Weight Loss Journey
-
Lifestyle3 months ago
Billy Gardell Incredible 150-Pound Weight Loss Journey