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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more