#17053 closed Bug (invalid)

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

Reported by: Waseem Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

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;
};

Attachments (1)

config.js (1.5 KB) - added by Waseem 19 months ago.
ckeditor config

Download all attachments as: .zip

Change History (2)

Changed 19 months ago by Waseem

Attachment: config.js added

ckeditor config

comment:1 Changed 18 months ago by Jakub Ś

Keywords: ckeditor scayt wsc removed
Resolution: invalid
Status: newclosed
Version: 4.7.0 (GitHub - major)

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

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy