Page 1 of 1
[Solved] TinyMCE upload
Posted: Mon Mar 04, 2024 4:53 pm
by 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
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 5:05 pm
by Klemen
That's not something built into Hesk at the moment; you would need a custom PHP script to process TinyMCE image upload requests.
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 5:40 pm
by mbory
Klemen wrote: Mon Mar 04, 2024 5:05 pm
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
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 5:58 pm
by Klemen
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 6:35 pm
by mbory
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:
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 6:37 pm
by 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
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 6:45 pm
by 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
Re: TinyMCE upload
Posted: Mon Mar 04, 2024 7:32 pm
by mbory
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!
Re: [Solved] TinyMCE upload
Posted: Mon Mar 04, 2024 8:19 pm
by Klemen
Perhaps you could share your final solution here in case anyone else wants to implement this?
Re: [Solved] TinyMCE upload
Posted: Mon Mar 04, 2024 8:40 pm
by 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.
Re: [Solved] TinyMCE upload
Posted: Mon Mar 04, 2024 8:42 pm
by 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.