vue js integration?

[t0n1zz]

hello, i already using this extension with tiny-mce and it works wonder, i also tried to do the standalone one and it works just like expected...

now i am migrating my admin page to spa vue js and i have no idea how to integrate it into vue js... is there any documentation avaiable for integrating it with vue js?

[streamtw]

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

[antoniodesa]

Instead of opening in a new window. How can we make it open in a dialog box like it does on tinymce?

[t0n1zz]

yes i agree, instead of opening new windows it can be like i put it into modals? since my application is vue js SPA

[valanhol]

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

---

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}

[streamtw]

Need document enhancements for this thread.

[nebed]

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}

this doesn't work on mine. says this.$refs is undefined

[dukinfotech]

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

I tried this. It worked, but i meet issue with CORS when select an image from open window

[kinger251285]

Is there any update on the Vue.js integration?

ive tried the above methods and navigating straight to www.myapp.com/laravel-filemanager but this only opens my index component showing the header and footer.

[ahmadbagwi]

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

v-on handler: "ReferenceError: Cookie is not defined"

How to get cookie laravel passport?

[dima2306]

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}

For anyone else who is on TinyMCE v5 file_browser_callback needs to be changed with file_picker_callback for the browse button to appear in the editor.
Source: https://stackoverflow.com/a/56737927

This is an updated code:

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

        var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + meta.fieldname;
        if (meta.filetype == 'image') {
          cmsURL = cmsURL + "&type=Images";
        } else {
          cmsURL = cmsURL + "&type=Files";
        }

        this.$refs.tinymce.editor.windowManager.openUrl({
          url: cmsURL,
          title: 'Filemanager',
          width: x * 0.8,
          height: y * 0.8,
          resizable: "yes",
          close_previous: "no"
        });
      }