Integrate TinyMCE and Laravel Filemanager into the Laravel project

Tram Ho

1. Introduction

Content management (CMS) websites all embed an editor, allowing users to work with text, effects such as fonts, colors, and images that make text editing. be more convenient. Some popular and free online editors like tinyMCE, CKeditor, SummerNote … Here in this article, I want to introduce you to the process of installing tinyMCE editor. Not only the editor, I will integrate laravel filemanager into tinyMCE editor which allows to manage files upon upload.

2. TinyMCE

Introduce

  • TinyMCE is the world’s most popular open source web-based WYSIWYG editor.
  • Trusted and loved by millions of developers and integrated into thousands of applications, such as:
    • Content management system (CMS)
    • Learning management system (LMS)
    • Customer relationship management system (CRM) and marketing automation
    • Email marketing system
    • Create content in SaaS system.

Install TinyMCE

  • Step 1: Install through the package manager

  • Step 2: Use webpack mix

Here we mix the file node_modules / tinymce / tinymce.min.js into public / js / app.js file and copy the plugins, themes, icons, skins out to the public folder so that tiny can call.

  • Step 3: Create view and route

  • The interface of tinymce after integrating into textarea.

3. Laravel filemanager

Introduce

  • File processing is one of the standard processes in most web projects, but it’s not easy to build from scratch: file extensions, uploads, thumbnails, protection.
  • Functions:
    • Integration of CKEditor and TinyMCE
    • Check for updaload data.
    • Crop and resize images
    • Public and private directory for many users
    • It is possible to customize routes, middlewares, views, and folder paths.
    • Supports two types: files and images. Each type works in different directories.
    • Supported languages: 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.

Setting

  • Request:
    • php> = 5.4
    • exif extension
    • fileinfo extension
    • GD Library> = 2.0 or Imagick PHP extension> = 6.5.7
    • Laravel 5
  • Proceed to install
  • Step 1: Install the unisharp/laravel-filemanager package using composer

  • Step 2: Put out the config and assets of the package

Step 3: Clear cache

Step 4: Sysmlink resources from storage to public so that laravel filemanager can access

Step 5: Create necessary routes for laravel filemanager

  • Try the demo page {BASE_URL}/laravel-filemanager/demo

The lfm config file

  • Some configurations to note:
    • paginator : Displays the number of each page.
    • disk : Where to store the image (with public value: Will store it under local, s3 : Will store in the cloud based on config in filemanager.php)
    • should_validate_size : validate file upload.
    • should_validate_mime : validate minetype.
    • raster_mimetypes : Defines the minetype to be uploaded.
  • The rest of the configs you can learn by yourself …

4. Integrate laravel filemanager into tinymce

  • Tinymce also has a powerful file manager, https://www.tiny.cloud/drive, but if you want to use this function, you have to pay a fee and it will be saved on its server. So laravel filemanager is not a bad choice for file management.
  • Step 1: Use the plugins image, imagetool and toolbar image
    • The tinymce configuration will be as follows:

  • Step 2: Use the file_picker_callback(callback, value, meta) function to file_picker_callback(callback, value, meta) the dialog, select the image file, click on the upload icon
    • callback : A callback is called, when you have the file it expects a new value for the field as the first argument and optional meta information for the other fields in the dialog as the second argument.
    • value : The current value of the affected field.
    • meta : The object contains the values ​​of the other fields in the specified dialog.
    • Tiny only provides us with the hook, and how to implement it, I code it myself.

  • First, file_picker_callback will get with, hieght of the current screen, to calculate the size of dialog when uploading.
  • Next will check the file type and generate a url.
  • Open a dialog to select an image.
    • url : The value just generated above.
    • title : The title of the dialog.
    • width : The width of the dialog.
    • height : The height of the dialog.
    • onMessage : When selecting a picture in the filemanager, it will return the image link for the dialog of tinymce.
  • Now try the demo for a bit.

5. References

Share the news now

Source : Viblo