How do I make Drive API WebViewLink URL clickable? - javascript

appendPre(file.name + ' (' + file.viewedByMeTime + ')'+ ' (' + file.webViewLink + ')' +' (' + file.quotaBytesUsed + ' bytes)');
When it displays: Its shows this
How can I make the URL clickable?
Also, how can I bold file.name and change the color of the text?

Edit
#Pig correctly pointed out that you are allowed to put content into a <pre> tag, it's just a real pain for no real benefit. If your goal is to make a list of items with clickable links, I think a <ul> and adding <li>'s with Javascript is better. Maybe even a <table> and adding rows! Delicious.
What's up #Pig! It's your bro #jdbiochem. Here's the appendPre() function I think you're talking about (you should post the functions you're using in a question like this :) ).
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
This adds to a <pre> tag, which renders preformatted text. You can't shouldn't really put anything in a <pre> tag besides text itself. So, you might think about making a different function to make a link, maybe something like this:
function appendLink(url) {
// create a DOM node, an <a> tag.
var link = document.createElement('a');
// a "text node" is what lives inside the tag <a>text node</a>
var _text = document.createTextNode("click me");
// add that text node to the link, so now we have: <a> click me </a>
link.appendChild(_text);
// set the actual link in the href attribute
link.href = url;
// add a CSS class so we can control the style of text easily
link.classList.add('drive-link');
// add this link somewhere in your document
doucment.getElementById('links').appendChild(link);
}
Keep in mind this function takes only the URL, so using it in all the places you have appendPre() will not work.
If you want the link bold and a different color, your CSS class might look like:
.drive-link {font-weight: bold; color: peachpuff;}
(BTW, you should mark answer to your earlier question correct!)

Related

How to detect if String contains url and make url clickable using javascript react js

Hi guys am trying to detect if a string contains url and if yes wrap it using anchor tags and make it click able. but what i have display both the string and the anchor tags.
My code
function urlify(text) {
var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url) {
var hyperlink = url;
if(!hyperlink.match('^https?:\/\/')){
hyperlink = 'http://' + hyperlink;
}
return '<a className="blue" href="' + url + '" rel="noopener" noreferrer>' + url + '</a>'
})
// or alternatively
}
Inside my html code
<p>{urlify(text)}</p>
output
first remove anchors before return text.replace – Muneeb Mirza <a className="blue" href="https://onlyfans.com/my/notifications">https://onlyfans.com/my/notifications</a>
Instead of displaying the link with the anchor tags i want to display it as clickable link without the tags.
Assuming the urlify function is working as you expect, the result should be considered an HTML string. Use dangerouslySetInnerHTML to set the inner text of the p tag.
Example:
<p dangerouslySetInnerHTML={{ __html: urlify(text) }} />
As the name suggests, this is potentially a dangerous function, but if you've full control over the content and computing the HTML tags that are generated, it's probably pretty safe.
If you've any concern over the content though then I suggest also using DOMPurify to help sanitize the text value before you process it to create the links.

What's the best way to append html tags to existing text?

I want to use the currently selected text in the office document to be replaced by the same selected text but surrounded with html. Effectively adding a hyperlink to the current selection.
I first read the text property of the selection
var objRange = objContext.document.getSelection();
objRange.load('text');
followed by
return objContext.sync().then(function(){
var strSelection = objRange.text;
objRange.insertHtml(
"<a href='" + decodeURIComponent(strHyperlink) + "'>" + strSelection + "</a>",
Word.InsertLocation.replace
);
return objContext.sync().then(function(){
objDialog.close();
});
});
I need a sync to read the text and then another one to write the updated text back into the document after that I close a dialog. But this sometimes causes the html to get written into the document twice. Is there a better way of doing this instead of with double context syncs?
To answer your question, if you need to read the text and then write into a different context, you'll need two syncs.
But you might take a look at the Range.hyperlink property, which is writeable. I don't know if it'll give you a way to avoid two syncs, but is intended for what you seem to be using insertHtml to do.

TinyMCE Replace Parent Node

I'm developping a WordPress plugin which adds a button to the TinyMCE editor. When that button is clicked the desired behaviour should be:
1. If the selected text is not part of a short (or is the short) then the shortcode should be inserted into the DOM.
2 If not, the shortcode should be replaced with the new one.
The first requirement is fufilled, but the second not. When inserted, it show up in the visual editor but it not saved or displayed when saving or switching to text. This leads me to believe that im not directly editting the object underneath the editor, only that which is displayed. What is the correct way to go about it. Please see the following function:
...
insertContent: function(){
var atts = '';
var node = tinyMCE.activeEditor.selection.getNode();
var edit = $(node).is('div.wp-arv-faq');
jQuery('./$p/-sc-input').each(function() {
atts = atts + jQuery(this).attr('name') + '=\"' + $(this).val() + "\" ";
});
var caption = 'F.A.Q. ' + $('./$p/-sc-input[name="tax"] option:selected').text();
var style = $('./$p/-sc-input[name="style"] option:selected').text();
atts += ' caption="' + caption + ' (' + style + ')"';
if (edit){
$(node).empty();
tinyMCE.activeEditor.selection.setContent('[arv-faq ' + atts + '][/arv-faq]');
/$p/faqMCE.closeModal();
},
...
Please note, that the '/$p/' is unique to my build process and should be ignored. Thanks in advance
From your question it is not perfectly clear what you are trying to do, but i guess you are trying to insert html code into the editor.
Be sure to have the selection set right after calling $(node).empty();
Note: All your tags and attributes need to be configured as allowed tags and attributes using valid_elements and valid_children configuration paramters.

Append "tweet this" button to blockquotes with jquery

Updated:
I'd like to append a self made "tweet this" button after blockquotes with jQuery. I figured out the following three steps are necesarry (some are already resolved thanks to the stackoverflow community):
[resolved] appending anything to the blockquote
[resolved] appending a working twitter share link to the blockquote
making sure it works with multiple blockquotes
The code I'm using at the moment is:
<script type="text/javascript">
var completeurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
completeurl = encodeURIComponent(completeurl);
var twshare = "https://twitter.com/share?url=" + completeurl;
var bq = $( "blockquote" ).text()
$("blockquote").append("<a href='" + twshare + "&text=" + bq + "'>Click to tweet</a>");
</script>
So the current state is: I'm stuck at #3, making it work with multiple blockquotes per page. Ideally it wouldn't be necesarry to manually assign IDs or something similar. So fully automated one #tweet this" button per blockquote. Is that possible?
Thanks!
Without seeing adequate markup, it is difficult to point where the problem is.
However, it works just fine.
See this fiddle: http://jsfiddle.net/JvT7h/2/
$("blockquote").append("<a href='http://twitter.com'>Click to tweet</a>");
Aside: append doesn't add an element after, but as a child inside.
Update:
As per your comments you need to customize the anchor link to be appended to multiple blockquotes depending upon the text of each blockquote.
See this updated demo fiddle: http://jsfiddle.net/abhitalks/JvT7h/3/
JQuery:
$("blockquote").each(function(){
var $link = $("<a />"),
linkText = "Click to tweet",
url = twshare + "&text=" + $(this).text();
$link.attr("href", url);
$link.text(linkText);
$(this).append($link);
});
You need to iterate over all blockquotes and then use $(this) to append the customized anchor.

How to apply css rule to a Javascript expression?

$("#confirm_text").text("Are you sure you want " +this.name +" "+ this.type +"?");
The whole phrase is white, but I want to make this.name and this.type orange. JS method fontcolor doesn't work. Any way to do this?
Try this :
"Are you sure you want <span style='color: orange'>" +this.name +" "+ this.type +"</span> ?"
Here you can see demo : http://jsfiddle.net/2pRzX/
this may work.
"Are you sure you want " +<span class="orange">this.name</span> +" "+ <span class="orange">this.type</span> +"?"
and apply css:
.orange{
color:orange;
}
I usually use < span class="orange"> this.name < /span> for this case.
In css .orange{color:orange;}
You have to put the text in some kind of HTML element, like <span>. Either you do it with innerHTML, which is the simpler method, or by creating the elements one by one.
Using jQuery (updated answer)
As the question was updated, I updated my answer to fit the new question.
Instead of .text, you can use the .html method which works like element.innerHTML = (see below in the old answer). It parses HTML code and inserts it into the element. Note that you should enclose the string in single quotes so that you can use double quotes without escaping them.
$("#confirm_text").html('Are you sure you want <span style="color:orange">' + this.name + ' ' + this.type + '?');
Using plain JavaScript (old answer)
This answer is outdated because the question has changed and jQuery rather than plain JS is required. I leave this here for later reference.
innerHTML
When you add HTML code to an existing element in the DOM, the browser will parse the string and create new elements. You can include the <span> tag in the string and the browser will create an element.
var targetDIV = document.getElementById("targetDIV");
// Add the text with innerHTML
targetDIV.innerHTML = 'Are you sure you want <span style="color:orange;">' + this.name + ' ' + this.type + '</span>?';
Creating the elements
Sometimes you can't just use innerHTML, especially if there is already text in the target element. This is an alternative:
var targetDIV = document.getElementById("targetDIV");
// Append the first peace of text
targetDIV.appendChild(document.createTextNode("Are you sure you want "));
// Create the span element
var orange = document.createElement("span");
// Change its text-color
orange.style.color = "orange";
// Add the text to the span
orange.appendChild(document.createTextNode(this.name + " " + this.type));
// Append the span to the target element
targetDIV.appendChild(orange);
// Append the question mark
targetDIV.appendChild("?");
Which to use?
In most cases, you can use either of these methods. I always use the second one, though, because I have the feeling that it is the "cleaner" one. You have more control over what happens, you can change things by adding/removing/changing lines instead of modifying a large string. You also don't have to check whether your HTML is valid. But as I said, both methods work.
Try this:
"Are you sure you want <span style='color: orange'>" +this.name +" "+ this.type +"</span>?"
You can add <span> </span> tags around the name and type values, and add an colour using CSS.
Example:
http://jsfiddle.net/BAhUG/

Categories