I created a server-side handler to use with image uploads in TinyMCE. It's not PHP - it's written in my server's server-side JavaScript.
It works fine, but the source that's created inserts relative paths to the imageUploads folder I created, like this:
<img title="Yamada-san 1963.jpg" src="../imageUploads/blobid1616028933077-1616028953409.jpg" alt="" width="145" height="229" />
If the post gets moved, it could break the link to the src.
My image uploader handler at my server returns JSON, as required, with the location using this format:
{ "location" : "http://example.com/imageUploads/' + theFilename + '" }
The location I'm returning looks like an absolute URL, so why is a relative URL used in the editor post? Is there some better JSON I can return?
Thanks.
I found the answer for this in another post.
In the tinymce.init() script this option needs to be added to the other options:
convert_urls: false,
Then the URLs saved are absolute.
Related
Is it possible to use relative links in tvml? I've never had a problem using them in a webpage but just can't get it to work in my tvml docs.
From my swift:
static let TVBaseURL = "http://localhost:9001/"
This currently works from my tvml which is located at http://localhost:9001/templates/home.xml
<lockup onselect="getDocument('templates/Featured.xml')">
<img src="http://localhost:9001/graphics/icons/ICON_featured.png" width="313" height="600" />
</lockup>
Note that the onselect link is relative and works fine. However this doesn't work...
<lockup onselect="getDocument('templates/Featured.xml')">
<img src="../graphics/icons/ICON_featured.png" width="313" height="600" />
</lockup>
It all depends on how you define YOUR getDocument function. But from your code, most likely it looks a bit like this one from the official TVML Programming Guide, sec 8-3.
function getDocument(extension) {
var templateXHR = new XMLHttpRequest();
var url = baseURL + extension;
loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
Which uses a pre-set baseURL like your code does. Thus, your get document support relative links. (and not universal link. putting the full http://localhost:9001/index.xml will break it.)
in this example, the XMLHttpRequest object open function, takes the full url, not the relative one. Read more about XMLHttpRequest open here.
In short. Nothing is relative here.
However, you can do something similar with the power of Javascript.
When you get a hold of the XML document, you can find all the tag with document.getElementsByTagName("img"), which give you a list of the image element. Then all it is left to do it to look at each of them with .item(i), get their source attribute by .getAttribute('src'), see if it start with http or https, and if not, set the new one by .setAttribute('src', baseUrl+imagePath)
I basically want short URLs to get resolved and HTML pages to be generated with short URLs for a CQ5 website. So far short URLs are getting mapped to long URLs as expected, but links in the generated HTML pages are not getting shortened.
For example, I am expecting the src attribute of the following <script> tag:
<script type="text/javascript" src="/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/style/clientlibs.1395978029951.js"></script>
To be shortened to:
<script type="text/javascript" src="/style/clientlibs.1395978029951.js"></script>
But it is not and remains intact. href attributes in anchor elements are not getting shortened either.
In JCR, the website is stored under /content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/ and I have configured my /etc/hosts and Apache config files to make it accessible via http://site-1:4503 in my local development environment.
I have defined the following URL mappings:
{
"jcr:primaryType":"sling:Folder",
"http":{
"jcr:primaryType":"sling:Folder",
"site-1.4503":{
"sling:internalRedirect":[
"/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae"
],
"jcr:primaryType":"sling:Mapping",
"redirect":{
"sling:internalRedirect":[
"/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/$1",
"/$1"
],
"jcr:primaryType":"sling:Mapping",
"sling:match":"(.+)$"
}
},
"site_1.4503":{
"sling:internalRedirect":[
"/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/home.html"
],
"jcr:primaryType":"sling:Mapping",
"sling:match":"site-1.4503/$"
}
}
}
When I test this mapping in JCR Resolver (http://localhost:4503/system/console/jcrresolver), it is working as expected. For example,
/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/style/clientlibs.1395978029951.js
is mapped to
http://site-1:4503/style/clientlibs.1395978029951.js
and
http://site-1:4503/style/clientlibs.1395978029951.js
is resolved to:
JcrNodeResource,
type=cq:ClientLibraryFolder,
superType=null,
path=/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/style/clientlibs
Also when I go to http://site-1:4503/style/clientlibs.1395978029951.js in my browser, the JS file is rendered as expected.
However when I view the HTML source for the home page, as I mentioned earlier, none of the long URLs are rewritten to their shortened forms.
Any ideas what am I missing here?
By default, CQ rewrites links in a, area and form tags. If you'd like to rewrite also paths in script tag, open OSGi configuration for LinkCheckerTransformerFactory service on publish and add following string to the Rewrite Elements option:
script:src
BTW: /content is not the best place for storing clientlibs. Usually we put this stuff in /etc/designs/YOUR_APP.
We finally managed to pinpoint the issue and fix this.
Somebody had added a com.day.cq.rewriter.linkchecker.impl.LinkCheckerImpl.xml under /apps/myapp/config.publish with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:OsgiConfig"
service.bad_link_tolerance_interval="{Long}48"
service.check_override_patterns="[^.]"
service.special_link_patterns=".*
"
service.special_link_prefix="[javascript:,data:,mailto:,#,<!--,${]"/>
I think the combination of check_override_patterns and special_link_patterns had disabled link shortening.
Removing this file made link shortening work again.
I have a script that re-sizes images for me and use it to serve images as such:
http://mysite.com/createthumb.php?filename=mypic.jpg
Fancybox will serve the above image, using the following link:
<a href='createthumb.php?filename=mypic.jpg' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
But I need to re-size it do a size that is different from the default size, by passing a parameter 'size' as such:
http://mysite.com/createthumb.php?filename=mypic.jpg&size=2000
But when I change the fancybox link to the following:
<a href='createthumb.php?filename=mypic.jpg&size=2000' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
Now fancybox chokes and the link just gets served as an image without any lightbox. This is the case even if I change my code so that it doesn't even look at the size parameters. In other words, just adding the "&size=2000" to the end of my link seems to set fancybox completely off balance.
Any ideas about why this could be or how I can fix this?
The script can not guess the content type by looking at your link. You have 3 options:
1) Change links by appending image extension at the end, so the script can detect -
<a href='createthumb.php?size=2000&filename=mypic.jpg' class='fancybox' ..
2) Use CSS class name to specify content type -
<a href='..' class='fancybox fancybox.image' ..
3) Set type while initializing -
$(".fancybox").fancybox({type : 'image'});
It looks like fancybox is checking the ending of the URL to determine if it is an image or not. Change your URL to be createthumb.php?size=2000&filename=mypic.jpg
https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js
(line 767)
I have this xml as part of the responseXml of an Ajax call:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
When I used this jQuery(responseXml).find("title").text(); the result is "Title".
I also tried jQuery(responseXml).find("title:first-child") but the result is [object Object].
I want to get the result:
<span style="color:#ffff00;"><strong>Title</strong></span>
Please let me know how to do this in jQuery.
Thanks in advance for any help.
Regards,
Racs
Your problem is that you cannot simply append nodes from one document (the XML response) to another (your HTML page). The issue is two-fold:
You can use jQuery to append nodes from the XML document to the HTML page. This works; the nodes appear in the HTML DOM, but they stay XML nodes and therefore the browser ignores the style attribute, for example. Consequently the text will not be yellow (#ffff00).
As far as I can see, jQuery offers no built-in way to get the XML string (i.e. a serialized node) from an XML node. jQuery can handle XML documents quite well, but there is no equivalent to what .html() does in HTML documents.
So to make this work we need to extract the XML string from the XML document. Some browsers support the .xml property on XML nodes (namely, IE), the others come with an XMLSerializer object:
// find the proper XML node
var $title = $(doc).find("title");
// either use .xml or, when unavailable, an XMLSerializer
var html = $title[0].xml || (new XMLSerializer()).serializeToString($title[0]);
// result:
// '<title><span style="color:#ffff00;"><strong>Title</strong></span></title>'
Then we have to feed this HTML string to jQuery so new, real HTML elements can be created from it:
$("#target").append(html);
There is a fiddle to show this in action: http://jsfiddle.net/Tomalak/QWHj8/. This example also gets rid of the superfluous <title> element.
Anyway. If you have a chance to influence the XML itself, it would make sense to change it:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
Just XML-encode the payload of <title> and you can do this in jQuery:
$("#target").append( $(doc).find("title").text() );
This would probably work:
$(responseXml).find("title").html();
I have a couple of gists which I need to include in a website post to showcase the source code. Currently, I'm inlining each of the multiple gists at various places in the HTML with script tags, however, this would be a blocking call. So, is there a way to dynamically load the gists and paste it specific points in time.
I tried something like below :-
<html>
<body>
<div id="bookmarklet_1.js"></div>
<div id="bookmarklet_2.js"></div>
<div id="bookmarklet_3.js"></div>
var scriptMap = {'bookmarklet_1.js' : 'https://gist.github.com/892232.js?file=bookmarklet_1.js',
'bookmarklet_2.js' : 'https://gist.github.com/892234.js?file=bookmarklet_2.js',
'bookmarklet_3.js' : 'https://gist.github.com/892236.js?file=bookmarklet_3.js'};
var s, scr, holder;
for(s in scriptMap){
holder = document.getElementById(s);
scr= document.createElement('script');
scr.type= 'text/javascript';
scr.src= scriptMap[s];
holder.appendChild(scr);
}
</script>
</body>
</html>
The above didn't work for me, it seems that each script is doing a document.write internally to write the CSS and soure code. Has anyone tried this before or got it working ?
I started a project exactly for this purpose. Dynamically-embedded Gists
Try it now: http://urlspoiler.herokuapp.com/gists?id=992729
Use the above url as the src of a dynamically-created iframe, or add &format=html to get the Gist html snippet via ajax, then put it anywhere you want. (The gist in the above url also happens to be the documentation for how to use this project.)
I myself wanted to do exactly the same thing (with the addition of even removing the default gist style link) - ended up building a "generic" script loader that handles document.write calls :
https://github.com/kares/script.js
Here's how one can use it for embedding gists (and pasties) :
https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html
You can now get the HTML + CSS directly using JSONP.
I wrote a fuller answer in response to this question, but the key is that you can get the HTML + CSS using JSONP.
For example: https://gist.github.com/anonymous/5446989.json?callback=callback12345
callback12345({
"description": "Function to load a Gist without an iframe",
"public": true,
...
"div": <HTML code>,
"stylesheet": <URL of CSS file>
})