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