How to unfocus newly created CKEditor widgets

[Chandan Singh]

I'm not sure whether its an issue with CKEditor or an error on my part but this is the issue that I'm facing:

• I insert some HTML using a custom CKEditor command
• That element is upcasted to a custom CKEditor widget
• Focus is on the widget

Now, if an user wants to add some text or something else, one has to explicitly click on the red "Add new paragraph" thingy at the bottom of the widget. Now, my question is that can we automatically add that new paragraph after the widget? From what it seems to me, the issue is that the newly created widget is in focus and hence no other text can be added.

Please let me know how to fix this issue.

[Piotrek Koszuliński]

Magicline (the red thingy) was designed specially to solve the issue with inserting a paragraph below some other blocks. This problem is more general and also concerns tables, some custom divs, hrs, or even lists if someone does not know that double enter or shift+tab leaves them.

So I'm curious what's the problem with magicline?

I would advice to not add additional blocks automatically, because the reason why we implemented magicline was exactly that these empty blocks (which were earlier inserted automatically) were causing problems. Developers were complaining that they are unnecessary and breaks content.

PS. You can use magicline with keyboard (quote from a11y instructions):

Access previous focus space command

Press Shift+Ctrl+3 to access the closest unreachable focus space before the caret, for example: two adjacent HR elements. Repeat the key combination to reach distant focus spaces.

Access next focus space command

Press Shift+Ctrl+4 to access the closest unreachable focus space after the caret, for example: two adjacent HR elements. Repeat the key combination to reach distant focus spaces.

And from code using the "accessPreviousSpace" and "accessNextSpace" commands.

[Jakub Ś]

To unfocus the widget you can also use right/left arrow keys. This is correct when we are talking on GUI level.

---

I got impression that you want to do it from code level. If that is the case please try below code sample with empty editor:

var ed = CKEDITOR.instances.editor1;
ed.insertHtml('<figure class="caption"><img alt="Saturn V" src="assets/image1.jpg" width="200" /></figure>');
			
var range = ed.createRange(); 
range.moveToPosition( ed.widgets.focused.element, CKEDITOR.POSITION_AFTER_END ); // get out of widget
var emptyP = new CKEDITOR.dom.element( 'p' );
emptyP.appendBogus();
emptyP.appendTo( ed.document.getBody() );
range.moveToPosition( emptyP, CKEDITOR.POSITION_AFTER_START );//put selection into paragrpah
ed.getSelection().selectRanges( [ range ] ); 

Is this what you wanted and can this issue be closed?

[Chandan Singh]

@Reinmar, thanks for informing me about Magicline. It works fine but the only issue with it is that when a user enters a very long block element, one has to scroll all the way to the bottom to insert more text. I understand that adding new paragraphs is wrong and that is not what I'm asking here. I wanted to ask that is there a way by which I could lose focus of the newly created widget and put cursor after it so that further text can be added (programatically).

[Piotrek Koszuliński]

a way by which I could lose focus of the newly created widget and put cursor after it so that further text can be added (programatically).

I think that it all comes down to handling some keystroke when widget is focused. E.g. you can try handling simple down arrow key by executing the 'accessNextSpace' command. I don't know how it's going to behave when there already is a paragraph after the widget, but it should definitely create a new one when there's none.

U will need this: ​http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget-event-key