Appending a url using a bookmarklet and clipboard item - google-chrome

I want to append text that has been copied to the clipboard to the end of a url when a bookmarklet is used.
i.e. highlight text, copy and click the bookmarklet and I go to a url with the copied text at the end.
Any help would be great.
I have this code but it works with highlighting text on a browser page. I want to read from the clipboard.
javascript:window.location.href="http://www.mybaseurl.com/"+window.getSelection()
I also have this code that is a little closer to what I need.
It prompts for input and goes to a url with the input at the end of a url
javascript:(function(){var val= prompt("Enter #","");if (val)location="https://www.test.com/send?phone="+escape(val);})()

after a bit of fooling around this is what worked for me, do note however that it will be asking for clipboard permissions, so it's somewhat limited in that regard.
javascript:navigator.clipboard.readText().then((clipText) => location="http://www.mybaseurl.com/"+escape(clipText))

Related

Typo3 8.7.7 CKEditor: E-Mail link not working (a tag removed)

I'm trying to insert an e-mail address with the ckeditor. After I saved my content element (text&media), the source code showing the ckeditor looks fine
some#mailaddress.com
But when I visit the webpage only the following is visible:
some(at)mailaddress.com
I found out, that the problem is the spam protection. If I enable
config.spamProtectEmailAddresses = 1
The mail not rendered anymore. It's working without protection, but I want to use it.
Thank you for help.
I have performed the following test (TYPO3 8.7.7) and CKEditor with full configuration:
1) config.spamProtectEmailAddresses = 1 and config.spamProtectEmailAddresses_atSubst = [at]
2) Create a CE text with image
3) write test email into the text editor and then use the "link" button to add an email address
3.1) write test#email.it into the text editor and then use the "link" button to add an email address
3.2) write test#email.it into the text editor without adding the link
Results
3.1) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');)
3.2) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');) while the visible text does not become test[at]email.it
3.3) no link is added to the text; the visible text does not become test[at]email.it
Could you tell us if you installed some CKEditor plugins or some write some detail of your configuration?
I found it out!
The problem was at my fluid template. I wrapped the {CONTENT} variable with
<f:format.html parseFuncTSPath="lib.parseFunc">{CONTENT}</f:format.html>
It's working now after I changed this to
<f:format.raw>{CONTENT}</f:format.raw>
but if you use <f:format.raw>, the email address is not spam protected anymore. Thats not, what you wanted, isn't it?
I have the problem, the <pre>-tag is html encoded and only works in <f:format.raw>, but then, the email addresses are plain.
Martin

Is there a way to allow users to copy text from a website, and the text be unformatted?

Pretty much just the question. I have a client that is requesting a negative design with nearly white text all over the webpage, but testers are saying that it's annoying to copy and paste from the website as everything shows up as white text when copying into Word or the like.
Is there a way to either preemptively remove formatting when a user tries to copy text from the website? Or is there a way to hijack what actually gets put on the clipboard?
Ctrl + alt + v or ctrl +shift + v should paste what's on your clipboard as unformatted text. Very handy for copying code samples to word docs. This should also work on Mac if you substitute cmd for Ctrl
Using code from both here Javascript: Hijack Copy? and here Get the Highlighted/Selected text (thanks #Jacque Goupil) I was able to piece together the following code that strips the formatting from anything copied on the page:
$("body").bind('copy', function(e) {
var newEl = document.createElement("p");
document.body.appendChild(newEl);
if (window.getSelection) {
newEl.innerHTML = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
newEl.innerHTML = document.selection.createRange().text;
}
var selection = document.getSelection();
var range = selection.getRangeAt(0);
selection.selectAllChildren(newEl);
setTimeout(function() {
newEl.parentNode.removeChild(newEl);
selection.removeAllRanges();
selection.addRange(range);
}, 0)
});
What goes in the clipboard by default depends on the browser. Text processors like Microsoft Word usually have options to ignore pasted style, so it shouldn't be an issue if they learn how to use it properly.
If you still want to make life easier for people, you could detect copy events and replace the formated text with raw text. This might help you:
How do I copy to the clipboard in JavaScript?
Get the Highlighted/Selected text
In Word you've got the option to 'Paste as plain text' (or 'Paste without formatting', not sure of the exact name in English). That way, you can easily paste text from any website without markup.
I don't think it should be the responsibility of the website to implement a 'copy without markup'.
Other trick: paste text with markup in Notepad first. Then select it in Notepad and copy again. The clipboard now contains only plain text.
Of course it's hard to educate the users, but unless there is a very good reason why people would be copying texts from the website, I wouldn't make a custom implementation for it. Those implementations, especially when you override default behaviour (capture Ctrl+C), will probably not work well or at least the same in every browser, and they are just a fix for your website, not everyone else's. Also, such a feature might annoy other users who do know how to handle text with mark-up. So I think it's better to let the users figure out themselves.
As for hijacking the clipboard, if you copy HTML, the browser actually copies the content in multiple formats, like HTML, RTF and plain text. If you had the means, you could simply remove the HTML and RTF version from the clipboard and let the plain text version remain. But I'm pretty sure you don't have that much control over the clipboard from the browser.

HTML Input Droppable + Libre Office

I've a droppable input.
1- When i drag drop a html text, the drop works...
2- When i drag drop a gedit (bloc note linux), the drop works
3- But When i want to drop a selected text from LibreOffice Writer or
Calc, it don't works...
I've created a fiddle if someone can help me... : http://jsfiddle.net/CnwvC/
with code
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input id='inputid' type='text' value="snif">
<p>html blabla to test to drop </p>
Instead of gedit, the LibreOffice text content is not plain text. This could be one of the reasons that it doesn't allow you drag and drop its content to your input box.
One interesting fact is that if you drag and drop a content from a webpage to you document on Writer you'll get the HTML content of the page (all the tags), but if you do the same in Google Chrome, you will get the rich content (like colour, formatting, and so on). This was reported by other folks.
If you try to drag LibreOffice's content to any area on Firefox, it will be same issue.
So, the problem is not in your code, but in the way that LibreOffice (Writer, Impress, and all the other apps) integrate with the browser libraries.
Hope that help you, it's not an usual issue.
Thanks
When you "copy" a document fragment, the program puts in the clipboard possibly more than a single version of what you copied.
Versions are tagged with their format.
Like for example if you paste the fragment in a text editor like vim it will choose a "text only" version because it doesn't deal with "text richness".
There might also be an HTML formatted version, and one in "rich text" format.
It's up to the pasting application to choose the right version.
If it doesn't specify any then the system (my experience was on Windows) chooses the most universally accepted one, that is, plain text.
It is explained in this MSDN page.

When copying automatically add URL

I have seen on few websites that when you copy some text from there, and paste anywhere, it will add the URL of the page from where I copied the text.
For example:
This is text I copied.
and when I paste, I get:
This is text I copied.
Read more: http://example.com/abc/def
I'm just curious to know how this is done? How to add additional text in the copied text?
Example: Check this question (or any other) on answers.com. Copy the question text and paste. Tested with Firefox latest version.
There are many online tools which provide this and other website/blog management utilities. Answer.com is also using one such service named tynt. Open the link, scroll down to the bottom and you can see answer.com in featured clients ;).
For more information.
Zeroclipboard should help you modify the clipboard content. It's a flash movie that is hidden in the browser and exposes a JavaScript API to access the clipboard.
Example.
var clip = new ZeroClipboard.Client();
clip.addEventListener('complete', function(client, text) {
clip.setText(text + "Read more at www.");
});

HTML link to a certain point in a webpage - slight twist

Here's the use case: A user clicks on a link that opens a window displaying the contents of a text log. Easy enough. But is there a way of using POST, to open that text log to a certain location (i.e., search for a particular timestamp given in the post, and show the file at that specific location)?
(Assume I can't put html tags inside the text log -- it's a raw file).
Template of log:
+++ 2009/06/19 10:47:12.264 ACTION +++
+++ 2009/06/19 10:49:12.111 ACTION +++
So I want the page to load a specific timestamp.
Thanks,
Michael
Why can't you just have a php or perl or simlar script that processes the log file on the spot, and sticks in html anchors and calls it a day?
Doing on the spot processing would also allow you display a trimmed down copy of the log thats only relevant to the timespan around the event in question.
Since you can't modify the file, the only way would be to wrap it in a <frame> or an <iframe> and drive the searching and scrolling from JavaScript in the neighbouring/containing page.
Here's an example, which you can try out online at http://entrian.com/so-container.html
<html><head><script>
function go() {
// "line" is the <input> for which line to jump to; see the HTML.
var line = document.getElementById('line').value;
if (document.body.createTextRange) { // This is IE
var range = frames['log'].document.body.createTextRange();
if (range.findText(line)) {
range.select(); // Scroll the match into view and highlight it.
}
} else { // Non-IE. Tested in Firefox; YMMV on other browsers.
frames['log'].find(line); // Scroll the match into view and highlight it.
}
}
</script></head><body>
<input type='text' size='5' name='line' id='line' value='10'>
<button onclick='go()'>Go</button><br>
<iframe name='log' width='100' height='50' src='so-data.txt'>
<!-- so-data.txt contains the numbers 01-20 on separate lines -->
</body></html>
I've tested that in IE7 and FF3; I'd be surprised if it worked elsewhere without edits, but you never know your luck!
Obviously in your case you'd be driving the scrolling programmatically rather than via an <input> box, but you can see how it would work for you.
If you could put some tags around the file's text, then you could probably insert some javascript that would scroll the window after loading it.
Yes, but passing your parameters via a querystring would be a whole lot simpler.
To scroll to a certain position in the text file you will need to user javascript (overly complicated in my opinion) or add an html anchor tag.
If you were planning to post the raw text log in a window, you will also run into some difficulty as HTML will not recognize the newlines and run the log together into one blob.
have you tried
window.open ('log.txt');
window.scrollTo (0, window.scrollMaxY);
? From mozilla reference : https://developer.mozilla.org/en/DOM/window.scrollMaxY
Keep a 'living copy' of the log file that has been translated to HTML - every time the original file is modified (or simply every X seconds), check for and append the newest lines with HTML anchors applied to the HTML version.
A new feature was added to Chromium waaaaay back in 2020 that allows you to link to ANY location on any webpage.
At the time of this writing, it works for sure in Chrome and Opera but not yet in Firefox, Safari or Brave browser.
The trick is to add:
/#:~:text=
and follow the equal sign with the desired search text, replacing any spaces with %20. Example:
There is no ID near this location on the page
<div>IMPORTANT: Use Opera or Chrome to open above link</div>
For more information:
Linking to a specific part of a web page