Tích hợp TinyMCE và Laravel Filemanager vào dự án Laravel

Thứ Hai, 14/09/2020

Tram Ho

1. Mở đầu

Các trang web về quản trị nội dung (CMS) đều nhúng một trình soạn thảo editor, cho phép người dùng làm việc với văn bản, các hiệu ứng như phông chữ, màu sắc, cùng với hình ảnh khiến cho việc soạn thảo văn bản được thuận tiện hơn. Một số trình soạn thảo phổ biến và miễn phí trên internet như tinyMCE, CKeditor, SummerNote… Ở đây trong bài viết này, tôi muốn giới thiệu với bạn về quá trình cài đặt trình soạn thảo tinyMCE. Không chỉ trình soạn thảo, tôi sẽ tích hợp laravel filemanager vào trình soạn thảo tinyMCE cho phép quản lý các file khi upload.

2. TinyMCE

Giới thiệu

TinyMCE là trình soạn thảo WYSIWYG dựa trên web nguồn mở phổ biến nhất thế giới.
Được hàng triệu nhà phát triển tin cậy và yêu thích và được tích hợp vào hàng nghìn ứng dụng, chẳng hạn như:
- Hệ thống quản lý nội dung (CMS)
- Hệ thống quản lý học tập (LMS)
- Hệ thống quản lý quan hệ khách hàng (CRM) và tự động hóa tiếp thị
- Hệ thống tiếp thị qua email
- Tạo nội dung trong hệ thống SaaS.

Cài đặt TinyMCE

Bước 1: Cài đặt thông qua package manager

npm install tinymce
<span class="token constant">OR</span>
yarn add tinymce

npm install tinymce

OR

yarn add tinymce

Bước 2: Sử dụng webpack mix

mix<span class="token punctuation">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    <span class="token string">'resources/js/app.js'</span><span class="token punctuation">,</span>
    <span class="token string">'node_modules/tinymce/tinymce.min.js'</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">'public/js/app.js'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string">'resources/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

mix<span class="token punctuation">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string">'node_modules/tinymce/plugins'</span><span class="token punctuation">,</span> <span class="token string">'public/js/tinymce/plugins'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
mix<span class="token punctuation">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string">'node_modules/tinymce/themes'</span><span class="token punctuation">,</span> <span class="token string">'public/js/tinymce/themes'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
mix<span class="token punctuation">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string">'node_modules/tinymce/icons'</span><span class="token punctuation">,</span> <span class="token string">'public/js/tinymce/icons'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
mix<span class="token punctuation">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string">'node_modules/tinymce/skins'</span><span class="token punctuation">,</span> <span class="token string">'public/js/tinymce/skins'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

mix.js([

'resources/js/app.js',

'node_modules/tinymce/tinymce.min.js',

], 'public/js/app.js')

.sass('resources/sass/app.scss', 'public/css');

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

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

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

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

Ở đây ta mix file node_modules/tinymce/tinymce.min.js vào chung trong file public/js/app.js
và copy các plugins, themes, icons, skins ra ngoài thư mục public để tiny có thể gọi đến.

Bước 3: Tạo view và route

<span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ie=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Timymce<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        @csrf
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>timymce<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tinymce<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ mix('js/app.js') }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        tinymce<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">"js/tinymce"</span><span class="token punctuation">;</span>
        tinymce<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            selector<span class="token operator">:</span> <span class="token string">"textarea#timymce"</span><span class="token punctuation">,</span>
            toolbar<span class="token operator">:</span> "insertfile undo redo <span class="token operator">|</span> styleselect <span class="token operator">|</span> bold italic <span class="token operator">|</span>
            alignleft aligncenter alignright alignjustify <span class="token operator">|</span> bullist numlist outdent indent"<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

<!DOCTYPE html>

<head>

<title>Timymce</title>

</head>

<body>

@csrf

<button type="submit">Submit</button>

</form>

tinymce.baseURL = "js/tinymce";

tinymce.init({

selector: "textarea#timymce",

toolbar: "insertfile undo redo | styleselect | bold italic |

alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",

});

</script>

</body>

</html>

Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'/tinymce'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'tinymce'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Route::get('/tinymce', function () {;

return view('tinymce');

});

Giao diện của tinymce sau khi tích hợp vào textarea.

3. Laravel filemanager

Giới thiệu

Xử lý file là một trong những quy trình tiêu chuẩn trong hầu hết các dự án web, nhưng không dễ dàng để xây dựng từ đầu: file extensions, uploads, thumbnails, protection.
Các tính năng:
- Tích hợp CKEditor và TinyMCE
- Kiểm tra dữ liệu updaload.
- Cắt và thay đổi kích thước hình ảnh
- Thư mục công khai và riêng tư cho nhiều user
- Có thể tùy chỉnh routes, middlewares, views, và đường dẫn folder.
- Hỗ trợ hai loại : files and images. Mỗi loại hoạt động trong thư mục khác nhau.
- Các ngôn ngữ được hỗ trợ : 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.

Cài đặt

Yêu cầu:
- php >= 5.4
- exif extension
- fileinfo extension
- GD Library >=2.0 or Imagick PHP extension >=6.5.7
- Laravel 5
Tiến hành cài đặt
Bước 1: Cài đặt package unisharp/laravel-filemanager bằng composer

composer require unisharp/laravel-filemanager

1 2	composer require unisharp/laravel-filemanager

Bước 2: Đưa các config và assets của package ra ngoài

php artisan vendor:publish --tag<span class="token operator">=</span>lfm_config
php artisan vendor:publish --tag<span class="token operator">=</span>lfm_public

php artisan vendor:publish --tag=lfm_config

php artisan vendor:publish --tag=lfm_public

Bước 3: Clear cache

php artisan route:clear
php artisan config:clear

php artisan route:clear

php artisan config:clear

Bước 4: Sysmlink tài nguyên từ storage ra ngoài public để laravel filemanager có thể truy cập đến

php artisan storage:link

1 2	php artisan storage:link

Bước 5: Tạo các route cần thiết cho laravel filemanager

Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'prefix'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'laravel-filemanager'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'middleware'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'web'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'auth'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token package">UniSharp<span class="token punctuation"></span>LaravelFilemanager<span class="token punctuation"></span>Lfm</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">routes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {

UniSharpLaravelFilemanagerLfm::routes();

});

Thử vào trang demo nào {BASE_URL}/laravel-filemanager/demo

File config lfm

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token single-quoted-string string">'use_package_routes'</span>       <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">true</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'allow_private_folder'</span>     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">true</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'private_folder_name'</span>      <span class="token operator">=</span><span class="token operator">&gt;</span> UniSharp<span class="token package">LaravelFilemanager<span class="token punctuation"></span>Handlers<span class="token punctuation"></span>ConfigHandler</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token keyword">class</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'allow_shared_folder'</span>      <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'shared_folder_name'</span>       <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'shares'</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'folder_categories'</span>        <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'file'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
            <span class="token single-quoted-string string">'folder_name'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'files'</span><span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'startup_view'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'grid'</span><span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'max_size'</span>     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token comment">// size in KB</span>
            <span class="token single-quoted-string string">'valid_mime'</span>   <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
                <span class="token single-quoted-string string">'image/jpeg'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/pjpeg'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/png'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/gif'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/svg+xml'</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'image'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
            <span class="token single-quoted-string string">'folder_name'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'photos'</span><span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'startup_view'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'list'</span><span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'max_size'</span>     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token number">50000</span><span class="token punctuation">,</span> <span class="token comment">// size in KB</span>
            <span class="token single-quoted-string string">'valid_mime'</span>   <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
                <span class="token single-quoted-string string">'image/jpeg'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/pjpeg'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/png'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/gif'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'image/svg+xml'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'application/pdf'</span><span class="token punctuation">,</span>
                <span class="token single-quoted-string string">'text/plain'</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'paginator'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'perPage'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token number">30</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'disk'</span>                     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'public'</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'rename_file'</span>              <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'alphanumeric_filename'</span>    <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'alphanumeric_directory'</span>   <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'should_validate_size'</span>     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'should_validate_mime'</span>     <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'over_write_on_duplicate'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'should_create_thumbnails'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean constant">false</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'thumb_folder_name'</span>        <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'thumbs'</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'raster_mimetypes'</span>         <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'image/jpeg'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'image/pjpeg'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'image/png'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'thumb_img_width'</span>          <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token comment">// px</span>
    <span class="token single-quoted-string string">'thumb_img_height'</span>         <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token comment">// px</span>
    <span class="token single-quoted-string string">'file_type_array'</span>          <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'pdf'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Adobe Acrobat'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'doc'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft Word'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'docx'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft Word'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'xls'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft Excel'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'xlsx'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft Excel'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'zip'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Archive'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'gif'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'GIF Image'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'jpg'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'JPEG Image'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'jpeg'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'JPEG Image'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'png'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'PNG Image'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'ppt'</span>  <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft PowerPoint'</span><span class="token punctuation">,</span>
        <span class="token single-quoted-string string">'pptx'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Microsoft PowerPoint'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'php_ini_overrides'</span>        <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'memory_limit'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'256M'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</span>

<?php

return [

'use_package_routes' => true,

'allow_private_folder' => true,

'private_folder_name' => UniSharpLaravelFilemanagerHandlersConfigHandler::class,

'allow_shared_folder' => false,

'shared_folder_name' => 'shares',

'folder_categories' => [

'file' => [

'folder_name' => 'files',

'startup_view' => 'grid',

'max_size' => 50000, // size in KB

'valid_mime' => [

'image/jpeg',

'image/pjpeg',

'image/png',

'image/gif',

'image/svg+xml',

],

'image' => [

'folder_name' => 'photos',

'startup_view' => 'list',

'valid_mime' => [

'image/jpeg',

'image/pjpeg',

'image/png',

'image/gif',

'image/svg+xml',

'application/pdf',

'text/plain',

],

'paginator' => [

'perPage' => 30,

],

'disk' => 'public',

'rename_file' => false,

'alphanumeric_filename' => false,

'alphanumeric_directory' => false,

'should_validate_size' => false,

'should_validate_mime' => false,

'over_write_on_duplicate' => false,

'should_create_thumbnails' => false,

'thumb_folder_name' => 'thumbs',

'raster_mimetypes' => [

'image/jpeg',

'image/pjpeg',

'image/png',

],

'thumb_img_width' => 200, // px

'thumb_img_height' => 200, // px

'file_type_array' => [

'pdf' => 'Adobe Acrobat',

'doc' => 'Microsoft Word',

'docx' => 'Microsoft Word',

'xls' => 'Microsoft Excel',

'xlsx' => 'Microsoft Excel',

'zip' => 'Archive',

'gif' => 'GIF Image',

'jpg' => 'JPEG Image',

'jpeg' => 'JPEG Image',

'png' => 'PNG Image',

'ppt' => 'Microsoft PowerPoint',

'pptx' => 'Microsoft PowerPoint',

],

'php_ini_overrides' => [

'memory_limit' => '256M',

],

];

Một số cấu hình cần lưu ý:
- paginator: Hiển thị số lượng mỗi trang.
- disk: Nơi lưu trữ ảnh (với giá trị public: Sẽ lưu dưới local, s3: Sẽ lưu trữ trên cloud dựa vào config trong filemanager.php)
- should_validate_size: validate file upload.
- should_validate_mime: validate minetype.
- raster_mimetypes: Định nghĩa minetype được upload.
Các config còn lại các bạn có thể tự tìm hiểu…

4. Tích hợp laravel filemanager vào tinymce

Tinymce cũng có công cụ quản lý file mạnh mẽ là https://www.tiny.cloud/drive nhưng muốn sử dụng chức năng này thì phải tra phí và nó sẽ lưu trên server của nó mình không quản lý được. Vậy nên laravel filemanager là một lựa chọn không tệ để quản lý file.
Bước 1: Sử dụng plugins image, imagetool và toolbar image
- Cấu hình tinymce sẽ như sau:

tinymce<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    selector<span class="token operator">:</span> <span class="token string">"textarea#timymce"</span><span class="token punctuation">,</span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">"image imagetool"</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    toolbar<span class="token operator">:</span> "insertfile undo redo <span class="token operator">|</span> styleselect <span class="token operator">|</span> bold italic <span class="token operator">|</span>
        lignleft aligncenter alignright alignjustify <span class="token operator">|</span> bullist numlist outdent indent <span class="token operator">|</span>
        image"<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

tinymce.init({

selector: "textarea#timymce",

plugins: [

"image imagetool",

],

lignleft aligncenter alignright alignjustify | bullist numlist outdent indent |

image",

});

Bước 2: Sử dụng function file_picker_callback(callback, value, meta) để custom lại dialog chọn image file click vào biểu tượng upload
- callback: Một callback được gọi, khi bạn có tệp nó mong đợi giá trị mới cho trường làm đối số đầu tiên và tùy chọn thông tin meta cho các trường khác trong dialog làm đối số thứ hai.
- value: Giá trị hiện tại của trường bị tác động.
- meta: Đối tượng chứa giá trị của các trường khác trong dialog được chỉ định.
- Tiny chỉ cung cấp cho cung ta cái hook, còn việc triển khai như thế nào thì mình lại tự code.

tinymce<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    selector<span class="token operator">:</span> <span class="token string">"textarea#timymce"</span><span class="token punctuation">,</span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">"image imagetool"</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    toolbar<span class="token operator">:</span> "insertfile undo redo <span class="token operator">|</span> styleselect <span class="token operator">|</span> bold italic <span class="token operator">|</span>
        alignleft aligncenter alignright alignjustify <span class="token operator">|</span> bullist numlist outdent indent <span class="token operator">|</span>
        image"<span class="token punctuation">,</span>
    <span class="token function-variable function">file_picker_callback</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span> value<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> x <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth <span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
        <span class="token keyword">let</span> y <span class="token operator">=</span> window<span class="token punctuation">.</span>innerHeight<span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>

        <span class="token keyword">let</span> type <span class="token operator">=</span> <span class="token string">'image'</span> <span class="token operator">===</span> meta<span class="token punctuation">.</span>filetype <span class="token operator">?</span> <span class="token string">'Images'</span> <span class="token operator">:</span> <span class="token string">'Files'</span><span class="token punctuation">,</span>
            url  <span class="token operator">=</span> <span class="token string">'/laravel-filemanager?editor=tinymce5&amp;type='</span> <span class="token operator">+</span> type<span class="token punctuation">;</span>

        tinymce<span class="token punctuation">.</span>activeEditor<span class="token punctuation">.</span>windowManager<span class="token punctuation">.</span><span class="token function">openUrl</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url <span class="token operator">:</span> url<span class="token punctuation">,</span>
            title <span class="token operator">:</span> <span class="token string">'Filemanager'</span><span class="token punctuation">,</span>
            width <span class="token operator">:</span> x <span class="token operator">*</span> <span class="token number">0.8</span><span class="token punctuation">,</span>
            height <span class="token operator">:</span> y <span class="token operator">*</span> <span class="token number">0.8</span><span class="token punctuation">,</span>
            <span class="token function-variable function">onMessage</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> message</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token function">callback</span><span class="token punctuation">(</span>message<span class="token punctuation">.</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

tinymce.init({

selector: "textarea#timymce",

plugins: [

"image imagetool",

],

alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |

image",

file_picker_callback: function (callback, value, meta) {

let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

let type = 'image' === meta.filetype ? 'Images' : 'Files',

url = '/laravel-filemanager?editor=tinymce5&type=' + type;

tinymce.activeEditor.windowManager.openUrl({

url : url,

title : 'Filemanager',

width : x * 0.8,

height : y * 0.8,

onMessage: (api, message) => {

callback(message.content);

}

});

}

});

Đầu tiên file_picker_callback sẽ lấy with, hieght của màn hình hiện tại, để tính toán kích thước của dialog khi upload.
Tiếp theo sẽ kiểm tra file type và sinh ra một url.
Open một dialog cho phép chọn ảnh.
- url: Giá trị vừa được sinh ra ở trên.
- title: Tiêu đề của dialog.
- width: Chiều rộng của dialog.
- height: Chiều cao của dialog.
- onMessage: Khi chọn ảnh trong filemanager xong thì sẽ trả về link ảnh cho dialog của tinymce.
Bây giờ thử demo một chút.

5. Tài liệu tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tích hợp TinyMCE và Laravel Filemanager vào dự án Laravel

1. Mở đầu

2. TinyMCE

Giới thiệu

Cài đặt TinyMCE

3. Laravel filemanager

Giới thiệu

Cài đặt

File config lfm

4. Tích hợp laravel filemanager vào tinymce

5. Tài liệu tham khảo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript