search

tinymce / tinymce-vue

Official TinyMCE Vue component
MIT License
2.06k stars 207 forks source link

Laravel 10 + Inertia + Vue 3 + Vite + Self hosted Error #406

Closed gidhublan closed 6 months ago

gidhublan commented 6 months ago

Hi,

I want to add TinyMCE as self-hosted, but I'm getting the following error. Where am I going wrong?

Error Console;

 php artisan inertia:start-ssr
Starting SSR server on port 13714...
Inertia SSR server started.
ReferenceError: window is not defined
    at mediaMatch (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:957:57)
    at DeviceType (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:615:35)
    at Object.detect$3 [as detect] (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:948:26)
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:958:53
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:605:17
    at detect$2 (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:959:28)
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:962:24
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:31756:3)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: window is not defined
    at mediaMatch (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:957:57)
    at DeviceType (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:615:35)
    at Object.detect$3 [as detect] (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:948:26)
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:958:53
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:605:17
    at detect$2 (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:959:28)
    at /Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:962:24
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/W/INERTIA/node_modules/tinymce/tinymce.js:31756:3)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)

Node.js v21.6.2

Editor.vue

<template>
    <editor
        api-key="no-api-key"
        v-model="model" model-events="" @selectionChange="changes"
        :init="init"
    />
</template>

<script>
import { defineComponent } from 'vue'

//TinyMCE
import tinymce from 'tinymce';
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom/model'
import 'tinymce/skins/ui/oxide/skin.css'
//import {contentUiCss} from 'tinymce/skins/ui/oxide/content.css';

//TinyMCE plugins
//https://www.tiny.cloud/docs/tinymce/6/plugins/
import 'tinymce/plugins/lists/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/image/plugin'
import 'tinymce/plugins/table/plugin'
import 'tinymce/plugins/code/plugin'
import 'tinymce/plugins/wordcount/plugin'

import 'tinymce/langs/tr'

import Editor from '@tinymce/tinymce-vue'

export default defineComponent({
    props: ['modelValue'],

    components: {'editor':Editor},

    emits: ['update:modelValue'],
    data() {
        return {
            model: this.modelValue,
            init: {
                entities : "Ü = Ü ü = ü Ç = Ç ç = ç Ö = Ö ö = ö Ş = Ş ş = ş Ğ = Ğ ğ = ğ İ = İ ı = ı",
                valid_elements: "*[*]",
                skin: false,
                plugins: 'lists link image table code wordcount',
                content_css: false,
                //content_style: contentUiCss.toString(),
                language: 'tr',
                promotion: false,
                convert_urls: false,
            }
        }
    },
    methods: {
        changes(event,editor){
            this.$emit('update:modelValue', editor.getContent())
        }

    }
})
</script>
gidhublan commented 6 months ago

I solved the issue by excluding the page with Tinymce from SSR.

app.blade file add;

    @php
       if(Request::is('panel/*')){
           $__inertiaSsrDispatched = true;
           $__inertiaSsrResponse = null;
       }
    @endphp