JavaScript WYSIWYG web text editor (for laravel).

When integrating a JavaScript WYSIWYG (What You See Is What You Get) web text editor into a Laravel application, there are several popular options to consider. Here are some of the best WYSIWYG editors you can use with Laravel:

1. CKEditor

CKEditor is a powerful and highly configurable WYSIWYG editor that can be easily integrated with Laravel.

Installation:

1. Install CKEditor via npm or yarn:

   
   npm install @ckeditor/ckeditor5-build-classic --save
   

2. Include CKEditor in your view:

   
   <textarea name="content" id="editor"></textarea>
   <script src="{{ asset('js/ckeditor.js') }}"></script>
   <script>
       ClassicEditor
           .create(document.querySelector('#editor'))
           .catch(error => {
               console.error(error);
           });
   </script>
   

3. Create public/js/ckeditor.js and include CKEditor:

   
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
   
   ClassicEditor
       .create(document.querySelector('#editor'))
       .catch(error => {
           console.error(error);
       });
   

4. Compile your assets:

   
   npm run dev
   

2. TinyMCE

TinyMCE is another widely-used WYSIWYG editor known for its ease of use and extensibility.

Installation:

1. Install TinyMCE via npm or yarn:

   
   npm install tinymce --save
   

2. Include TinyMCE in your view:

   
   <textarea name="content" id="editor"></textarea>
   <script src="{{ asset('js/tinymce.min.js') }}"></script>
   <script>
       tinymce.init({
           selector: '#editor'
       });
   </script>
   

3. Create public/js/tinymce.min.js and include TinyMCE:

   
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver/theme';
   import 'tinymce/icons/default/icons';
   
   tinymce.init({
       selector: '#editor'
   });
   

4. Compile your assets:

   
   npm run dev
   

3. Quill

Quill is a modern, lightweight WYSIWYG editor with a modular architecture.

Installation:

1. Install Quill via npm or yarn:

   
   npm install quill --save
   

2. Include Quill in your view:

   
   <div id="editor"></div>
   <script src="{{ asset('js/quill.js') }}"></script>
   <script>
       var quill = new Quill('#editor', {
           theme: 'snow'
       });
   </script>
   

3. Create public/js/quill.js and include Quill:

   
   import Quill from 'quill';
   import 'quill/dist/quill.snow.css';
   
   var quill = new Quill('#editor', {
       theme: 'snow'
   });
   

4. Compile your assets:

   
   npm run dev
   

Integrating with Laravel Backend

To save the content from these editors to your Laravel application:

1. Create a Migration:

   
   php artisan make:migration create_posts_table --create=posts
   

   Update the migration file:

   
   Schema::create('posts', function (Blueprint $table) {
       $table->id();
       $table->text('content');
       $table->timestamps();
   });
   

2. Create a Model:

   
   php artisan make:model Post
   

3. Create a Controller:

   
   php artisan make:controller PostController
   

   Update the store method in PostController:

   
   public function store(Request $request)
   {
       $request->validate([
           'content' => 'required',
       ]);
   
       Post::create([
           'content' => $request->content,
       ]);
   
       return redirect()->back()->with('success', 'Post saved successfully.');
   }
   

4. Create a Blade View:

   
   <form action="{{ route('posts.store') }}" method="POST">
       @csrf
       <textarea name="content" id="editor"></textarea>
       <button type="submit">Save</button>
   </form>
   

By following these steps, you can integrate a WYSIWYG editor into your Laravel application and handle the content from the editor effectively.