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
Related
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
});
});
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.
My pdf file is open in browser tab. In the title of pdf tab instead of name it shows the url how can i changed it .I am using codeigniter framework and using Mpdf library for pdf.
Your PDF document should have Title metadata set. Afterwards, browser will use it for rendering tab title.
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
In Acrobat Pro, open the PDF and select File -> Properties -> Description and then edit the meta data title (and others if required) as you see fit.
We only saw the title being displayed like this in Firefox.
Put it in a div inside a page and change the page title like this:
<head>
<title>YOUR TAB TITLE</title>
</head>
and then:
<div>
<object data="test.pdf" type="application/pdf"
width="300" height="200">
alt : test.pdf
</object>
</div>
You can also set the object width and height to match the page.
Reference
For changing PDF tab title in browser, you need to update "title" in property.
If you have PDF editor you can do it easily. Else it is not editable.
You can use any of the tool online to edit the title.
I did it using below link.
https://www.sejda.com/edit-pdf-metadata
Try this. It's so simple.
$mpdf->SetTitle('My Title');
Is there any way i can load PDF file (its contents) in a div or iFrame?
I have a bunch of PDF files on a server and, ideally, i need to have a button 'Show file' on a page, clicking on which will load the contents of selected file in a div(iFrame).
You can also use google pdf view by using iframe on your page :
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Instead of this in above code :
http://infolab.stanford.edu/pub/papers/google.pdf
Use your own PDF file path.
You can view the demo here.
http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html
It's just a suggestion. No downvotes please.
Google's gview is sometimes unresponsive and given 204 status. Here is the best free alternative.
https://stackoverflow.com/a/66548544/2078462
i'm using tinyMCE and i can't find the answer for this in their forums.
I'm using the "media" plugin to embed flash. the html result in html preview is normal:
<p><iframe src="http://www.youtube.com/embed/lWRi7gDYjVY" frameborder="0" width="425" height="350"></iframe></p>
the result saved to the database is quite different though, using mysql_real_escape_string it saves:
<p><img data-mce-json="{'type':'iframe','video':{'sources':[]},'params':{'src':'http://www.youtube.com/embed/lWRi7gDYjVY','frameborder':'0'},'width':'425','height':'350'}" class="mceItemMedia mceItemIframe" src="http://localhost/assets/scripts/tiny_mce/themes/advanced/img/trans.gif" data-mce-src="assets/scripts/tiny_mce/themes/advanced/img/trans.gif" width="425" height="350"></p>
and that is what is rendered on my page's html, showing only a white space the size of the iframe...
I'm really stuck and i don't know what to do.
Thanks
/Update/
well, i found out the source of the problem: i am saving my contents through AJAX; i haven´t found a way to get the HTML content out of the editor with javascript so i was hacking it with a jQuery selector:
$('div').find('iframe').contents().find('body').html()
so that way i get the "wrong html" and it only happened with youtube videos so far.
My question is: how can i obtain the editor's HTML so i can post it through AJAX?
Thank you once again.
To obtain the editor's HTML use the following
// this is "content" by default else it is the id of your
// html element you get the editor for (usually a textarea)
var editor_id = 'put_your_editor_id_here';
editor = tinymce.get(editor_id);
var content = editor.getContent();
You may have a closer look at the tinymce API.
This is because the media plugin strips the tags that are considered invalid.
Can you try to change the option Valid_elements in Init and assign to [].
Try it.
good luck