I am trying to copy the text from inside an Ace Editor box into my local clipboard, using the pure JS method described here. However, when I click my copy button, it will throw me an error:
"TypeError: copyTextarea.select is not a function"
and the text will not copy to my clipboard. Is there a way to do this somehow (either pure JS or jQuery)? My code is as follows (simplified but should be enough):
$('#clipboard').on('click', function() {
var copyTextarea = document.querySelector('#result-box');
copyTextarea.select();
document.execCommand('copy');
});
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
</script>
P.S.: There is another error thrown about some worker and whatnot concerning Ace, if anyone knows how to fix that, too, comment below. Thanks in advance!
call focus and selectAll on the editor, it works on most of modern browsers
$('#clipboard').on('click', function() {
var sel = editor.selection.toJSON(); // save selection
editor.selectAll();
editor.focus();
document.execCommand('copy');
editor.selection.fromJSON(sel); // restore selection
});
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
</script>
The select method should be available in the textarea as a native method, and you're using it in a div (which is what ace requires to work).
Retrieve the value from the editor, set that value to a textarea and then copy the content using your method.
You can retrieve the text of Ace using getValue :
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<textarea id="clipboard-content"></textarea>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
$('#clipboard').on('click', function() {
var copyTextarea = document.querySelector('#clipboard-content');
copyTextarea.value = editor.getValue();
copyTextarea.select();
document.execCommand('copy');
// Reset textarea
copyTextarea.value = "";
});
</script>
However note that the method that you're using to copy the text, will not work if you hide the textarea.
I recommend you to use a plugin instead, read the following article to see possible solutions with pure javascript and fallbacks with flash (using js).
Related
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I am trying to implement autocomplete using Twitter typeahead library for a iFrame so that When I start typing in iframe the suggestions should start showing up but it isnt.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
</head>
<body>
<iframe id="editorArea-frame" style="width:100%; height:100%;" frameborder="0"></iframe>
</body>
</html>
<script type="text/javascript" src="iframe.js"></script>
Javascript code
var editorFrame = $('#editorArea-frame')[0];
var html = '';
html += '<style type="text/css">pre { background-color: #eeeeee; }</style>';
html += '<style type="text/css">html,body { cursor: text; } #editorDiv { display: inline-block; height: 100%; width: 100%; overflow-y:scroll; outline: none;}</style>';
html += '<body></div><div id="editorDiv" contentEditable="true"></div></body>';
editorFrame.contentDocument.open();
editorFrame.contentDocument.write(html);
editorFrame.contentDocument.close();
When I execute this piece of javascript code the iframe becomes blank and its body becomes empty.Can anyone point me as to what am i doing wrong?
$('#editorArea-frame').typeahead({
source: function(typeahead, query) {
return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
}
});
You must apply typeahead on an input field.
I would also advise avoiding iframe if you can. This may save you some brain cells.
Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
I am new to knockout js and
need help.
I want, when I will add number in text box division should resize to that size of pixel.
Following is the code:
<html>
<head>
<style type="text/css">
#myDiv {
border:solid 1px #f00;
}
#myOtherDiv {
border:solid 1px #00f;
width: 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var viewModel = {
myWidth: ko.observable( '250px'),
anotherDiv: ko.observable('KO is working')
};
ko.applyBindings(viewModel);
});
</script>
</head>
<body>
<div id="myDiv" data-bind="style: { width: myWidth }">
Some Text
</div>
<div id="myOtherDiv">
Some More Text
</div>
<div data-bind="text: anotherDiv"></div>
Enter size<input type = text />
</body>
</html>
You should bind input field tomyWidth property:
Enter size <input type = text data-bind="value: myWidth"/>
Also link to knockout is broken try this one: http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js
Here is a working fiddle: http://jsfiddle.net/wAYqY/
you have to use this link for knockout-2.2.0.js its work
<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>