DEV Community

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

Posted on • Edited on

5 4

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.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay