how to enable some plugins? lets say i want image upload?

[codeitlikemiley]

I dont know what to pass in the options is it array or object.

can you give example where in i can enable upload for image, also i think there is an event to listen to that...

how can i hook into a successful image upload event

so i can send ajax and process the response thanks

[ankurk91]

I have working color picker plugin example here-

https://github.com/ankurk91/vue-trumbowyg/blob/master/examples/App.vue

All plugins should be working, you just need to import and pass them into config.

[codeitlikemiley]

i had it working but, i cant just modify the upload plugin default options, let me give you a sample of code, that has the image upload added

<template>
  <div>
    <trumbowyg :config="configs.advanced" v-model="content"></trumbowyg>
  </div>
</template>

<script>  
import trumbowyg from 'vue-trumbowyg'
import guards from './../../mixins/guard'
import 'trumbowyg/dist/plugins/colors/trumbowyg.colors'
import 'trumbowyg/dist/plugins/upload/trumbowyg.upload'
import 'trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.css'
import 'trumbowyg/dist/plugins/base64/trumbowyg.base64'
export default {
mixins: [guards],
props:['description'],
data () {
    return {
    content: '',
    editForm: new EvolutlyForm(Evolutly.forms.editForm),
    configs: {
          basic: {
            autogrow: false
          },
          advanced: {
            autogrow: true,
            removeformatPasted: true,
            // Adding color plugin button
            // Limit toolbar buttons
            btns: [
                ['viewHTML'],
                ['formatting'],
                'btnGrp-semantic',
                ['superscript', 'subscript'],
                ['link'],
                ['btnGrp-image'],
                'btnGrp-justify',
                'btnGrp-lists',
                ['horizontalRule'],
                ['foreColor'], ['backColor'],
                ['removeformat'],
                ['fullscreen'],
            ],
            btnsDef: {
            // Create a new dropdown
            'btnGrp-image': {
            dropdown: ['insertImage', 'base64','upload'],
            ico: 'insertImage'
            }   
            },
          },
        },

    }
},
mounted () {
    let self = this
    self.content = self.description
    Bus.$on('editDescription', (id) => {
        self.callApiUpdateTask(id)
    })
},
methods: {
    callApiUpdateTask(id){
            let self = this
            self.editForm.task_description = self.content
            self.editForm.busy = true
            self.endpoints.web = `/dashboard/jobs/${id}/edit/description`
            axios.put(self.guardedLocation(),self.editForm).then( (response) => { 
                Bus.$emit('updateDescription', self.content)
                Bus.$emit('closeEditor')
                self.$popup({ message: response.data.message, backgroundColor: '#4db6ac', delay: 5, color: '#ffc107', })
            }).catch(error => {
                self.editForm.busy = false
                self.$popup({ message: error.response.data.message, backgroundColor: '#e57373', delay: 5, color: '#4db6ac', })
            })
        },
},
components: {
    trumbowyg
},
watch: {
    content: function(newVal, oldVal) {
        console.log('value changed from ' + oldVal + ' to ' + newVal);
    }
}
}
</script>

This is the Error im getting in when i click the upload image as we can see the error occours because its submitting to a non avaiable url...

this is the trumbowyg.upload.js This is on the node_modules/trumbowyg, so i just cant edit this... how can i hook into this defaultOptions inside my vue component i wanna use axios instead... (not possible?) but if not i do have jquery avaible...

even if i replace the url here... ( it will be just overwritten when we do npm update) how i can hook to this event, im sorry...

var defaultOptions = {
        serverPath: './src/plugins/upload/trumbowyg.upload.php',
         // How do i hook to this var inside my vue? or get this variable and modify just this key
        fileFieldName: 'fileToUpload',
        data: [],                       // Additional data for ajax [{name: 'key', value: 'value'}]
        headers: {},                    // Additional headers
        xhrFields: {},                  // Additional fields
        urlPropertyName: 'file',        // How to get url from the json response (for instance 'url' for {url: ....})
        statusPropertyName: 'success',  // How to get status from the json response 
        success: undefined,             // Success callback: function (data, trumbowyg, $modal, values) {}
        error: undefined                // Error callback: function () {}
    };

[ankurk91]

Please narrow down your example, it is lots of code

[codeitlikemiley]

This is how i manage to add the images upload button group with base64, insertImage, and upload

import trumbowyg from 'vue-trumbowyg'
import 'trumbowyg/dist/plugins/upload/trumbowyg.upload'
import 'trumbowyg/dist/plugins/base64/trumbowyg.base64'
export default {
props:['description'],
data () {
    return {
    content: '',
    configs: {
          advanced: {
            btns: [

                ['btnGrp-image'],

            ],
            btnsDef: {
            // Create a new dropdown
            'btnGrp-image': {
            dropdown: ['insertImage', 'base64','upload'],
            ico: 'insertImage'
            }   
            },
          },
        },

    }
},

This is Inside the trumbowyg.upload.js plugin

var defaultOptions = {
        serverPath: './src/plugins/upload/trumbowyg.upload.php',
        fileFieldName: 'fileToUpload',
        data: [],                       // Additional data for ajax [{name: 'key', value: 'value'}]
        headers: {},                    // Additional headers
        xhrFields: {},                  // Additional fields
        urlPropertyName: 'file',        // How to get url from the json response (for instance 'url' for {url: ....})
        statusPropertyName: 'success',  // How to get status from the json response 
        success: undefined,             // Success callback: function (data, trumbowyg, $modal, values) {}
        error: undefined                // Error callback: function () {}
    };

Now my problem is how do i modify serverPath... or the defaultOptions var available inside trumbowyg.upload.js without modifying the node_modules files

[codeitlikemiley]

just for the record, doing this is a bit funky hack So that I can emit and listen to the event... which is not present on vue-trumboywg and trumboywg itself

the only way to go around this is like so

this file is imported to a component called text-editor.vue inside that file i import trumbowyg and upload plugin

import '../../plugins/trumbowyg.upload' the content on my trumbowyg.upload.js is like this

Note: i added extra headers for CSRF token which is needed by laravel also the URL i want to do the upload and a Custom OnSuccess Callback to Emit the Event

Also if your using laravel you can change fileToUpload to image so you can do something like this request()->file('image')

'use strict';
    var current_url = $(location).attr('href').split("/").splice(0, 6).join("/");
    var segments = current_url.split( '/' );
    var jobId = segments[5];
    var defaultOptions = {
        serverPath: '/files/upload/jobs/'+jobId,
        fileFieldName: 'fileToUpload',
        data: [],                       // Additional data for ajax [{name: 'key', value: 'value'}]
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },                    // Additional headers
        xhrFields: {},                  // Additional fields
        urlPropertyName: 'file',        // How to get url from the json response (for instance 'url' for {url: ....})
        statusPropertyName: 'success',  // How to get status from the json response 
        success: onSuccess,             // Success callback: function (data, trumbowyg, $modal, values) {}
        error: undefined                // Error callback: function () {}
    };

    function onSuccess(data, trumbowyg, $modal, values) {
        Bus.$emit('onSuccess',{data:data.data, trumbowyg: trumbowyg, $modal: $modal, values: values});
    }

Then i listen to the event broadcast in my page component

mounted () {
    Bus.$on('onSuccess', ({data, trumbowyg, $modal, values} = payload) => {
        var url = window.location.protocol+ '//' + window.location.host + data.url;
        trumbowyg.execCmd('insertImage', url);
        $('img[src="' + url + '"]:not([alt])', trumbowyg.$box).attr('alt', data.description);
        setTimeout(function () {
            trumbowyg.closeModal();
        }, 250);
        trumbowyg.$c.trigger('tbwuploadsuccess', [trumbowyg, data, url]);
    })
},

Hope you add this on the docs , i know this would help other people as well thanks