How to integrate tinymce 5 with vuejs 2.6.x

[dwiyudirayia]

i got error Uncaught TypeError: Cannot read property 'tinymce' of undefined at VE.file_picker_callback when integrating with laravel-file-manager. I was add ref on tinymce component

<editor
ref="tinymce"
api-key="dzzffhe3e7rwi6o0yhr653apjdpwu2uyld4x4xppx02diki8"
:init="{
height: 500,
plugins:
'print preview importcss tinydrive searchreplace autolink autosave save directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
mobile: {
plugins:
    'print preview importcss tinydrive searchreplace autolink autosave save directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars emoticons',
},
menu: {
tc: {
    title: 'TinyComments',
    items: 'addcomment showcomments deleteallconversations',
},
},
menubar: 'file edit view insert format tools table tc help',
toolbar:
'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor casechange removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
image_advtab: true,
link_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' },
],
image_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' },
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' },
],
importcss_append: true,
template_cdate_format:
'[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
template_mdate_format:
'[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
height: 600,
image_caption: true,
quickbars_selection_toolbar:
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding',
spellchecker_whitelist: ['Ephox', 'Moxiecode'],
tinycomments_mode: 'embedded',
content_style: '.mymention{ color: gray; }',
contextmenu: 'link image imagetools table configurepermanentpen',
a11y_advanced_options: true,
file_picker_callback: function (callback, value, meta) {
this.$refs.tinymce.editor.windowManager.openUrl({
    url: '/file-manager/tinymce',
    title: 'Filemanager',
    width: x * 0.8,
    height: y * 0.8,
    resizable: `yes`,
    close_previous: `no`,
});
},
}"
/>

[dwiyudirayia]

fixed, make methods to open file manager

[codeperl]

fixed, make methods to open file manager

@dwiyudirayia Hi, Can you please share something more about it?

I am using tinymce5 with tinymce-vue official package. Trying to integrate. But failed!

parent.tinymce.activeEditor.windowManager.getParams is not a function

Thanks in advance!

[codeperl]

Solved!

As I am using tinymce5, this is the code for callback:

`fileOpener(callback, value, meta) { let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; let y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

            this.$refs.tinymce.editor.windowManager.openUrl({
                url: '/file-manager/tinymce5',
                title: 'Filemanager',
                width: x * 0.8,
                height: y * 0.8,
                resizable: 'yes',
                close_previous: 'no',
                onMessage: (api, message) => {
                    callback(message.content, {text: message.text})
                }
            });
        }`

Assigned fileOpener to file_picker_callback!