Gutenberg với Laravel
Gutenberg – Blocks Editor là trình soạn thảo văn bản ở dạng khối của WordPress, kể từ bản cập nhật WordPress 5.0 đã trở thành trình soạn thảo WordPress mặc định.
Với anh chị em đã tiếp xúc và làm việc với Wordpress thì sẽ thấy giao diện sử dụng của Gutenberg rất quen thuộc.
A Gutenberg implementation for Laravel - Laraberg được xây dựng nhằm mục đích tích hợp trình soạn thảo Gutenberg với các dự án Laravel.
Bài viết này sẽ giới thiệu tổng quát về cách sử dụng của Laraberg.
Cài đặt Laraberg
composer require van-ons/laraberg
php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider"
Sau khi chạy vendor:publish thì nhớ sử dụng 2 file này
<link rel="stylesheet" href="{{asset('vendor/laraberg/css/laraberg.css')}}">
<script src="{{ asset('vendor/laraberg/js/laraberg.js') }}"></script>
Có 1 hạn chế là: css thiếu khá nhiều sau khi render ra nên chúng ta sẽ tự custom nhé ~~
Trình soạn thảo Gutenberg yêu cầu React, ReactDOM, Moment và JQuery ở trong môi trường mà nó chạy.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
Trình soạn thảo Gutenberg sẽ thay thế textarea trong form.
<textarea id="[id_here]" name="[name_here]" hidden>{{ $model->content }}</textarea>
Ngoài ra có 1 số tùy chọn cấu hình:
interface EditorSettings {
height?: string;
mediaUpload?: (upload: MediaUpload) => void;
fetchHandler?: FetchHandler;
disabledCoreBlocks?: string[];
alignWide?: boolean;
supportsLayout?: boolean;
maxWidth?: number;
imageEditing?: boolean;
colors?: Color[];
gradients?: Gradient[];
fontSizes?: FontSize[];
}
Ví dụ
const options = {
mediaUpload,
supportsLayout: true,
alignWide: true,
imageEditing: true,
colors: COLOR_PALETTE,
disabledCoreBlocks: []
};
Laraberg.init('[id_here]', options);
Custom Block
Với những block mà ta không thể sử dụng trình soạn thảo văn bản để vẽ ra được
Ví dụ như block bên dưới
Thì Custom Block chính là sự khác biệt của 1 Blocks Editor.
Cách tạo 1 Custom Block
const myBlock = {
title: 'My First Block!',
icon: 'universal-access-alt',
category: 'my-category',
edit() {
return <h1>Hello editor.</h1>
},
save() {
return <h1>Hello saved content.</h1>
}
}
Laraberg.registerBlockType('my-namespace/my-block', myBlock)
Một block được thiết lập yêu cầu title, icon, category
Và 2 phương thức edit() và save()
Block cho phép người dùng nhập text => attributes (chú ý selector cho mỗi attribute phải chính xác), Sử dụng RichText tag (tagName, multiline, className, onChange, value,… ; chú ý RichText.Content ở phương thức save().
Sau khi thiết lập xong thì đăng ký với Laraberg.
Những Custom Blocks được hiển thị cho phép người dùng dễ dàng sử dụng
Qua loa về 1 trình soạn thảo văn bản, cảm ơn mọi người đã theo dõi!
