[Solved] TinyMCE upload

[mbory]

I'd like to be able to upload images from my computer to a folder on the server (e.g. /images/upload), and do it with TinyMCE when I'm writing an article.

Currently, you can add an image either by direct url, or by pasting directly into the editor, only the image isn't really uploaded to the server, because the url is something like data:image/png;base64,iVBORw0KGgoAAA......... over thousands of characters.

I know that TinyMCE offers an option for uploading images, I've tried installing and configuring it but I can't get it to work. Do you have a tutorial, or can you tell me how to do it with concrete examples, please?

Thank you

[Klemen]

That's not something built into Hesk at the moment; you would need a custom PHP script to process TinyMCE image upload requests.

[mbory]

That's not something built into Hesk at the moment; you would need a custom PHP script to process TinyMCE image upload requests.

Thanks, yes I was thinking of going into the source code to implement this, but would you have a procedure, tutorial or other to suggest how to get there?

Thanks

[Klemen]

This is from TinyMCE official docs:
https://www.tiny.cloud/docs/general-con ... ad-images/

[mbory]

This is from TinyMCE official docs:
https://www.tiny.cloud/docs/general-con ... ad-images/

That's right, this is the page I'm trying to apply.

I've created a postAcceptor.php file in the root with the example given by TinyMCE. I configured tinymce.inc.php as follows:

Code: Select all

toolbar: 'undo redo | styleselect fontselect fontsizeselect | bold italic underline | alignleft aligncenter alignright alignjustify | forecolor backcolor | bullist numlist outdent indent | link unlink image codesample code | spoiler-add spoiler-remove | mybutton anchor hr emoticons charmap media',
      plugins: 'charmap code codesample image imagetools link lists table autolink spoiler anchor hr emoticons quickbars charmap media',
      images_upload_url: 'postAcceptor.php',
      height: 350,
      toolbar_mode: 'sliding spoiler-add spoiler-remove',

And when i want upload an image:

[Klemen]

Try using the full URL of postAcceptor.php in TinyMCE configuration, so https://example.com/hesk/postAcceptor.php or whatever, instead of just postAcceptor.php

[mbory]

Thanks, the 404 error has disappeared, but I have a new one:
Image upload failed due to a XHR Transport error. Code: 0

I'll investigate and try to solve it

[mbory]

Try using the full URL of postAcceptor.php in TinyMCE configuration, so https://example.com/hesk/postAcceptor.php or whatever, instead of just postAcceptor.php

Okay, I struggled a long time to find the error, in the configuration of Tinymce, I had indicated https://www., and it was not necessary to put the www.

It's solved, thanks for your help!

[Klemen]

Perhaps you could share your final solution here in case anyone else wants to implement this?

[mbory]

Yes of course !

First, create file named "postAcceptor.php" in root of your website, and pas this example : https://www.tiny.cloud/docs/advanced/ph ... d-handler/

In my case, I had to do what was commented on here:

Code: Select all

/*
      If your script needs to receive cookies, set images_upload_credentials : true in
      the configuration and enable the following two headers.
    */
    // header('Access-Control-Allow-Credentials: true');
    // header('P3P: CP="There is no P3P policy."');

Next, go to the tinymce.inc.php file (in the inc/tiny_mce/ folder), and configure by adding the following:

Code: Select all

images_upload_url: 'https://your-domaine.com/postAcceptor.php',
images_upload_credentials: true,

Exemple :

Code: Select all

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_url: 'https://your-domaine.com/postAcceptor.php',
  images_upload_base_path: '/some/basepath'
});

Normally, this should work.

[mbory]

I'd also like to configure it so that when you paste an image directly into the editor, it uploads it to the server and uses its url rather than using data:image/png;base64,iV..... and the thousands of characters that follow. But it seems complicated to me. I've managed to get the url to change once you come back to the article, edit it and save it again, but it doesn't do so automatically when you paste the image.