Chia sẻ kiến thức

Tích hợp công cụ soạn thảo TinyMCE vào Laravel

0

Hôm nay vinasupport.com sẽ hướng dẫn bạn tích hợp một trong những công cụ chỉnh sửa phổ biến và nổi tiếng nhất là TinyMCE cho website của bạn.

TinyMCE là gì?

TinyMCE là trình soạn thảo HTML WYSIWYG tiên tiến nhất được thiết kế để đơn giản hóa việc tạo nội dung trang web. Nó được sử dụng rộng rãi trong WordPress, Medium, Evernote và nhiều công cụ khác. TinyMCE luôn là sự lựa chọn của nhóm phát triển chuyên nghiệp.

Tích hợp TinyMCE vào Laravel

Một website hướng đến nội dung thì không thể thiếu một công cụ chỉnh sửa. Vì vậy vinasupport.com sẽ hướng dẫn các bạn tích hợp trình soạn thảo TinyMCE vào Laravel với Vite trong serial lập trình Laravel.

Bước 1: Thêm TinyMCE vào dự án bằng trình soạn nhạc

composer require tinymce/tinymce

Bước 2: Tạo tập tin tinymce-config.blade.php trong thư mục tài nguyên/lượt xem/quản trị viên/thành phần/ của Laravel (Bạn có thể thay đổi theo đường dẫn dự án của bạn)

<script src="https://vinasupport.com/tich-hop-cong-cu-soan-thao-tinymce-vao-laravel/{{ Vite::asset("vendor/tinymce/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>

<script>
    tinymce.init({
        selector: '.web-editor', // Replace this CSS selector to match the placeholder element for TinyMCE
        plugins: 'code table lists',
        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
    });
</script>

Bước 3: Đặt vùng văn bản lớp của ai .web-biên tập viên bất cứ nơi nào trong dự án của bạn để hiển thị trình chỉnh sửa.

<textarea class="form-control web-editor" id="input-content" rows="3"></textarea>

Bước 4: Chạy lệnh nghệ nhân php phục vụ để khởi chạy web chúng ta sẽ có.

TinyMCE sử dụng Laravel Vite

Trường hợp bạn chạy server từ thư mục public thì bạn cài đặt plugin vite-plugin-tĩnh-sao chép để sao chép toàn bộ mã nguồn tinymce trong thư mục nhà cung cấp vào thư mục chung

Cài đặt plugin vui lòng tham khảo hướng dẫn tại đây:

Sử dụng file cấu hình vite.config.js với nội dung sau:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        viteStaticCopy({
            targets: [
                {
                    src: 'vendor/tinymce/tinymce',
                    dest: '../js/'
                },
            ]
        })
    ],
});

Sau đó chạy lệnh vite xây dựng để sao chép tập tin vào thư mục chung

Trong tập tin tinymce-config.blade.php chỉnh sửa thành:

<script src="https://vinasupport.com/tich-hop-cong-cu-soan-thao-tinymce-vao-laravel/{{ asset("js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
{{--<script src="https://vinasupport.com/tich-hop-cong-cu-soan-thao-tinymce-vao-laravel/{{ Vite::asset("vendor/tinymce/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>--}}

<script>
    tinymce.init({
        selector: '.web-editor', // Replace this CSS selector to match the placeholder element for TinyMCE
        plugins: 'code table lists',
        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
    });
</script>

TinyMCE sử dụng Laravel Mix

Trường hợp sử dụng Laravel Mix với Webpack, vui lòng tham khảo hướng dẫn chi tiết tại đây

Nguồn vinasupport.com

Leave a comment