DEV Community

Cover image for How to integrate self hosted tinyMCE6 with Vue3+Laravel9
nova9
nova9

Posted on • Updated on

How to integrate self hosted tinyMCE6 with Vue3+Laravel9

1. Install tinyMCE using composer

composer require tinymce/tinymce
Enter fullscreen mode Exit fullscreen mode

2. Install tinymce-vue using npm

npm install  "@tinymce/tinymce-vue@^4"
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

4. Run Laravel Mix

npm run watch
Enter fullscreen mode Exit fullscreen mode

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
    }"
/>
Enter fullscreen mode Exit fullscreen mode

dev.to's code block is so ugly.

Discussion (0)