CKEDITOR how do i focus blur elements - php

Question

Hello i'm new to CKEDTIOR , and I have some problems . I would like to focus when you click on the ckeditor element , and unfocus when you click outside of it . Can you please help ?
var challengeEd = undefined;
$('#thechallenge').focus(function() {
challengeEd = CKEDITOR.replace('thechallenge');
});
var solutionEd = undefined;
$('#thesolution').click(function() {
solutionEd = CKEDITOR.replace('thesolution');
});
var companyEd = undefined;
$('#thecompany').click(function() {
editor = CKEDITOR.replace('thecompany');
});
var customeruseEd = undefined;
$('#thecustomeruse').click(function() {
editor = CKEDITOR.replace('thecustomeruse');
});
$('body').click(function() {
if (challengeEd != undefined)
challengeEd.destroy();
if (solutionEd != undefined)
solutionEd.destroy();
if (companyEd != undefined)
companyEd.destroy();
if (customeruseEd != undefined)
customeruseEd.destroy();
})

Answer 1

Good start, but I see there is the problem with blur part. It is good to utilize component API and in case of CKEditor there is blur event:
Fired when the editor instance loses the input focus.
So I would go with the code like:
[ 'thesolution', 'thechallenge' ].forEach( function( selector ) {
// Attach focus listener.
document.querySelector( '#' + selector ).addEventListener( 'focus', function() {
// Create editor.
var editor = CKEDITOR.replace( selector );
// When instance is ready - focus it.
editor.on( 'instanceReady', function() {
editor.focus();
} );
// When editor losses focus - destroy it.
editor.on( 'blur', function() {
editor.destroy();
} );
} );
} );
for HTML like:
<textarea name="thechallenge" id="thechallenge" rows="10" cols="80">
<p>Foo Bar Baz</p>
</textarea>
<textarea name="thesolution" id="thesolution" rows="10" cols="80">
<p>Foo Bar Baz</p>
</textarea>
Live demo on codepen
So for each textfield there are 4 simple steps:
Attach focus listener (native or you can use jQuery).
Initialize editor instance on focus.
When editor is ready - focus it (it won't be focused be default after initialization).
On blur destroy editor instance.

Answer 2

Here is another solution :
for (instance in CKEDITOR.instances) {
var editor = CKEDITOR.instances[instance];
if (editor) {
// Call showToolBarDiv() when editor get the focus
editor.on('focus', function (event) {
showToolBarDiv(event);
});
// Call hideToolBarDiv() when editor loses the focus
editor.on('blur', function (event) {
hideToolBarDiv(event);
});
//Whenever CKEditor get focus. We will show the toolbar span.
function showToolBarDiv(event) {
//'event.editor.id' returns the id of the spans used in ckeditr.
$('#' + event.editor.id + '_top').show();
}
function hideToolBarDiv(event) {
//'event.editor.id' returns the id of the spans used in ckeditr.
$('#' + event.editor.id + '_top').hide()
}
}
}
});