How make tinymce able to upload image in vue js

Question

I am using tinymce in my vue js app but it is not allowing me to upload image .

i am using this package import Editor from '@tinymce/tinymce-vue' I think i am missing any plugin or tool bar

component

  

     <editor
                      apiKey="API_KEY"
    
                      :init="{
                       height: 200,
                       menubar: true,
                       plugins: [
                         'advlist autolink lists link image charmap print preview anchor',
                         'searchreplace visualblocks code fullscreen',
                         'insertdatetime media table paste code help wordcount '
                       ],
                        file_picker_types: 'image',
                       toolbar:
                         'undo redo | formatselect | bold italic backcolor| link image| \
                         alignleft aligncenter alignright alignjustify | \
                         bullist numlist outdent indent | removeformat | help | image code'
                     }"
    
                    />

Answer 1

You have to add a option in init object image_upload_url OR image_upload_handler

docs reference: tinymce image upload options

First of all you have to create a API endpoint which should response with a json object contains the image path in location key, like { location: 'path/to/filename.jpg' }

then,

1. If you use the URL option, you have to provide that endpoint string like http://example.com/api/image_upload. You have to create that route handler. (I can show you the demo using express)

2. If you use the handler option, needed to provide this function, using that API endpoint, and the function should return the same JSON object type. (this is for advance use to modify the object before return )

You can use the image_upload_url option for simplicity.

I'm using tinymce with express in my own projects.

Let me know what are you using in back-end, so I can assist further.