【検証中】Laravel 10 で TinyMCE を使用する

注）この記事はまだ検証中の内容を表示しています。

TinyMCE とは？

TinyMCE は、Web ページ上でリッチテキスト編集を可能にする WYSIWYG (What You See Is What You Get) エディタです。ブログ記事の作成、フォームの入力、CMS など、様々な場面で活用されています。Laravel 10 と組み合わせることで、より洗練されたユーザーインターフェースを実現できます。

Laravel 10 で TinyMCE を導入する手順

1. TinyMCE のインストール

Bash

npm install tinymce

コードは注意してご使用ください。

または、CDN を利用する方法もあります。TinyMCE の公式ドキュメントを参照してください。

2. Blade テンプレートへの組み込み

HTML

<textarea id="mytextarea"></textarea>

<script src="{{ asset('js/app.js') }}"></script>

コードは注意してご使用ください。

3. JavaScript で初期化

JavaScript

import * as tinymce from 'tinymce';

tinymce.init({
    selector: '#mytextarea',
    plugins: 'code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
});

コードは注意してご使用ください。

selector: 編集対象の textarea の ID を指定します。
plugins: 使用するプラグインを指定します。
toolbar: ツールバーに表示するボタンを指定します。

4. Vite への設定 (Laravel 10 で推奨)

Vite を使用している場合は、vite.config.js に以下の設定を追加します。

JavaScript

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  resolve: {
    alias: {
      tinymce: '/node_modules/tinymce/tinymce.min.js',
    },
  },
});

コードは注意してご使用ください。

画像アップロード機能の実装

TinyMCE で画像をアップロードするには、サーバーサイドの処理と連携させる必要があります。

サーバーサイド (Laravel)

画像を受け取るためのコントローラーを作成します。
ストレージに画像を保存します。
JSON形式で画像のURLを返します。

クライアントサイド (JavaScript)

TinyMCE の設定で、画像アップロードの URL を指定します。
アップロードされた画像の情報を取得し、エディタに挿入します。

その他設定例

言語設定:JavaScriptlanguage: 'ja' コードは注意してご使用ください。
テーマ:JavaScriptskin: 'oxide-dark' コードは注意してご使用ください。
カスタムボタン:JavaScriptsetup: function (editor) { editor.ui.registry.addButton('mybutton', { text: 'My Button', onAction: function () { // ボタンクリック時の処理 } }); } コードは注意してご使用ください。