Opened 11 years ago

Last modified 11 years ago

#10153 confirmed Bug

Style combo update issue when inline editor programmatically created and focused

Reported by: Jacob Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0 Beta
Keywords: Opera Webkit Cc:


When programmatically creating an inline editor and giving it focus, the style combo doesn't reflect the selected style of the cursor. Worse, in Chrome, when you move the cursor/selection while in the same HTML element, the combo still doesn't update. It's not until you switch to a new element that the combo box starts updating.

May be easier to understand with this repro. Using the HTML/JS below, do the following in Chrome (I also attached a zip file):

  1. Click the "Start Editing" button
  2. Note that the cursor is on the H1, but the styles combo says "Styles" and not "Heading 1."
  3. Click & highlight elsewhere within the H1.
  4. Note that the styles combo still is stuck on "Styles."

I've been unable to find any workaround for this bug.

Repro HTML:



<script src="ckeditor/ckeditor.js"></script>


function onEdit() {

var div = document.getElementById('div'); div.setAttribute('contenteditable', 'true'); var editor = CKEDITOR.inline(div); div.focus();


</script> </head> <body> <div id="div" style="margin-top: 300px">

<h1>Header</h1> <p>Lorum Ipsum etc. etc.</p>

</div> <button onclick="onEdit()">Start Editing</button> </body>


Repro config.js:

CKEDITOR.editorConfig = function( config ) {

config.toolbar = [


name: 'style', items: Styles?



config.stylesSet = [


name: 'Heading 1', element: 'h1'

}, {

name: 'Paragraph', element: 'p'




Attachments (1) (709.1 KB) - added by Jacob 11 years ago.
Files to reproduce the bug

Download all attachments as: .zip

Change History (2)

Changed 11 years ago by Jacob

Attachment: added

Files to reproduce the bug

comment:1 Changed 11 years ago by Jakub Ś

Component: Core : FocusGeneral
Keywords: Opera Webkit added
Status: newconfirmed
Version: Beta

It seems that styles aren't caught for first element in editable.

  1. If you revert elements on page <p>Lorum Ipsum etc. etc.</p><h1>Header</h1> (paragraph is now first), you will get the same result for P.
  2. I thought that it may have something to do with first element in dropdown but tests didn't confirm this. I have tried adding new styles in repro/ckeditor/config.js (before h1 style) or switch them but results were the same.
  3. I have also tried reverting focus to second element in TC but again results were the same. First element in contenteditable didn't cause dropdown update.
    Replace this
    with this				
    				editor.on( 'instanceReady', function( event ){
    					var d = event.editor.document; 
    					var r = new CKEDITOR.dom.range(d); 							
    					r.collapse(true); ; 

Problem can be reproduced in Opera and Webkit from CKEditor 4 beta.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy