I have draggable objects, and each content of an object can be editable.
Here is a sample:
http://jsfiddle.net/ashish41191/UH9UE/366/
The problem is when I type some words initially in an object, let's say the text is test for copy paste action. This is enclosed in a DIV <div> content </div>. If I select all of the typed words (ctrl + A or cmd + A) then paste it on the same text field, the pasted texts are not appended on the DIV. It rather creates a <span> copy paste words </span> inside the DIV. Can it be just appended on the DIV, like <div> content copy paste words </div>?
+1 for making me learn a HTML5 feature.
After a research, this is my inference:
HTML5 contentEditable is for Rich Text Editing. So each browser which supports contentEditable has its own way of presenting the style of the pasted content.
For your problem, I could not find a straight forward way to disable the rich text pasting.
Below the workaround,
$('body').on('paste', '.ui-widget-content', function (e) {
setTimeout(function() {
console.log($(e.target).html($(e.target).text()));
}, 100);
});
Updated Jsfiddle,
http://jsfiddle.net/UH9UE/372/
Related
I was able to create a simple web-page that uses clipboard.js with a button that pastes predefined text using the
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js" property as the documentation at the clipboard.js site shows, but now I want to place some text in a <span> tag and copy it when this text is selected.
However, I don't know how to 'tie' the data-clipboard-action="copy" data-clipboard-target="span" properties to a <span> tag and cause it to copy the <span>'s content with the onselect event.
Are there procedural statements that I can use in javaScript to perform the copying and pasting functions?
My goal is to embed code to copy selected text into the HTML part of an email and allow the recipient of the email to simply copy the selected text to the clipboard so that it can then be pasted from the clipboard into an input text box in a web-application's page.
This would simplify copy/paste on touch-screen devices, such as tablets and cell-phones.
You can use this code to get the selection of the screen and can use 'success' and 'error' event. Read Events and Advance section of the clipboard js
var clipboard = new ClipboardJS('button', {
text: function (trigger) {
return document.getSelection().toString()
}
});
Please see iAmADeveloper's comments for the answer.
Thanks, iAmADeveloper.
I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.
http://porcelaincoins.com
<a class="btn btn-lg" href="#">copy address</a>
This code will copy the text abc to the clipboard.
function copy(text) {
document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
document.getElementById("copy").focus();
document.execCommand("selectAll");
document.execCommand("copy");
document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>
How does it work?
Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
Finally, it removes the div from the DOM (i.e. destroys the div)
These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.
I am working on a website where I would like to be able to display a box containing syntax-highlighted source code for the user to copy. When I click on the box, giving it focus (Chrome shows its focus outline), and type Ctrl+A, the text of the entire page is selected, whereas I would like only the syntax-highlighted source code within the box to be selected.
Is it possible to restrict the range of select all/Ctrl+A to only the text within the box, preferably without using an <iframe>?
My first thought was to try contenteditable. When I click in the box and the editor caret appears, typing Ctrl+A selects only the text within the box, as desired, but it also allows the user to change the code, and I think that the editor-interface aspect of making the box contenteditable will be confusing to users. If I wrap the source code text within a <div> having contenteditable="false" within the <div> having contenteditable="true", then the source code text is read-only, but typing Ctrl+A selects the text of the entire page again.
Here is a test page: http://jsfiddle.net/5crgL/
You can use the document.createRange(); method to select the text from a particular element.
and to handle the ctrl+a you can use the jQuery keydown method and can call the JS code to select the DIV text.
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
please see jsfiddle here jsfiddle.
I'm developing an extension for Google Chrome; as a part of it there is a text highlighting capability.
I've managed to highlight a complete <p></p> tag (or any other tag) but I can't figure out how to highlight a part inside a tag. (user will not select an entire tag)
I found that I should use <span> inside the <p> tag but I can't figure out a way to do it.
How do I identify the part that the user selected?
How do I highlight the selected part (eg change the back color)?
A detailed explanation would be really helpful and highly appreciated, since I'm new to extension development.
What I've done in the past is split the text into 3 parts:
1- the text before the selected text.
2- the selected text.
3- the text after the selected text.
Then I clear the element's innerHTML (or another method), add the 'before' text, add a span with their text as its text (which has a style that can be highlighted), and the 'after' text.
To find out what they selected, you can use ranges (selectionStart & selectionEnd)
e.g.,
var html = elem.innerHTML;
var before = html.slice(0, elem.selectionStart);
var selected = html.slice(elem.selectionStart, html.selectionEnd);
var after = html.substring(html.selectionEnd);
This method isn't perfect, but it's a good starter to learn with.
I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
When all text in the div is selected, execCommand simply does not work. execCommand works fine when only part of the text is selected, but does nothing when all of the text is selected.
Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point the bold formatting is lost (until another space is inserted, interestingly enough; then the text becomes bold again).
To see what I mean, please try running the following HTML code in Firefox 3:
<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>
Please try the following:
Select the word "Some" only. Click the Bold button. This will make the text bold, as expected.
Select the entire phrase "Some editable text" (either manually or using CTRL-A). Click the Bold button. Nothing happens. This demonstrates the first bug shown above.
Hit the backspace key to clear the div. Click the Bold button and begin typing. Type a few words with spaces. This will demonstrate the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!
Interesting. In Firefox 3.6.3, I can't replicate the first problem: selecting all of the editable text and pressing the button toggles boldness as expected. However, the other two issues I do see. They'll be bugs in Mozilla's implementation of contenteditable.
Interestingly, the alternate-words-bold problem doesn't happen if you use designMode rather than contenteditable. I suspect it will solve your other problem too. This involves making the whole document editable, rather than just elements within it:
window.onload = function() {
document.designMode = "on";
};
If this isn't an option and you need the fine control that contenteditable provides, you'll need to implement your own version of the bold command using DOM manipulation and Ranges. This will be quite involved to get working in IE and non-IE browsers.