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
});
});
Related
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.
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
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,
...
});
I have google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)
I'm trying to display by jquery load() a dynamically generated PDF created by PHP with FPDFlib on a div but what I get is a jam of chars. Is there a way to resolve it?
thanks in advance
I've tried to correct my code in this way but continue to display jam
$.post("./php/stampa_login.php",
{piatta:'<? echo $_POST["piatta"] ?>'},
function(data){
$("#stampa_content").load("./temp/login.pdf")
});
ciao
h.
That seems to be correct. jQuery's load() fetches an URL through AJAX; if that URL is PDF, it appears as "jam of chars" to the browser, as PDF and HTML aren't compatible at all, the formats are completely different.
What you probably want is to open the PDF as an <object>, but then you're hoping that the user has some PDF plugin installed in their browser. Let's take a step back: what are you trying to achieve here, by displaying a PDF?
You can create a blank embed tag and give src attribute as link. in your call back function. This will load the pdf file perfectly.
$("#embed_tag_id").attr("src", "./temp/login.pdf");
Instead of using $("#whatever").load();
You'll want something like this:
$("#stampa_content").html ($("<object>", {
data : "./temp/login.pdf",
type : "application/pdf",
width : 800,
height : 600
}));
What that will do is instead of trying to load the contents of the PDF into a DIV, it will create an <object> block that will start up your PDF reader (such as Adobe Reader) which will then load the PDF itself and display it.
ya, seems to be an output issue. Have you tried header function to output it correctly ? try for proper output or instead of opening the pdf in div, just update the pdf's link there