Hướng dẫn cài đặt tinymce trong laravel

Việc quản lý upload file và ảnh làm sao để linh hoạt trong việc thao tác và đảm bảo an toàn cho server là một việc tương đối khó với các bạn mới bắt đầu. Package unisharp/laravel-filemanager, một package mạnh xong việc cài đặt cấu hình thì rất nhanh và đơn giản.

Show
  • Hỗ trợ upload ảnh với CKEditor và TinyMCE
  • Có nút upload ảnh riêng
  • Validate dữ liệu được tải lên
  • Cắt và chỉnh sửa kích thước của ảnh
  • Public và private thư mục ảnh cho chế độ Multi-User
  • Chỉnh sửa routes, middleware, views, đường dẫn ảnh
  • Hỗ trợ tạo file và ảnh:
  • Hỗ trợ đa ngôn ngữ: ar, bg, de, el, en, es, fa, fr, it, he, hu, nl, pl, pt-BR, pt_PT, ro, ru, sv, tr, zh-CN, zh-TW

Hướng dẫn cài đặt tinymce trong laravel

Cài đặt

  1. Cài đặt Unisharp/laravel-filemanager thông qua composer:

composer require unisharp/laravel-filemanager:~1.8

2. Đối với phiên bản laravel 5.5 trở xuống. Trong config/app.php thêm nhưng dòng sau:

'providers' => [

...  
UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,  
Intervention\Image\ImageServiceProvider::class,  
],

Và thêm alias:

'aliases' => [

...  
'Image' => Intervention\Image\Facades\Image::class,  
],

Đối với các phiên bản Laravel 5.5 trở lên thì có thể bỏ qua bước này =))

  1. Publish package’s config và assets:

php artisan vendor:publish --tag=lfm_config php artisan vendor:publish --tag=lfm_public

4.Xóa Cache:

php artisan route:clear php artisan config:clear

5. Chỉnh lại APP_URL trong file .env đúng đường dẫn web của bạn, cấp quyền ghi cho thư mục file & ảnh được cấu hình trong file config/lfm.php

Cấu hình package

File cấu hình của Laravel-filemanager được lưu trong config/lfm.php:

-Với Routes:

use_package_routes: Sử dụng routes của package, mặc định là true, nếu false bạn phải định nghĩa lại tất cả các routes của package .

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Laravel is a scaleable web application framework built on PHP. The following guides provide procedures for creating a new Laravel project and adding TinyMCE to the project.

These guides assist with adding TinyMCE to pages or views in Laravel. The example Laravel projects created in these procedures are based on the Laravel project documented in the Laravel Docs, under . These guides will create two blades: one for the JavaScript and another for the editor placeholder, to reflect how TinyMCE should be used in production environments.

  • Using TinyMCE from the Tiny Cloud CDN with the Laravel framework.
  • Using the TinyMCE Composer package with the Laravel framework.
  • Using the TinyMCE .zip package with the Laravel framework.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Vậy là trong admin chúng ta đã thêm xong. Tuy nhiên, chúng ta lại sử dụng bên frontend phiên bản Font Awesome khác nhau như v4.7.0. Vậy làm thế nào để bên frontend hiển thị được icon cho phiên bản này trong khi admin là v5.12.0. Các bạn chỉ cần điều chỉnh lại file plugin.js một tí là được. (còn các bạn đang dùng bản v5.12.0 giống trong admin thì ko cần nhé)

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

This guide assists with adding TinyMCE from the TinyMCE Composer package to pages or views in Laravel. The example Laravel project created in this procedure is based on the Laravel project documented in the Laravel Docs, under . The guide will create two blades: one for the JavaScript and another for the editor placeholder, to reflect how TinyMCE should be used in production environments.

This procedure assumes the following prerequisites have been installed:

  • PHP
  • Composer
  • Node.js

  1. On a command line (or command prompt), create a new Laravel project named my-example-app by running the following command:
    composer create-project laravel/laravel my-example-app  
    
  2. Change into the root directory of the Laravel application, such as:
  3. Install the required Node.js components, including Laravel Mix:
  4. Add TinyMCE to the project using Composer:
    composer require tinymce/tinymce  
    
  5. Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run, such as: File: webpack.mix.js
    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');  
    
  6. Run Laravel Mix to copy TinyMCE to the
    composer require tinymce/tinymce  
    
    0 directory:
  7. Create a new reusable for the TinyMCE configuration, such as:
    php artisan make:component Head/tinymceConfig  
    

    This will create the blade

    composer require tinymce/tinymce  
    
    2.
  8. Open the newly created
    composer require tinymce/tinymce  
    

    3 file in a text editor and replace the contents with:

    • The TinyMCE source script.
    • A TinyMCE configuration.

      For example: File:

      composer require tinymce/tinymce  
      

      2

        
        
      
  9. Create a second blade containing a placeholder HTML element for TinyMCE, such as:
    php artisan make:component Forms/tinymceEditor  
    

    This will create the blade

    composer require tinymce/tinymce  
    
    5.
  10. Open the newly created
    composer require tinymce/tinymce  
    

    3 file in a text editor and replace the contents with a placeholder, matching the CSS selector provided to the

    composer require tinymce/tinymce  
    

    7 option in the editor configuration. For example: File:

    composer require tinymce/tinymce  
    

    5

  11. Add the blade components on the pages or views where TinyMCE is needed. The configuration blade (
    composer require tinymce/tinymce  
    

    9 in this example) can be added to the

    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');  
    

    0 or at the end of the

    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');  
    

    1 on the target page or view. The placeholder blade (

    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');  
    
  12. should be added where TinyMCE is required on the page.

    For example: File:

    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');  
    

    3

      
      
        
          
          
        TinyMCE in Laravel  
         Insert the blade containing the TinyMCE configuration and source script >  
          
        
        
        

    TinyMCE in Laravel

    Insert the blade containing the TinyMCE placeholder HTML element >
  13. Start the Laravel development server to verify that TinyMCE loads on the page or view, such as running the following command and opening the page on the localhost.

For information on:

  • Customizing TinyMCE, see: Basic Setup.
  • The three editor modes, see:
    • TinyMCE classic editing mode.
    • TinyMCE inline editing mode.
    • TinyMCE distraction-free editing mode.
  • Adding TinyMCE plugins, see: Work with plugins to extend TinyMCE.
  • Localizing the TinyMCE editor, see: Localize TinyMCE.
  • For information on the CSS required to render some TinyMCE elements outside of the editor, see: Boilerplate content CSS.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.