CKEditor4 Clipboard issue - ckeditor

I am trying to select all the content from a CKEditor instance and copy it to the clipboard when the user clicks a button on a different part of the screen. When the page initially loads, and I click the "Copy to Clipboard" button, the selectAll command works, but the copy command does not work. However, if I click the button a second time, everything works correctly.
Does anyone know how to resolve this issue? I am new to CKEditor, but this seems like a focus or timing issue. I'd rather not have to code phantom button clicks to make this work. Any help is greatly appreciated.
Here is my code. As you can see, I also tried wrapping the copy command in the "afterCommandExec" callback from the "selectAll" command. That didn't work either.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
var g_editorObj = new Object;
window.onload = function () {
g_editorObj = CKEDITOR.replace('editor1');
}
function doCopyClipBoard() {
try {
g_editorObj.focus();
g_editorObj.execCommand("selectAll");
g_editorObj.execCommand("copy");
//g_editorObj.on('afterCommandExec', handleCopy);
} catch (ex) {
alert(ex.Message);
}
}
function handleCopy() {
g_editorObj.execCommand("copy");
}
</script>
</head>
<body>
<input type="button" onclick="doCopyClipBoard()" value="Copy to Clipboard" /><br />
<textarea id="editor1" name="editor1" rows="10" cols="80">Testing this thing</textarea>
</body>
</html>


Please check if this order of things will work for you:
editor.focus();
editor.once( 'selectionChange', function() {
editor.execCommand( 'copy' );
} );
editor.execCommand( 'selectAll' );
or alternatively:
editor.execCommand( 'selectAll' );
setTimeout( function() {
editor.execCommand( 'copy' );
}, 0 );
Note that access to the clipboard is only possible in IEs. It's a matter browser limitations and there's no way to bypass that thing.

Related

Trying to read responseText to XMLRequest is just duplicating the body

So what's the deal? I'm simply trying to read text from this file. However, this code has the odd effect that, when I click the button, it seems to take the content of the page as the responseText, and will duplicate the button and paragraphs. Yet as far as I can tell I am mimmicking the W3Schools example, yet it doesn't work.
<head></head>
<body>
<button onclick = "loadDoc()">Something to load?</button>
<p>Here's a paragraph</p>
<script>
function loadDoc(){
let xhttp = new XMLHttpRequest();
xhttp.onload = function()
{
document.write(this.responseText);
}
xhttp.open("GET", "testText.txt");
xhttp.send();
}
</script>
</body>

p5 setVoice not working

while trying to change the voices in the p5.speech, setVoice function just not working at all...
I've been tried both string and index, but still went wrong, is there anyone can help? I would be really appreciated!!
Thanks!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js">
</script>
<script src="p5.speech.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<button id='talks'>
click to talk
</button>
<script>
$('#talks').click(function(){
console.log('hi')
var talk= new p5.Speech()
talk.onLoad=Voices
function Voices(){
talk.listVoices()
talk.setVoice('Google UK English Male')
}
talk.speak("What's up")}
</script>
</body>
</html>
below is the output of talk.listVoices() :
enter image description here

Firstly my answer is not the full solution, but there are some simple SyntaxErrors in your example. Thats why it's not runable for me at all.
You are opening click( but didn't close it, for better clearance i reformatted your code and added the closing bracket.
A function normally get's called with brackets, so it should be Voices();
This is not necessary for every Browser, but normally an ending line in JavaScript get's an ;
$('#talks').click(
function(){
console.log('hi');
var talk= new p5.Speech();
talk.onLoad=Voices();
function Voices(){
talk.listVoices();
talk.setVoice('Google UK English Male');
}
talk.speak("What's up");
}
)
With that changes i get an console output like this:
VM43:3: hi
p5.speech.js:136 p5.Speech: voices not loaded yet!
p5.speech.js:89 p5.Speech: voices loaded!

Problems with mouse events on newly created CKEditor instance

I'm trying to create a create a new CKEditor ver4 instance in response to the user clicking on an element. Due to the nature of the application, I can not use the "autoInline" feature as outlined in the CKEditor Sample. While the sample below does in fact create an editor instance, that instance has a significant problem. Inline instances are supposed to disappear when the user clicks away from them. In this example however, the user must first click away, click back into the instance, and then click away again. How can I prevent this?
<!doctype html>
<html>
<head>
<script src="jspath/ckeditor.js"></script>
<script>
var editor = null;
CKEDITOR.disableAutoInline = true;
function init() {
var e2 = document.getElementById("element2");
e2.addEventListener("click", function () {
if(!editor) {
editor = CKEDITOR.inline(e2);
editor.on('instanceReady', function () {
console.log("instanceReady")
console.log(editor.focusManager.hasFocus);
});
editor.on('focus', function() {
console.log("focus");
})
editor.on('blur', function() {
console.log("blur");
editor.destroy();
editor = null;
})
}
})
}
</script>
</head>
<body onload="init()">
<div tabindex="0" id="element2" style="background-color: yellow;" contentEditable = true>Element 2</div>
</body>
</html>

Despite the fact that editor.focusManager.hasFocus was true, the editor's element did not in fact have focus. Perhaps this is a bug? Anyway, adding editor.focus(); to the instanceReady function resolved the issue.

Getting Google Plus button to show after inserting markup with ajax

I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.

Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});

Uncaught [CKEDITOR.editor] The instance "html" already exists

I have a problem with loading CKEDITOR. I have made everything like described here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration But anyway i'm getting an error (Google Chrome 4.x) Uncaught [CKEDITOR.editor] The instance "html" already exists.
Here is my code:
<script type="text/javascript" src="/engine/jq.js"></script>
<script type="text/javascript" src="/engine/cke/ckeditor.js"></script>
<script type="text/javascript" src="/engine/cke/adapters/jquery.js"></script>
<textarea class="jquery_ckeditor" name="html" id="html" rows="10">text</textarea>
<script type="text/javascript">
if (CKEDITOR.instances['html']) { CKEDITOR.remove(CKEDITOR.instances['html']); // with or without this line of code - rise an error }
CKEDITOR.replace('html');
</script>

check this:
if (CKEDITOR.instances['html']) {
delete CKEDITOR.instances['html']
};
CKEDITOR.replace('html');

using the jquery ckeditor adapter - I was able to reinitialize ckeditor textareas in ajax content using this function.
function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
delete CKEDITOR.instances[$(e).attr('name')];
},{
toolbar:
[
['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
],
skin: 'office2003'
}
);
}

remove class='ckeditor' as it's triggering the automatic replacement system.

Same error, getting it with the jQuery adapter though. Check the class of the textarea. As far as i can tell all text areas with class 'ckeditor' are automatically converted to editors. So either don't bother setting it with javascript or change the class.

http://ckeditor.com/blog/CKEditor_for_jQuery has a fix if you are using jQuery
// remove editor from the page
$('textarea').ckeditor(function(){
this.destroy();
});

Your page has a html container, try renaming your textarea ?
<textarea class="jquery_ckeditor" name="editor" id="editor" rows="10">text</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>

The solution that works for me: in an Ajax view, having two controls
#Html.TextAreaFor(model => model.offreJob.profile, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_profile" })
and
#Html.TextAreaFor(model => model.offreJob.description_job, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_description" })
I use the following script:
<script>
if (CKEDITOR.instances['ck_profile']) {
delete CKEDITOR.instances['ck_profile'];
}
CKEDITOR.replace('ck_profile');
if (CKEDITOR.instances['ck_description']) {
delete CKEDITOR.instances['ck_description'];
}
CKEDITOR.replace('ck_description');
</script>

Try this, hope it works, it worked for me.
for(html in CKEDITOR.instances['html')
{
CKEDITOR.instances[html ].destroy();
}
http://dev.ckeditor.com/ticket/9862#no1

Try this, it worked for me
var editor = CKEDITOR.instances["your_textarea"];
if (editor) { editor.destroy(true); }

Resources