Vue TinyMCE Component using Inertia to store and load data firing Laravel Controller / Laravel route

vue-tinymce-inertia-edit-save.md

npm install tinymce @tinymce/tinymce-vue

Vue component

<template>
  <div>
    <editor v-model="content" :init="tinymceConfig" />
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import { usePage } from '@inertiajs/inertia-vue3';

export default {
  components: {
    Editor,
  },
  setup() {
    const article = usePage();
    const tinymceConfig = {
      height: 500,
      menubar: false,
      plugins: ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help wordcount"],
      toolbar:
        "undo redo | formatselect | bold italic backcolor | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat | help",
    };
    return {
      content: article.props.content || '',
      tinymceConfig,
    };
  },
  methods: {
    save() {
      this.$inertia.put(route('article.update', { id: this.$route.params.id }), {
        content: this.content,
      });
    },
  },
};
</script>

In the above example, we're using the usePage hook from @inertiajs/inertia-vue3 to get the initial value of the content prop from the Laravel controller. We're also defining a tinymceConfig object to configure the TinyMCE editor.

We're then using the v-model directive to bind the content prop to the editor's value. When the user updates the editor, the content prop will be updated automatically.

Finally, we're defining a save method to send a PUT request to the Laravel controller to update the content value in the database. You'll need to define a Laravel route to handle this request.

In the setup function, we're also checking if article.props.content exists and using it as the initial value for the editor if it does. We're also initializing content to an empty string if it doesn't exist to avoid Vue warnings about uncontrolled components.

Controller

use App\Models\Article;
use Illuminate\Http\Request;

class ArticleController extends Controller
{
    public function edit($id)
    {
        article = Article::findOrFail($id);
        return inertia('Article/Edit', [
            'aricle' => article
        ]);
    }

    public function update(Request $request, $id)
    {
        $article = Article::findOrFail($id);
        $article->content = $request->input('content');
        $article->save();

        return redirect()->back()->with('success', 'Article updated successfully!');
    }
}

Route

use App\Http\Controllers\PageController;

Route::get('/article/{id}/edit', [ArticleController::class, 'edit'])->name('article.edit');
Route::put('/article/{id}', [ArticleController::class, 'update'])->name('article.update');

In this example, the edit method returns an Inertia view to load the Article/Edit component and passes the page data to the component. The update method updates the content field of the Page model and then redirects back to the previous page with a success message.