- Laravelプロジェクトのセットアップ:
まず、Laravelプロジェクトをセットアップします。ターミナルで以下のコマンドを実行します。
composer create-project --prefer-dist laravel/laravel blog
- Livewireのインストール:
次に、Livewireをインストールします。プロジェクトのルートディレクトリで、以下のコマンドを実行します。
composer require livewire/livewire
- CKEditorのインストール:
CKEditorをインストールするために、プロジェクトのルートディレクトリで以下のコマンドを実行します。
composer require unisharp/laravel-ckeditor
php artisan vendor:publish --tag=ckeditor
- Livewireコンポーネントの作成:
Livewireコンポーネントを作成します。以下のコマンドを実行して、新しいLivewireコンポーネントを生成します。
php artisan make:livewire BlogEditor
- Livewireコンポーネントの設定:
app/Http/Livewire/BlogEditor.phpファイルを編集し、以下のようにコードを追加します。
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class BlogEditor extends Component
{
public $content;
public function render()
{
return view('livewire.blog-editor');
}
}
- ブログエディタのビューの作成:
resources/views/livewire/blog-editor.blade.phpファイルを作成し、以下のコードを追加します。
<div>
<textarea wire:model="content" id="editor"></textarea>
</div>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editor.model.document.on('change:data', () => {
@this.set('content', editor.getData());
});
})
.catch(error => {
console.error(error);
});
</script>
- ブログエディタを使用するルートの設定:
routes/web.phpファイルを編集し、以下のコードを追加します。
use App\Http\Livewire\BlogEditor;
Route::get('/blog', BlogEditor::class);
- ブログエディタの表示:
ブラウザで
http://localhost/blogにアクセスし、ブログエディタが表示されることを確認します。