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: |
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):
- Click the "Start Editing" button
- Note that the cursor is on the H1, but the styles combo says "Styles" and not "Heading 1."
- Click & highlight elsewhere within the H1.
- 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)
Change History (2)
Changed 11 years ago by
comment:1 Changed 11 years ago by
| Component: | Core : Focus → General |
|---|---|
| Keywords: | Opera Webkit added |
| Status: | new → confirmed |
| Version: | 4.0.1 → 4.0 Beta |
It seems that styles aren't caught for first element in editable.
- 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. - 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.
- 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.
Files to reproduce the bug