nova9
Posted on May 3, 2022
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
}"
/>
dev.to's code block is so ugly.
💖 💪 🙅 🚩
nova9
Posted on May 3, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.