Как интегрировать tinyMCE6 с Vue3+Laravel9 на собственном хостинге

1. Установите tinyMCE с помощью composer

composer require tinymce/tinymce

2. Установите tinymce-vue с помощью npm

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

Не беспокойтесь о цифре 4. Версия 3 пакета tinymce-vue предназначена для vue 2, а версия 4 пакета tinymce-vue — для vue 3. Странно? Да. Но никто не может вернуться в прошлое.

снова

tinymce-vue 4 для vue 3
tinymce-vue 3 для vue 2

3. Добавьте задачу Laravel Mix для копирования TinyMCE в публичные файлы при запуске Mix

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

4. Запустите Laravel Mix

npm run watch

5. Готово

Теперь вы можете использовать редактор в любом файле .vue следующим образом

<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 настолько уродлив.