Wrong paths with TinyMCE Image Manager - php

I'm using TinyMCE's Image Manager 3.x.
The problem I am having is that when I insert an image the path is
../../../images/etc/myimage.jpg.
How can I config the image manager to not include
../../../
Please note I do not wish to strip the string.

Put in the config:
tinyMCE.init ({
...
relative_urls:false,
...
});

Related

TinyMCE display correct image path from frontend

How i can display the correct url for the image uploaded using TinyMCE?
I get a file not found error, this because when I load the created contents on the frontend, the src attribute of the images contained inside the post are referring to my img path like this ../../img/prt/image.jpg, and it's the correct path for the backend, but from the index i need that the src is set to img/prt/image.jpg that is the correct path. Any suggestion?
I've found a solution for this. After reading the related section of the documentations, I've solved using the convert_urls option of the editor.
This is the third time I use this kind of editor, so I didn't know about all available options.
https://www.tiny.cloud/docs/configure/url-handling/#convert_urls
example code:
$(document).ready(function(){
tinymce.init({
selector: 'textarea', // change this value according to your HTML
convert_urls: false
});
});

Image not found or type unknown (using tinymce with dompdf to show html stored in tinymce textarea in a pdf)

I'm using tinymce with image upload using the package "laravel-tinymce-simple-imageupload". When the user enters some content in the textarea and clicks the form submit button I want to put the content in the textarea in a pdf file. I have the code below.
The issue is that in the pdf file, if is inserted an image in the textarea, the image doesn't appear in the pdf and in the pdf appears "Image not found or type unknown".
Do you know what can be the issue?
The image is stored like this in the content column of the certificates table:
<p>test<img src="/img/image_15zdbBr.jpeg" alt="" width="1200" height="900" /></p>
Code to get the pdf:
$certificateContent = RegistrationType::with('certificate')->where('id', $request->registrationType)->first();
$pdf = app()->make('dompdf.wrapper');
$pdf->loadHTML($certificateContent->certificate->content);
return $pdf->download('test.pdf');
Tinymce code has relative_urls as false:
tinymce.init({
selector:'textarea',
plugins: 'image code link',
relative_urls: false,
file_browser_callback: function(field_name, url, type, win) {
// trigger file upload form
if (type == 'image') $('#formUpload input').click();
}
});
I already use "setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])" but also dont works with that, it show the same error.
It seems that the issue can be because is necessary to change the url path of the image. But Im not understanding how to do that since the user only selects a image in the the tinymce textarea how to change the absolute path of that image.
This is a reported issue: https://github.com/dompdf/dompdf/issues/1659 .
Suggest you:
set relative_urls to true (this will set the image as img/image_15zdbBr.jpeg, and
set $dompdf->setBasePath($base_path) where $base_path is where the files sit. (https://github.com/dompdf/dompdf/wiki/Usage#setbasepath)
Edit with salient bits from chat:
As you are using a wrapper for Laravel, You need to get a handle on the domPDF class which you will do through $pdf->getDomPDF()->setBasePath();
As the relative file path is ../../../image/file.jpg, this means "start at the "base directory, go back one, go back one, go back one, go into img/, find file". So the "base directory" needs to be ahead of the the files to take accound for the fact you're going back.
Working example:
Your actual file is located (for real) in /home/john/projects/proj/public/img/image.jpeg
Relative file path (provided) = ../../../img/image.jpeg
So you configure your setBasedirectory = /home/john/projects/proj/public/a/b/c/
Combined this gives you /home/john/projects/proj/public/a/b/c/../../../img/image.jpeg
Which is the same as /home/john/projects/proj/public/a/b/../../img/image.jpeg
Which is the same as /home/john/projects/proj/public/a/../img/image.jpeg
Which is the same as /home/john/projects/proj/public/img/image.jpeg = Bingo.
If this doesn't work, adjust your setBaseDirectory until you get the right path.

TinyMCE and RoxyFileBrowser

I am using TinyMCE and RoxyFileBrowser to create text files with images and saved them in a database.(only the html content of textarea). When I am reloading the saved content from database the images are not loading. when I checked I find out in TinyMCE html sorce code image src is incorrect. So I edit the RoxyFileBrowser conf.json as
"RETURN_URL_PREFIX": "/",
Now in the TinyMCE Insert/Edit Image window source URL is displayed as needed. But still the tinyMCE html content has wrong image src url.
Source URL=/fileman/....... - which is needed one
img src="../fileman/....." which is incorrect
What is the reason for this error?
Ok finally I found the answer.
The problem is with tinymce is trying to use relative URLs. So turn it off in tinymce.init function
relative_urls : false,
Example: "RETURN_URL_PREFIX": "http://localhost:59184/"
"RETURN_URL_PREFIX" is your domain

Treat SVG as an image in Silverstripe

I'm trying to upload images in Silverstripe and have them treated as images rather than a document link.
I've added SVG to the allowed filetypes and can upload an SVG file but when I hit insert the editor inserts the tag as
somefile.svg
I would like to treat SVG as any other image format where inserting will insert the tag as a regular image
<img src="/assets/uploads/somefile.svg">
What is the best way to achieve this?
After debugging around HtmlEditorField.js, I found that the issue for SVGs not displaying was that the "Insert Media" screen's upload field does not consider an SVG as an image. (I originally thought the problem was TinyMCE but that wasn't the case)
I knew that the File class has a static property called app_categories which contains things like all the extensions SS thinks are images. By default, SVG is not in this list.
In Silverstripe 3.1, if you specify the following, it will add SVG to the "image" category:
$categories = File::config()->app_categories;
$categories['image'][] = 'svg';
File::config()->app_categories = $categories;
Alternatively as a YAML config:
File:
app_categories:
image:
- svg
That simple change was enough for the file upload on the "Insert Media" screen to correctly treat a SVG as an image which in turn triggered the right entwine function to use the <img> tag rather than an anchor.
While this method solves your specific issue, there could be side effects throughout other parts in Silverstripe for adding SVG to the image app category.
One additional thing, I needed to update my .htaccess file in my assets folder for it to allow viewing of SVG files otherwise I got a 403 Forbidden error.
in SS3 just use this in your config.yml:
File:
allowed_extensions:
- svg
Image:
allowed_extensions:
- svg
I've written a SilverStripe module to do exactly that (treat SVG as image instead of file): https://github.com/micschk/silverstripe-svg-images/
See the README for general pointers on how to set up SVG-as-image if you don't want to require the module.

How to set the base URL for FCKeditor image upload service to domain name

I have FCKEditor for uploading images to newsletter, but the images in the editor are placed with relative path.
/uploads/media/1.jpg
How can I enforce to use
http://www.example.org/uploads/media/1.jpg
when creating the HTML content inside the editor.
in "fck/editor/filemanager/connectors/php/config.php"
set this param :
$Config['UserFilesPath'] = "http://www.example.org/"

Categories