The forum operates in read-only mode. Please head to StackOverflow for support.

Mon, 09/06/2010 - 22:09

ngar

Joined: 06/09/2010

Posts: 5

[solved]which instance has focus

Hello,

it is my first try with ckeditor.

I have 2 instances on a page. On a click on a button which is located outside of ckeditor, i want to paste some text in the editor textarea which has the focus.

But I can't find a way to dicide (with javascript) which instance has the focus.

I tried http://cksource.com/forums/viewtopic.php?t=16744 but the text pasted in the 2nd instance and not in this one, where the cursor is.

How do I get

oEditor

for

oEditor.insertHtml(text);

?

Regards

Ngar

Mon, 09/06/2010 - 22:34

zanpakutō

Joined: 08/02/2010

Posts: 122

Re: which instance has focus

Hi Ngar,
See my CKEditor CodeMirror plugin tutorial to see how to select a running instance.
The code that will interest you is the toolbar code.
You pass the id of the element CKEditor has replaced to the instances object. So if you have a textarea with the id of editor2, your instance can be reached using :

CKEDITOR.instances.editor2.insertHtml(text);

If you look at the MirrorUpdate function too, you will see how to perform a single function on all instances in the DOM by running through the CKEDITOR.instances array.

Thanks,
Zanpakutō

Mon, 09/06/2010 - 23:08

ngar

Joined: 06/09/2010

Posts: 5

Re: which instance has focus

Maybe i explained unclear or I dont understand ur tutorial.

I have 2 textareas replaced by ckeditor.

<textarea id="dynContent1"></textarea>
<textarea id="dynContent2"></textarea>

<script type="text/javascript">
                  //<![CDATA[
                     CKEDITOR.replace('dynContent1',
                     {
                        sharedSpaces :
                        {
                           top : 'topSpace'
                        }
                     } );
               
                     CKEDITOR.replace('dynContent2',
                     {
                        sharedSpaces :
                        {
                           top : 'topSpace'
                        },
                           height: '350px'
                     } );
                  //]]>
                  </script>

and a Button who is not in the toolbar of ckeditor.

   <input type="button" value="Test" onclick="insertCK('some text to insert');" />

In the function insertCK i need to decide in which of the 2 instances the cursor war, before the button was clicked.

Otherwise - how do I define a on focus function? When the editor instance is entered a function will change the showed button.

regards

Ngar

Tue, 09/07/2010 - 08:33

yfrommelt

Joined: 24/02/2010

Posts: 49

Re: which instance has focus

When you click outside the editor you lost the focus, there is noway to know witch one.

Tue, 09/07/2010 - 13:59

zanpakutō

Joined: 08/02/2010

Posts: 122

Re: which instance has focus

Ngar wrote:Maybe i explained unclear or I dont understand ur tutorial.

I have 2 textareas replaced by ckeditor.
<textarea id="dynContent1"></textarea>
<textarea id="dynContent2"></textarea>
   <input type="button" value="Test" onclick="insertCK('some text to insert');" />

You need to pass two parameters to your function then :

<input type="button" value="Test" onclick="insertCK('dynContent1', 'some text to insert');" />

<input type="button" value="Test" onclick="insertCK('dynContent2', 'some other text to insert');" />

function insertCK(i, x) {
CKEDITOR.instances.i.insertHtml(x);
}

yfrommelt wrote:When you click outside the editor you lost the focus, there is noway to know witch one.

Nope. Learn how to use the API and you'll understand why that statement is incorrect.

Thanks,
Zanpakutō

Tue, 09/07/2010 - 17:52

ngar

Joined: 06/09/2010

Posts: 5

Re: which instance has focus

Zanpakutō wrote:

<input type="button" value="Test" onclick="insertCK('dynContent1', 'some text to insert');" />

In this way I need 2 buttons on the page 1 for each instance. But I want only 1 an JS have to decide in which area the cursor was.

I tried another solution. On entering a instance, a on focus event fired, and change the buttons.

If I use this

CKEDITOR.instances.dynContent1.document.on('focus', function(event) {
// your instructions
   alert('alert');
});

nothing is happend.

But if I use this

CKEDITOR.add = function( editor ) {
   
   editor.on( 'focus', function(){
      alert('alert');
   });
};

the function fired. Only the

function insertCK(editor, tag) {
   var oEditor = CKEDITOR.instances[editor];
   oEditor.insertHtml(tag);
}

doesn't work any more.
Without the 'CKEDITOR.add = function( editor )' the 'insertCK works fine.

What is my failure with onfocus function?

Thanks

Ngar

Wed, 09/08/2010 - 14:31

zanpakutō

Joined: 08/02/2010

Posts: 122

Re: which instance has focus

You need to write a plugin which has no button which stores the last interacted instance name in a variable every time an editor is interacted, with if you want to use the API outside of the editor.

As yfrommelt said, you click outside of the editor and no editor has focus but if you update your own variable every time the editor focus is set and not unset, you can tell which one was last focused.

What you seem to be describing doesn't map out as a usable work flow to me. Either you are trying to do something spammy with CKEditor and manipulate lots of forms or you haven't thought out your whole application's implementation properly.

You essentially must write a last interacted with focus saving plugin. Other than that, I can help you much further. Sorry.

Thanks,
Zanpakutō

Wed, 09/08/2010 - 16:46

ngar

Joined: 06/09/2010

Posts: 5

Re: which instance has focus

I have null skill with ckeditor. My first try to write a plugin was a big flop. That's why I tried another way becaus my deadline is near.

I define 2 Buttons:

<div id="dyn1">
   <input type="button" value="Button 1" onclick="insertCK('dynContent1', 'Text1');" />
</div>
<div id="dyn2" style="display: none;">
   <input type="button" value="Button 2" onclick="insertCK('dynContent2', 'Text2');" />
</div>

The working switching code :

CKEDITOR.add = function( editor ) {
   
   editor.on( 'focus', function(){
      if (editor == 'dynContent1') {
         document.getElementById('dyn1').style.display = 'block';
         document.getElementById('dyn2').style.display = 'none';
      } else {
         document.getElementById('dyn1').style.display = 'none';
         document.getElementById('dyn2').style.display = 'block';   
      }
   });
};

Here the non-working insert-function

function insertCK(editor, tag) {
   CKEDITOR.instances[editor].insertHtml(tag);
}

Finally I solved my problem.

I forgot following statement in the CKEDITOR.add function:

CKEDITOR.instances[ editor.name ] = editor;

This solution is good enough for me at this time.

Thx at all!

Regards

Ngar