How to integrate self hosted tinyMCE6 with Vue3+Laravel9

nova9 — Tue, 03 May 2022 06:05:59 +0000

1. Install tinyMCE using composer

composer require tinymce/tinymce

2. Install tinymce-vue using npm

npm install  "@tinymce/tinymce-vue@^4"

Don't worry about the number 4. Version 3 of tinymce-vue package is for vue 2 and version 4 of tinymce-vue package is for vue 3. Weird? Yeah. But nobody can go back in time.

again

tinymce-vue 4 for vue 3
tinymce-vue 3 for vue 2

3. Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run

mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');

4. Run Laravel Mix

npm run watch

5. Done

Now you can use the editor in any .vue file like this

<script setup>
import Editor from '@tinymce/tinymce-vue';
</script>

<template>
<Editor
    api-key="no-api-key"
    tinymce-script-src="/js/tinymce/tinymce.js"
    :init="{
        plugins: 'lists link image table code help wordcount',
        menubar: false,
        skin: 'oxide-dark',
        content_css: 'dark',
        branding: false
    }"
/>