Opened 6 years ago

Last modified 6 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:

Description

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:

<html>

<head>

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

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

</html>

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)

repro.zip (709.1 KB) - added by Jacob 6 years ago.
Files to reproduce the bug

Download all attachments as: .zip

Change History (2)

Changed 6 years ago by Jacob

Attachment: repro.zip added

Files to reproduce the bug

comment:1 Changed 6 years ago by Jakub Ś

Component: Core : FocusGeneral
Keywords: Opera Webkit added
Status: newconfirmed
Version: 4.0.14.0 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
    //div.focus();
    with this				
    				editor.on( 'instanceReady', function( event ){
    					event.editor.focus(); 
    					var d = event.editor.document; 
    					var r = new CKEDITOR.dom.range(d); 							
    					r.collapse(true); 
    					r.selectNodeContents(d.getById('div').getChild(1)); 
    					r.collapse(true); 
    					r.select(); 
    				});	
    

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

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