ckeditor input text field loose focus and move cursor before text field

[Waseem]

I am trying to integrate ckeditor in a webapp where user inserts predefined text templates which includes input text fields as placeholder. At startup ckeditor is in focus with config.startupFocus = true. To enter data user click on field and textfield get focus with cursor inside textfield but it get lost after few seconds even while user is typing. somehow cursor is consistently moving out of textfield, it moves just before field. When I downgraded by removing all installed plugings this problem is gone, at further investigation it turned out problem is with scayt. As user turn on scayt for grammer and inline spell check this problem starts. I am using ckeditor_4.6.2_full with Chrome 57 on Windows7.

1. Add Input text field in ckeditor
2. enable scayt plugin
3. try to input data in textfield

Expected result

Text field should have focus and User should be able to enter data.

Actual result

Focus is lost from textfield

Other details (browser, OS, CKEditor version, installed plugins)

Sample text which I am trying to insert:

<p>
<span>Applicant must disclaim the design of 
<input contenteditable="false" size="20" /> together with the wording 
<input contenteditable="false" size="20" /> 
</span>
</p>

and my ckeditor config is:

CKEDITOR.editorConfig = function( config ) {
    config.enableTabKeyTools=true;
    config.allowedContent = true;
    config.autoParagraph = false;   
    config.height = 650;
    config.startupFocus = true;
    config.scayt_autoStartup = true;
    config.grayt_autoStartup = true;
    config.resize_enabled = false;
    config.extraPlugins = 'tab,dialogui,dialog,a11yhelp,about,basicstyles,bidi,blockquote,clipboard,' +
    'button,panelbutton,panel,floatpanel,colorbutton,colordialog,menu,' +
    'contextmenu,dialogadvtab,div,elementspath,enterkey,entities,popup,' +
    'filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,' +
    'font,format,forms,horizontalrule,htmlwriter,iframe,image,indent,' +
    'indentblock,indentlist,justify,link,list,liststyle,' +
    'maximize,newpage,pagebreak,pastefromword,pastetext,preview,print,' +
    'removeformat,resize,save,menubutton,scayt,selectall,showblocks,' +
    'showborders,smiley,sourcearea,specialchar,stylescombo,tab,table,' +
    'tabletools,templates,toolbar,undo,wsc,wysiwygarea';
    config.contentsCss = '../internal/css/editor.css';    
    config.scayt_inlineModeImmediateMarkup = true;    
    config.disableNativeSpellChecker = false;
    config.removePlugins = 'magicline,elementspath';
    config.browserContextMenuOnCtrl = true;
};

[Waseem]

ckeditor config

[Jakub Ś]

I'm sorry but this is not the way to do it. Typing inside input fileds which are inside contenteditable element (CKEditor) will not work in every browser. Second thing is that we simply don't support playing with contenteditable attribute on elements inside editor content area.

Proper way to solve this issue is using widgets. You Can either use the place holder plugin ​http://sdk.ckeditor.com/samples/placeholder.html or create your own custom widget.

For more information about widgets, please see:
​http://sdk.ckeditor.com/samples/codesnippet.html
​http://sdk.ckeditor.com/samples/mathjax.html
​http://sdk.ckeditor.com/samples/captionedimage.html
​http://docs.ckeditor.com/#!/guide/widget_sdk_intro

If you think it is still worth reporting this issue, then please note that SCAYT is not our plugin and any problems related to it should be reported to SCAYT team - ​https://github.com/WebSpellChecker/ckeditor-plugin-scayt/issues