Custom Query

Browsers: all

1. Load editor with following content:

<ol>

<li><h1>One</h1></li> <li>Two</li>

</ol>

2. Put caret right after "One" word
3. Click "Increase indent" button located in toolbar

Actual result: list item with word "Two" disappear

1. Open link dialog.
2. Open "Target" tab.
3. Select <popup window>

This is pretty old part of the Editor, especially "Dependent (Netscape)" option. We should remove this option since we do not support Netscape for a while.

Tested in Opera 20.0.1387.91, Windows 7 64-bit, Flash Player 13.0.0.182

1. Open sample ​http://ckeditor.dev/plugins/htmlwriter/samples/outputforflash.html
2. Open link dialog (by hitting Ctrl + L when editor focused or by clicking appropriate button)

Actual Result: Dialog box is behind flash content

1. Open Replace by class sample.
2. Select a paragraph.
3. Apply "Special container" style.
4. Select "Special container" style again to remove to.

Result: border and padding is removed but background is still grey.

On Chrome background is also removed.

Since 4.0.

1. Open replacebycode.html sample
2. Put cursor e.g in header Apo^llo 11
3. Press Shift+End to select text
4. Press Delete

Problem: Paragraph below is joined with deleted Header. If you do that with mouse or try same steps in modern browsers, only header will be deleted but no joining will occur.

This problem occurs in native contenteditable used in IE8-11 but in CKEditor this doesn't work in IE8-10. For some reason this issue works in IE11 in CKEditor. Perhaps there is something that can be done in IE8-10?

NOTE: When you do the same with mouse it will work.

Steps to reproduce

1. Open the nightly demo page in IE11 ​http://nightly.ckeditor.com/14-04-16-06-05/standard/samples/replacebyclass.html
2. Place your cursor at the end of the document
3. Hold the Shift key down and tap the Up Arrow key repeatedly

Expected Result The selection expands one line at a time until you have the whole document selection

Actual Result Each time your cursor enters a new block that does not contain a filler the fixDom method reselects the current selection, when this happens the direction of the selection is lost and Shift+Up starts moving the end of the selection upwards instead of the beginning.

System This affects IE11 on both Windows 8.1 and Windows 7

Notes The steps to reproduce here are just for the convenience of reproducing it easily, I don't think we have anyone that actually selects large amounts of text holding shift and tapping the up arrow key. The scenarios we're getting from our customers when they run into this is that they usually hold Shift and Up to span multiple paragraphs and then without releasing Shift tap right or left arrow to fine tune their selection, this results in the end of their selection moving left and right if fixDom has been called due to the selection change.

There seems to be an issue with context menu in readonly mode. It does not pass correct argument to funciton registered with editor.contextMenu.addListener() (see ​reference) on right click. Elements path seems to be invalid as well.

Issue might be OS dependent - tested with FF28, Chrome, IE8 all @Win7.

1. change your editor config (i.e. by changing config.js) to contain: config.readOnly = true;
2. open any sample with CKEditor (i.e. samples/replacebyclass.html)
3. execute following code in order to register a simple listener:

   CKEDITOR.instances.editor1.contextMenu.addListener( function( el, sel ) {
   	console.log( 'clicked tag ', el && el.getName() );
   } );
   

4. right click directly on any link inside the editor

Expected result:
Editor should log something like:

clicked tag  a

Current result:
It uses totally different tag, and output is like:

clicked tag  h1

FF28@Win7 gives even a body as a parameter.

additional info:

1. PK did already a quick tests and says that everything seems to be ok at Mac
2. for me it seems that selection does not reposition itself in readonly mode or sth

1. Put attached api2.html sample into samples folder
2. Open sample in IE browser
3. This sample contains code for selectionChange:

   selectionChange : function(evt){
   	var htmlElement = evt.data.selection.getStartElement();
   	console.log(htmlElement.getText());
   }
   

4. Set compatibility mode for current page e.g. Top Menu -> Tools -> "Compatibility View"
5. Click on "Set Editor Contents" button
6. Click on "Objective".
7. IE will report

   Main Title
   Objective
   

8. Scroll Down and double-click on "Description". You may need to double-click few times.
9. Editor will report:

   Main Title
   Description
   

This doesn't happen in standard IE mode. Whenever you click on element, only its description gets reported.

Problem is reproducible in CKE 4.0 beta.

It’s an issue that deals with insert list and changing the list to Upper Roman or any other within the list and copying the list and pasting it again. This issue happens in IE8 and IE9 only. FireFox works correct Recreate Steps:

1. Created a list and indented the list (Highlighting all at once)
2. Highlighted all at once and Selected Insert Number list
3. Highlighted all and right clicked and selected Number List Properties and changed number list to Upper Roman.
4. The list updated and gave Upper Roman.
5. I highlighted the list and did a Control-C and copied the list.
6. I double spaced to give space
7. I did a Control-V to pasted the list.

Expected Results: To copy the same Upper Roman list. Actual Results: Pasted the Orginal Number list. (Please see the attachment)

If you use magicline to create a paragraph under a div the paragraph keeps the nbsp after typing content.

Open demo, remove all content and in source view type: <div>DIV</div>

Leave source view and use magicline to insert a paragraph under the div. Type some text - the nbsp remains at the end of the paragraph. Also clicking away from paragraph (before typing) and back to it doesn't remove the nbsp (text starts after it).

Appears viewing source helps fix the issue.

htmlParser and htmlWriter should handle HTML entities in attributes the same way browsers do natively. See test case in corresponding branch to notify the difference.

Object resizing for flash and iframe fake objects don't work. It's reproducable on full featured demo. After resizing fake object is set to 82x82 pixel. On double click it shows the right values in dialog width and height fields.

I want to remove table and image height settings completely. I only want widths set, so I set an ACF rule like so: img(*)[*]{width};table(*)[*]{width};

Now the height setting is gone from image properties, but so is the width. The table properties dialog shows only the width setting as expected.

I expected it to remove the height and lock ratio button, but leave the width and reset button. I'm a support client - should I have reported it through email instead of creating a ticket?

Since version 29 (​https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/29), Firefox supports box-sizing without the vendor prefix. Let's keep things clean and save some bytes here and there.

Range: <blockquote><p>y[</p>z</blockquote>]

Walker going forwards will execute guard twice on <p> and on "z". This may be a track of some bigger issue, but next() and previous() return nodes correctly, so only performance is affected.

The same bug occurs when going backwards with mirrored range.

Variation of #11853.

Problem can be reproduced in IE9-11

1. Open replacebycode.html sample and clean editor contents with New Page command.
2. Create numbered list (e.g. with 4 elements).
3. Select List with Ctrl+A
4. Right-click on list and open List Properties Dialog
5. Change style to upper Roman

Result: In IE11 it is impossible to change numbering.

1. Load the editor with following content:

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td>c</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

2. Select the entire second cell ('b') on second column by double clicking it. Make sure the entire cell is selected.
3. Right click and choose Column > Insert Column After

Expected result

A new column is added between the existing second and third columns

Actual result

A new column is added after the third column e.g. as the last column in the table

Tested in Chrome

Edit: Please see comment:3[[BR]] Math plugin is disabled when inline editor is created on paragraph.

When using the inline editor on phrased content​https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content the option to add math with the Mathematical Content plugin is disabled.

According to the specs the <math> element is considered valid phrased content. I guess there is some unnecessary content filtering going on that prevents me from using the plugin? If so, is there a list where I can check which elements/plugins are allowed for each content type (flow or phrased)?

See comment:2 for TC. Note that this HTML is not fixed by Firefox nor Chrome when we pass content through fixBin.

To reproduce the defect:

1. Open any CK Sample and insert a Table with default values

2. Open Cell Properties dialog by clicking on Cell - > Cell Properties option in Context menu

Issue: see that Default values <not set> not shown in Horizontal Alignment & Vertical Alignment combo boxes

Tested on FF27, FF28 & FF29

Simplified TC:

1. Open ​http://ckeditor.com/demo#widgets
2. Put the cursor in 3rd line, after the first mathematical formula (The Cauchy-Schwarz Inequality)
3. The cursor is at the very end, it should be placed straight after the formula (a widget).

This happens because a non-editable element is at the end.

Original TC:

Configuration: Plugins: image2 enterMode: ENTER_P

Steps to Reproduce in Chrome Or Safari:

1. Open up plugins/image2/dev/image2.html
2. Select an image and remove caption alignment styles
3. Make sure the image is the only item on the line
4. Click to the right of the image

You will see the cursor appears on the right side of the screen, at the end of the P tag.

Expected Result: Cursor should be next to the image.

I reproduced this from the source code repository. I originally found it in my implementation. When I add images by upload, this does not occur. I have to save the document and then load it up again to reproduce it. This does not seem to be a problem while in BR mode but I haven't totally verified that.

This is variation of: #11923

1. Open image2 sample.
2. Clear editor contents.
3. Paste below code:

   <p><img alt="Saturn V" src="assets/image1.jpg" style="float:right" width="200" /></p>
   
   or 
   
   <figure class="image" style="float:right"><img alt="Saturn V" src="assets/image1.jpg" width="200" />
   <figcaption>Roll out of Saturn V on launch pad</figcaption>
   </figure>
   

4. Switch to wysiwyg and try to click behind or before image.

Result: You won't see cursor blinking anywhere and you are not able to type in editor.

This is happening only with widgets.

Table resize plugin should also allow resizing row height.

Browsers: All

1. Open some sample with basic version of editor.
2. Select some word (double click or using keyboard).
3. Open native context menu on selected word (right click or by using keyboard).
4. By selecting appropriate value from native context menu (delete or cut) remove word from editor.
5. Use Ctrl + Z combination to undo chagnes.

Actual result: Undo action was not called. Probably because was not added to stack.

Please note: this bug occur in basic mode which does not support editor custom context menu.

After removing a table selection is being placed in buggy place, in addition to that editor seems to lose the focus.

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. switch to source and use following source code:

   <h1>foobar</h1>
   
   <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans,</p>
   
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
   	<tbody>
   		<tr>
   			<td>&nbsp;</td>
   			<td>&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
   	<tbody>
   		<tr>
   			<td>&nbsp;</td>
   			<td>&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   
   <p>Armstrong spent about...</p>
   

3. switch back to wysiwyg mode
4. remove second table, with one of two options:
   1. right click with your mouse, and use "Delete Table" option
   2. navigate selection using keyboard inside the table, press shift + f10 and use "Delete Table"

Expected result:

1. Table should be removed.
2. Selection should be collapsed, and moved at the beginning of next element:

   ^Armstrong spent (...)
   

3. Editor should keep focus
4. No empty line should be visible.

Current result:

1. editor leaves a temporary empty line, where selection is put
2. editor loses focus

additional info:

1. I've experienced it in FF and Chrome @Win7
2. This seems to be not a (recent) regression, because I've been able to repro it in 4.2.3

1. Open Full Page Editing sample.
2. Put this html in the Source mode:

   <html>
   <head>
   	<title><!-- foo --></title>
   </head>
   <body></body>
   </html>
   

3. Change mode to the WYSIWYG and back to source.

Expected:

<title>&lt;!-- foo --&gt;</title>

Actual:

<title>&lt;!--{cke_protected}{C}%3C!%2D%2D%20foo%20%2D%2D%3E--&gt;</title>

1. Open Table resize sample.
2. Set the following html (we need horizontal scollbar and table wider than WYSIWYG area):

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="1" style="width:1500px">
	<tbody>
		<tr>
			<td>foo</td>
			<td style="width: 1000px;">bar</td>
		</tr>
	</tbody>
</table>

3. Hover the last pillar.

Result: Error in the console:

SCRIPT5007: Unable to get property 'toLowerCase' of undefined or null reference 
element.js, line 711 character 3

I was not able to reproduce it in Chrome, FF nor IE11.

Screen cast attached.

1. open sample with image2 plugin (/samples/plugins/image2/image2.html)
2. focus first image widget instance
3. click "Anchor" button in toolbar menu

Expected result:
Since anchor should not be appliable to block widgets, end user would expect one of these two solutions:

• focused widget to be replaced with anchor
• anchor button disabled

Current result:
Nothing happens.

additional info:

1. tested with Chrome, IE

If users can resize images, flash or iframes, there should be a maximum for the width value. The value could be the width of the parent element.

Example:

<div style="width: 500px">
<img src="myimage.jpg" />
</div>

In image dialog, if is set a width value greater than 500, the value should be changed to 500, because the width of the parent div is 500 pixels.

If resize handlers are used, resizing should be stopped, when width is greater then 500 pixels.

Same for other medias like flash, iframes, tables or own fake elements.

Is it possible? Think this would be a nice feature, aspecially for inline editors.

You're able to move caret outside of any block element (in classic editor that will be directly into a body).

I've checked briefly and it seems that it was introduced in 4.3.0, since i couldnt repro it in 4.2.3, please double check it.

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. enable showblocks plugin
3. press ctrl + end

Expected result:
Caret should be stopped at the end of last node.

Current result:
Caret is placed after last block element, directly in body elmeent.

additional info:

1. I've experienced it in IE9 compat mode, did not tested in other IEs.
2. Seems that issue does not appear without showblocks plugin.

1. Open "Replace Textarea with Inline Editor" in the Opera browser.
2. Click several times to set cursor in the different position in the editor.

Result: Text area is blinking every time I click.

I was not able to reproduce that issue on Chrome.

Everything is fine in standard inline sample.

Tested with Opera 21.0@Win7.

Browsers: All

1. Open sample ​http://presets.ckeditor.dev/4.4.1/full-all/ckeditor/samples/replacebyclass.html.
2. Select sentence: Apollo 11 was in first paragraph.
3. Open find dialog.
4. Click find button.
5. In replace tab click 'Replace'.
6. Click close.

Actual result: There is an error in console: Uncaught TypeError: Cannot read property 'type' of null ckeditor.js:139

Plase note: similar to #11423

After a testing phase for D&D some issues related to Firefox multiselection were found:

​https://docs.google.com/document/d/1hG4H0r21MXNkRd3amDEOBPygJe3ehBAXFWAal2DptGQ/edit?usp=sharing

Bug 14, Bug 16.

This issues should be fixed after closing #11636.

Part of D&D umbrella: #11437.

In browsers like FF, IE you are able to press ctrl before (and hold it until) dropping a content. This way you should be able to copy dragged content instead of moving it.

1. open sample with CKEditor with new DnD
2. drag any element/text inside the editor
3. while dragging hold the ctrl key
   

Notice how the cursor changes to indicate a copy

4. drop it in any place
5. release ctrl key

Expected result:
Origin instance should not be removed.

Current result:
Origin is being moved ignoring ctrl key.

additional info:

1. Blink does not provide handling for this feature
2. I'm not sure if this feature is present in OSX

Summary: When dragging an image with width style in percentage in chrome, the width is changed to be in pixels.

Reproduction:

• Open standard demo in chrome browser
• Add an image and set it's width property to be in percentages, for example 50%
• Drag the image to a new position

Result: The width value is changed to be pixels

I think this is related to issue #9998, I beilive this is due to content editable behavior in chrome

When ​https://github.com/benderjs/benderjs/issues/12 will be done we should modify tests to use BASE_PATH to get global assets instead of related paths.

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Place caret inside simple box.
3. Click the 3rd element (2nd div) in elements path.
4. Viewport is scrolled and selection is placed outside widget

Expected: contents of simplebox'es content should be selected.

See: comment:2.

Hello,

When creating a new plugin, we almost always need to use a dialog instance. And maybe sometimes, we need to override default ckeditor style. In order to give all liberty of the theme of Ckeditor to the user, it would be a great idea to add a className attribute on the dialog configuration, so that plugin developers can add their own css without overriding everything else.

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Focus one of block widgets.
3. See format and styles drop-downs, basic styles, etc. All are enabled and many times values are incorrect - e.g. format is set to "normal div" for image2 inside nested editable (additionally, this is not consistent between framed and inline editors).

All these behaviours come from a decision we made while working on widget system. We decided that styles will be applicable to block widgets, because they may contain nested editables in which these styles may be applicable, even if they are not applicable to the widget itself (and besides widget styles they never are). This reasoning definitely makes sense - if I have 3 nested editables inside a widget and I want to make all text inside them bold I can focus widget and apply bold. Alternatively, I would have to apply bold three times. To make all this work we needed to modify style system so it traverse non-editable fragments of content, finds nested editables, retrieves their filter instances and asks them whether styles is allowed inside. This part works great.

Unfortunately, all the rest is a mess. Problems are caused by inability to correctly set style's command state and value. See the following scenarios.

1. Focus captioned image2 and apply bold. Bold is applied in the caption. Now, try to remove the bold. You can't, because bold button is still off after applying bold. Why is it off? Because <figure> is not inside a <strong>. Are we able to set the state to on? I don't think so - this would mean traversing focused widget's DOM, finding nested editables and then what? Enabling style if it's applied to entire content of all nested editables? Or at the beginning of any editable? In any case this would be a performance killer, because we not only need to find editables, but also first editable place inside them (text node, image, space before <br>, widget, etc).
2. Imagine the above scenario with captioned image2 nested in simple box. The algorithm will need to go inside that image2 when simple box is selected.
3. What is the expected format drop-down's value when simplebox is focused and it its content there are headings and paragraphs? Simplebox has a header in which format should be disabled. Then it has content, which may start with a normal block (paragraph, heading) or for example a captioned image. Image does not allow changing format (so should drop-down be disabled?), but after image there may be paragraphs, so maybe format should be enabled (but then what with the value?).
4. Imagine all these scenarios with widgets containing multiple nested editables of different types. User will never intuitively know what will happen and what's just happened.

And I'm sure that there are move lovely cases like these.

Therefore, I don't see other option than disabling styles when block widget is focused. Only widgets styles should be active.

Note that this won't change the behaviour of applying style to a selection containing some content outside a widget and a widget (e.g. bolding after doing CTRL+A on text with captioned images). Style will still be applied to all places in which it's allowed. There's a substantial difference between these cases - the start of selection. When selection does not contain only a widget, it starts in an editable place, so we can check style's state in that place.

These methods have to set a temporary id on the element because querySelectorAll has different behaviour that anyone could expect and it applies the selector to entire DOM tree, even below the root.

Additionally, querySelectorAll is not as fast as its simpler friends - getElementsByTagName and getElementsByClassName.

It may be worth to test such addition to find and findOne:

		if ( selector.match( /^\.[a-z_-]+$/i ) ) {
			var found = this.$.getElementsByClassName( selector.slice( 1 ) )[ 0 ];
			return found ? new CKEDITOR.dom.element( found ) : null;
		} else if ( selector.match( /^[a-z_-]+$/i ) ) {
			var found = this.$.getElementsByTagName( selector )[ 0 ];
			return found ? new CKEDITOR.dom.element( found ) : null;
		}

This needs a research, but I'm setting milestone, because we're planning to work on #10903.

1.Select all the characters in the text area 2.Click Cut option in tool bar 3.Now there are no characters in the text area, but still the Cut option is enabled

Browser: IE8, OS: Windows7

I found out that attribute contenteditable="false" in table cell does not fully disable cell content modification. I was able to modify cell content with following setup:

1. Create editor

CKEDITOR.replace( 'editor1', {
allowedContent: true
});

2. Copy-paste table

<table>
<tbody>
<tr>
<td contenteditable="false">Commander</td>
<td>Neil A. Armstrong</td>
</tr>
<tr>
<td contenteditable="false">Command Module Pilot</td>
<td>Michael Collins</td>
</tr>
<tr>
<td contenteditable="false">Lunar Module Pilot</td>
<td>Edwin &quot;Buzz&quot; E. Aldrin, Jr.</td>
</tr>
</tbody>
</table>

3. Click a cell having contenteditable set to false
4. Run commands from the toolbar such as create new list, align text center or block quote
5. Content in the cell is edited and new elements inserted (such as p-tag) to the cell. When align text was clicked repeatedly, p-tags were inserted before the table which came visible after toggling between source and WYSIWYG

I would assume that when setting table cell attribute contenteditable as false that no operation / command could be run after user has clicked the cell / has focus on the cell.

A solution would be to disable all buttons on toolbar when user puts focus to element having contenteditable false. Then it would be more evident for the user that the content can not be edited.

When CKEditor is in Inline mode, if you select multiple cells in a table and try to apply a background colour or border colour to the cells, only the top left cell seems to be affected by the change. The only way to change the cells is to go through each cell one by one.

I'm running CKE 4.3 on Firefox (v29), but I've noticed this issue is still unresolved on the latest Nightly Version.

Add the tableresize plugin to the fullPage demo.

Now clear the content, insert a table and move the mouse over it at least once so you see the resizer.

Then switch to source mode and you'll see that the body as a style="cursor:auto" set.

(depending on your speed you might even get the resizer value instead of auto).

Bonus points to fix the demo: the html created lacks a doctype (because the original value is a document fragment, not a full page)

*Can reproduce on IE9, IE 10, IE 11, Firefox 29 *Can't reproduce on Chrome 35, Safari 7

Tested on ​http://dubxpcvm022.mul.ie.ibm.com/ckeditor/4.3.X/4.3.2/20140324-1514/ckeditor/samples/skins.html

===Steps to reproduce===

1. Insert a table

2. Type something in the table

3. Press Ctrl + A to select all contents

4. Check the table

*Please refer the attachment to get more detail

===Expected Result=== The table should be highlighted when user press ctrl + A to select all contents

===Actual Result=== Only the text in the table is highlighted

First of all, big thumbs up for the new image2.plugin and also for the great inline documentation in it!

Currently, the image2 plugin only creates a figure wrapper if there is a caption. Otherwise, the default paragraph wrapper is used.

I have a use case which requires to have a figure wrapper *always*, even if there is no caption. This is mainly because we want consistency and it helps to have better styling options (now, an image can have a paragraph wrapper with or without text which leads to styling problems depending where exactly a person inserts an image).

I looked into the code to see if there is a clean way to do this, maybe through an option, but couldn't find one.

What would be the best way to approach this?

Steps to reproduce

1. Open the nightly demo page: ​http://nightly.ckeditor.com/14-06-03-06-06/standard/samples/replacebyclass.html
2. Load a large document into the editor (I have attached a 30KB sample document)
3. Type at the beginning and end of the document and compare the performance. In the affected browsers characters appear very slowly and the caret is often displayed 1 to 2 characters behind the actual insertion point.

Browser and OS

This issue occurs on Chrome in any Operating System, Internet Explorer 11 on any Operating System, and Internet Explorer 10 on Windows 8.

Firefox performs well in any Operating System. Internet Explorer 9 and 10 on Windows 7 perform well.

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html.
2. Start selecting from the header and end in simplebox's content.

Expected: It's impossible - entire widget should be selected as soon as you hover it with mouse.

Actual: Webkit and Blinks allow this.

This is Chrome@Linux bug only. Ticket for Blink: ​https://code.google.com/p/chromium/issues/detail?id=381177

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Try to dnd placeholder.
3. After drop you can only see a blank space.

Unable to select input and textarea elements for cut and paste with a mouse.

Elementspath plugin shows correct selection (body p input) but ctrl + x doesn't work. Element can be selected with shift & arrow keys if element has text before or after the element.

Reproducible with Firefox 29, latest Chrome (35.0.1916.114 m) and IE 11

<p><input type="text" value="dsfsdf" /></p>

<p><input name="dsffds" type="radio" /></p>

<p><textarea name="sadasd"></textarea></p>

<p><input type="button" value="sdsa" /></p>

With IE 11 if input has some text before it, problem doesn't exist.

<p>Foo <input type="button" value="bar" /></p>

On 4.0 DEV (revision 0) that I found lying on my computer CKEditor problem does not exist on any of the above browsers.

1. Open image2 sample.
2. Insert two captioned, not aligned images one after another.
3. Use magicline to create a space between them.
4. Try to remove this space now. It's impossible.

Original description

Hi, I tried in your "​http://ckeditor.com/demo#enter" demo page, using the third CKeditor with title "Produce <div> on ENTER", to create 3 divs: the first with contenteditable="false", the second with no setting, the third with contenteditable="false".

So I put the following content as content of the ckeditor body: <div contenteditable="false">This editor produces &lt;div&gt; on ENTER.</div><div>This editor produces &lt;div&gt; on ENTER.</div><div contenteditable="false">This editor produces &lt;div&gt; on ENTER.</div>

The bug I found is that I can't delete the second line. If I clean the row and try pressing backspace or delete button, CKeditor will delete the first and/or the third div.

Many thanks in advance Kind regards Daniele

Support for such editors could be useful:

<div style="display:inline-block" contenteditable=true></div>
<span style="display:inline-block" contenteditable=true></span>

Part of: #11437.

Native drag and drop supports a dragenter event fired when mouse enters drop container. This very useful way to say where user can drop and were not. Though, there's no access to clipboard data at that point so it's impossible to react based on what's dragged.

We can do better inside editor because we'll store dragged content in a global, custom data transfer object. We just need to join all these pieces together.

Plan:

1. On editable's and nested editable's dragenter we should fire editor#dragenter with a reference to container (editable) and our data transfer if exists for this drag.
2. When editor#dragenter is cancelled the native dragenter should be prevented so user is visually notified that content is rejected. This includes general dnd as well block widgets dnd.

In CkE4 the advanced content filter will convert a span with a style that includes 'font-weight:bold' to a <strong> element.

Before Html:

<span style="color:#ffffff;   font-weight:bold">First row</span>

After Html:

<strong>First row</strong>

The expected result:

<span style="color:#ffffff"><strong>First row</strong></span>

While using Chrome in Mac OSX (10.8.5), any time you select a cell in a table and set a property(ies), the same property(ies) get cloned to the next cell in the same row. This does not happen using firefox. A way around it is to highlight the content of the cell instead of the cell itself before setting the properties.

We tested this on the live demo to make sure it wasn't already fixed.

I found following bug:

1. go to ​http://ckeditor.com/demo#widgets, "Enhanced Image" ckeditor
2. remove all the content in the editor (ctrl+a => del)
3. click on image2 plugin button in the toolbar
4. choose an image from server, click on align left (or center or right) and then insert the image in the editor
5. click outside the image in the editor => widget does not lose focus, so user can't start writing (in order to write, you have to press the right arrow in the keyboard)

Thanks Daniele

1. Switch Windows to the High Contrast Mode (LALT+LSHIFT+PTSCREEN).
2. Open Image2 sample.

Drag handler is black on the black background so it is not visible. In this mode it is important to make elements as visible as possible.

In fact you do not need High Contrast Mode to meet this issue: in any case when background is black or dark drag handler is not visible. For example if you have dark image with caption and a widget in this caption then drag handler will be hardly visible too.

Tested on IE8 and Windows 7.

At the moment AutoGrow plugin supports ​config.autoGrow_minHeight and ​config.autoGrow_maxHeight along with ​editor#autoGrow event, which can be used to force a custom height on every editor resize, i.e.

CKEDITOR.replace( 'editor2', {
	extraPlugins: 'autogrow',
	autoGrow_maxHeight: 400,
	removePlugins: 'resize',
	on: {
		autoGrow: function( evt ) {
			evt.data.newHeight = 42;
		}
	}
} );

Such behaviour is desired when the space around the editor is changing, i.e. window is resized, other page elements collapse or expand.

The event, however, controls height only, while overflow-y of editable area remains relative to config.autoGrow_maxHeight. The result is that even though it is possible to customise the main behaviour of the plugin, the scrollbar of editable area might be missing, making editor contents unreachable, which is a serious UX flaw.

Possible solutions:

1. Implement editor.plugins.autoGrow.setMaxHeight, which would override config.autoGrow_maxHeight on demand.
   1. + Solves the problem.
   2. - Change is permanent. Some devs may want to override autoGrow_maxHeight on demand, while in other cases they would expect default configuration to be preserved and respected.
2. Re-implement editor#autoGrow event, so autoGrow_maxHeight can be changed for every single event.
   1. + Solves the problem.
   2. + The impact of config.autoGrow_maxHeight remains.
   3. - Makes the code less obvious.
   4. - It's not straightforward. Hard to reach in documentation.

1. On IEs empty cells' selection is invisible. IE renders only text selection.
2. On FF there's a similar problem like on IE, with a difference that cells can be selected as a whole but only by mouse.
3. Column selection is impossible on all browsers except Firefox.
4. It's hard to select a row.
5. [IE9+] No visual indication that a table is selected (#10897).

The full solution would be a fake table selection - similar to fake element selection which we have for non-editable elements. Partial solutions may also be possible.

Sub tickets: #8830, #12043.

1. Go to ​http://ckeditor.com/latest/samples/replacebycode.html
2. Press "New Page" button
3. Insert a table
4. Apply "Borderless Table" style

Result

Width definition is removed (a side effect i that now it is hard to insert content into cells).

Expected result

The following style definition should only add and/or override styles that are defined in the styles object. Other styles that were applied already to a table shouldn't be lost.

{
    name: 'Borderless Table',
    element: 'table',
    styles: {
        'border-style': 'hidden',
        'background-color': '#E6E6FA' 
    } 
},

If my intention is to remove 'width' when applying this style, I should be able to define it as width: '' or width: null etc.

Something I've noticed is that if you start typing a paragraph with a large font (tested with 48px) and mid-paragraph switch to a smaller font (tested with 16px), as the paragraph line wraps, the line heights are enormous as they they are formatted for the initial 48px content.

We use your product here daily. Looking into the HTML code that it produces, I can see that it creates a span element with a font-size of 48px as a "wrapper". Then, when I switch font-size to 16px, the editor creates a new span element with this new font-size and places it into the 48px wrapper. Thus, the entire paragraph inherits the line-height initially created by the 48px font size.

A current workaround is to create the entire paragraph with the 16px font size first. Then, after the paragraph is finished, select the word(s) that you want to be 48px and apply it. Doing it this way will create the wrapper with the 16px font size and an internal span of 48px font size where the overall paragraph line-height will be created from the wrapper 16px font size span.

Descriptive summary: When editor is initialized in readOnly mode, there is no need to preventDefault() on links, because he doesn't need caret positioning.

Steps to reproduce:

1. Open readOnly editor demo
2. Enable readOnly mode
3. Click on the link

Browser and OS: Chrome and Firefox under both Windows and Linux

Features that needs to be disabled in readOnly mode:

• widget hover,
• widget focus on click,
• nested editables must not be editable,
• drag handler must not be visible and widget must not be draggable
• #14558 - it is possible to delete widget in read only mode

Related: #11825.

1. Load replacebycode sample.
2. Clear editor contents with new page button.
3. Press Bold and type few characters.
4. Press Ctrl+A and then hit Backspsce or Delete.

Result: Bold text is not deleted and cursor is moved to the beginning.

Problem can be reproduced in Blink and Safari 6+ (works fine in Safari 5)

Tried this against the nightly build.

Editor does not autocapitalize correctly upon pressing return (new line). For it to autocapitalize, one has to enter a dot (.) (i.e. close the previous sentence).

To Reproduce: Go to nightly build from iOS Safari (mobile Safari) Enter a word 'Hello' Tap on Return to go to a new line Type something. Text will not be capitalized.

Currently we can disable magic line only for descendants of elements which have certain attributes through magicline_tabuList.

I suggest adding a predicate on element to configuration. This would give more flexibility. In my use case magicline should be disabled on the first and last children of an element with given attribute value.

Currently, if any finder's lookup returned >0 for specific element it's not possible to override this. There has to be another CKEDITOR.LINEUTILS_* flag (e.g. CKEDITOR.LINEUTILS_NONE) which when returned will block line around given element regardless of what has been returned from other lookups.

The href value replaces the text value of the anchor under certain circumstances in IE11.

Steps to reproduce:

1. Either click the 'Link' icon in CKEditor and enter a url or enter an anchor tag directly in the Source of CKEditor (ex: ​http://www.yahoo.com)
2. Click the Source button in CKEditor
3. Change the text of the <a> but not the href value to something with http (ex: ​http://www.google.com)
4. Click the Source button again, you should see the WYSIWYG editor. (it should say ​http://www.google.com)
5. Double click the link you created from step 1.
6. Click OK

The link text changes from what was set in step 3 to the original href value in step 1.

Expected Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.google.com</a>

Actual Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.yahoo.com</a>

I have noticed this issue on the version of CKEditor my platform uses - 4.3.3. However, I have also noticed this issue on the demo CKEditor (​http://ckeditor.com/demo), which I believe uses version 4.4.2

Browser: IE 11.0.9600.17126 OS: Windows 7

On the default Twitter App on Mac OS X, copy a link to a tweet (right-click > Copy Link To Tweet) and try to paste it into CKEditor - nothing appears.

Reproducible only on Safari.

1. Open Chrome and browse to a URL, copy the URL from the address bar to the clipboard
2. Switch to Safari and open CKEditor
3. Attempt to paste the URL into CKEditor

Results: It is not possible to paste URL from Chrome to Safari. It works however with Chrome/Chrome or Safari/Chrome or even Firefox/Safari but not Chrome/Safari.

To reproduce the defect:

1. Enable Code Snippet widget and click on Insert Code Snippet icon in toolbar to open Code Snippet widget.

2. Code Snippet dialog opens, focus goes to Language combo and JAWS reads Language combo, not set

3. Use the down arrow key

Issue: JAWS reads not set option again, This should be fixed, we should set not set as default option when Code Snippet dialog opens

It looks like the save plugin has been left in a state which is pretty much hard to explain and where this plugin isn't useful at all.

1. The Save button is only available when editor.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE, which means that it is not available for example in "Replace Textarea with Inline Editor" where editor mode is ELEMENT_MODE_INLINE.

2. "Replace Textarea with Inline Editor" is not the only case where the Save buton would be useful. After all thanks to the "save" event each CKEditor instance can benefit from this button to save data using AJAX.

3. The requirement of having a parent <form> element is invalid. Again, thanks to the save element a developer may want to have such button even inside an instance that is not wrapped inside a form. Actually, if there is a need for the Save button and a listener for "save" event used, it's even more probable that CKEditor is not a part of a form element.

What we should do is:

1. Keep the Save button always enabled.
2. If parent <form> element is detected, submit the form.
3. Always fire the save event when Save button is used: (i) to make it possible to save data through ajax and (ii) to prevent from submitting the form if the developer doesn't want it.

Warning: (1) is tricky as it will enable Save button for any existing instances. On the other side we can simply warn about this in changelog and blog just like we did with ACF.

Based on ​http://ckeditor.com/forums/CKEditor/Provide-Details-about-CKEditor-in-machine-readable-form

Relying on parsing minified JavaScript code of ckeditor.js with regular expression to get CKEditor version number has a risk of stopping working at any moment, due to code refactoring, improved minification method etc.

Although the version number of CKEditor doesn't say a lot about the CKEditor itself anyway (various custom builds exist etc.), it still can say something regarding e.g. available configuration options, that can be later displayed in the administration backend.

Separate file?

By adding a separate file with information about CKEditor build, we'd start confusing users with too many irrelevant files in the main folder.

build-config.js?

Including version number and revision in this file would be confusing again, as it may suggest that uoploading it to the online builder would result in building the same version again (e.g. 4.3.2 while 4.4.3 already exists).

ckeditor.js

My suggestion is to use the very first comment at the top of ckeditor.js (with copyrights), where such information could be added by both command line and online builder:

/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
Ver:4.4.2 Rev:1567b48
*/

Now there is no way to create paragraph inside of a list item. When a user hits either enter or shift-enter, the <li> is split.

I suggest using shift-enter for changing contents within the same list element. It would insert br, split paragraph or division depending on the enter mode.

1) use ​http://ckeditor.com/demo#full, clear all (I used Gecko - last version of PaleMoon)
2) change contents.css or use different way do add style: .cke_editable span:after {content: ' [' attr(class) ']'}
3) write "blah blah".
4) select line and change Style to marker (now you will see yellow line: blah blah [marker]).
5) go to the end of this line.
6) press left arrow and obtain twice this error:

Error: Permission denied to access property 'nodeType'
Source File: http://cdn.ckeditor.com/4.4.2/standard-all/ckeditor.js
Line: 364

FF's bug on Bugzilla: ​https://bugzilla.mozilla.org/show_bug.cgi?id=1035749

Some part of our dropdown markers (an arrow) is not grayed out when readonly mode is set.

It would be good idea to keep behaviour consistent.

1. open CKEditor Read-Only sample (i.e. samples/readonly.html)
2. click "Make it read-only" button

Expected result:
Arrows in buttons for plugin like Text Color, Background Color, Set Language, SCAYT are not grayed out.

Current result:
Arrows should be grayed out the same way as icons are.

additional info:

1. Note that arrows for Styles/Format combo are grayed as expected.

After resizable element being drag and droped in editor you're able to resize it.

1. Make sure you have config.disableObjectResizing = true; ( use config or editor init function ).
2. Open any sample with CKEditor (i.e. samples/replacebyclass.html).
3. Select dragable element (image, anchor, hr).
4. Drag and drop it anywhere.
5. Use resizer grid.

Expected result:
Element should not change its size.

Current result:
You're able to resize an element.

additional info:

1. Source of the issue is in ckeditor-dev/plugins/wysiwygarea/plugin.js. selectedElement is assigned only after selectionChange event, and it should be also executed after drop event on drop target.

TinyMCE has HTML5 sections and articles editing with wrapping elements. IMHO worth checking it out.

​http://www.tinymce.com/tryit/html5_formats.php

CMD+L always moves focus to Safari's URL bar, so it's impossible to create a link using keystroke.

Linking is often available under CMD+K. Maybe we can set both keystrokes?

Hi all, I found this tricky bug (I attached a video on this) regarding placeholder plugin, but I guess it is related to all plugin based on widgets.

1. open placeholder plugin sample page
2. create many placeholders on many rows
3. move a placeholder just before another one (repeat this step many times) => randomly moved placeholder (or maybe the destination one) disappear! it gets deleted (nothing can anymore found in html)

I attached a video on this (check firsts 2 minutes of the video)

Thanks a lot again Kind Regards Daniele

We have a situation when our webpages name (this is actually the <title> tag) are tested with special character sets. As a result (loading this page into CK) the title tag completely messed up and its content is moved under the body. The title we applied is this:

ÑÇôìë<?:"';.!@#$%^&*\)/

I could narrow down what character sequence causes the issue. So this is it:

<?

So, whenever we apply this <? as a title it will be encoded and saved as

<title>&lt;?</title>

. That is fine but during the load process this title is messed up and we get the following weird title tag:

><title data-cke-title="Rich Text Editor, Textarea1, Press ALT 0 for help

Here, there is no normal opening <title> tag and the closing </title> is missing.

Fortunately I can reproduce this kind of behavior in the DEMO. STR:

1. Go to DEMO page (I used IE11) and launch full featured page.
2. clear the content and switch to source view
3. paste the following string into it: (note, the <title> contains the encoded <? characters and browsers can display this title with no issue at all)

<html>
<head>
<title>&lt;?</title>
</head>
<body>
</body>
</html>

4. switch back to wysiwyg mode and the page is not empty (it should be). It contains the <? characters. This is because the <title> tag was broke up and its content moved to the body. So, something odd happens during the setData().

ATAG is of course the Authoring Tool Accessibility Guidelines (ATAG) 2.0.

​http://www.w3.org/WAI/AU/CR20/ATAGintro.html

How close any system can come to meeting ATAG will very much depend on the WYSIWYG that they use.

CKEditor has been good with WCAG, but would like to have a review for how it handles some of the elements of the W3C's ATAG.

I want to specify a background image on a table with a full URL. With the dialogadvtab plugin I have the possibility to set it in the style attribute directly. But the validation function of the field does not allow a ":" sign in the style property value.

Steps to reproduce:

• Go to full demo er nightly Bild ckeditor.
• Select the table in the demo content.
• Call table properties Dialog and click on "advanced" tab.
• In the style input field enter "background-image:url('http://c.cksource.com/a/1/img/sample.jpg')"
• Click on OK.
• Validation failure message appears.

i've configured ckeditor inside jquery ui dialogue box text area. My aim is to get the whatever data entered by the user. Including spaces as many as entred by the user. When user enters a space after some text it returning same as mean text+space in chrome. But in FF and IE(IE9,IE11) the space is getting omitted and it is returning only text but not the space which entered at end. If user enters more than one space then the spaces are returning along with text mean text+space(if space are more than one). This behaviour is in FF and IE9,IE11 but not in GChrome. In GChrome it's working as expectdly. Below link may help you ​http://jsfiddle.net/Ravi_SPS/pBL5G/2/

1. Use standard editor but add indentblock plugin to it.
2. Set below configuration:

   CKEDITOR.replace( 'editor1', {
     removePlugins : 'format',
     extraPlugins : 'indentblock',
     enterMode : CKEDITOR.ENTER_DIV
   } );
   

3. Go to test page and try to indent any div block. It is impossible.

Problem can be reproduced on all browsers from CKEditor 4.3

With #12164 we now have a complete set of "justify/align" language strings duplicated in two places:

• The ​justify plugin,
• The ​core language file, to use in the Table Cell Properties dialog window.

We should just use the common language strings in both contexts.

Another issue is that the language strings from the Justify plugin already ​have lots of translations, so when clearing the mess, we should make sure we do not lose them.

1. Use enter mode sample with allowedContent:true.
2. Paste below code into editor in Enter P or Div mode (in BR more some BR's are removed: #10497, #11392)

   <span>
   Some Text
   <br />
   <br />
   <br />
   </span>
   

3. Switch to WYSIWYG.

Results: BRs get extracted out side of span and changed into divs or paragraphs.

Problem can be reproduced from CKEditor 3.5.4 rev. [6740].

steps to reproduce:

1. in mac Chrome 35.0.1916.153 open ​http://ckeditor.com/demo
2. view source
3. delete all the source code
4. paste in the following source code:

   <p>line 1</p>
   <p>example 1<br />
   <a href="/node/1256">General Pathology</a></p>
   

5. exit source view
6. place the cursor at the end of the example 1 line
7. press Enter

actual: a new paragraph is created and the cursor moves unexpectedly to the beginning of the first line in the Body field.

expected: a new paragraph is created but the cursor stays in the expected position

problem DOES NOT happen in firefox 30.0 on mac os 10.9.3.

In CKEDITOR.dialog we have ​iframeAdded listener, and I see no such event fired in full package. I guess that it might been too hastily removed from the code.

I noticed that issue when I was checking #9611 issue.

Event is not docummented, but I think it should be fired by the iframedialog plugin, so keyboard handler can be attached to the frame.

To reproduce the defect:

1. Open Sample widgets page ​http://ckeditor.com/demo#widgets

2. Try to select any of widgets( Simple Box, Code Snippet, Enhanced Image, Mathematical Formulas) using keyboard

Issue: It's not possible, It's possible to select them using only with mouse not with keyboard, as a result we can not open widget properties dialog using keyboard. This is a failure of Accessibility Checkpoint 2.1a Keyboard.

Check comment:4 for more details.

To reproduce the defect:

1. Open Sample widgets page ​http://ckeditor.com/demo#widgets

2. Press tab after Widget Tutorial link(above Simple Box Template)

Expected Result: Focus goes in to editor body & cursor at start of first paragraph & user use up/down arrow keys to navigate through whole content in editor body including widget.

Issue 1: Focus goes to heading in Simple Box widget & JAWS reads Bullet even though there was no list

Issue 2: when user press down arrow key, focus stays in heading and when he press Tab focus goes to second div

Issue 3: when user press down arrow key, focus stays in second div and when he press Tab focus goes out of editor body

Issue 4: There is no way that user navigate through text in editor body.

We ran into this with Drupal 8 - ​https://www.drupal.org/node/843708

There are a great list of examples - ​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attr-summary

But using:

<table summary="descriptive text">

No longer fits with the HTML5 specs.

Using details/summary works fine: ​http://www.developerfusion.com/article/136530/making-tables-more-accessible-with-html5/ ​http://www.pdprogrammeur.com/tables-and-html5-table/

The UI shouldn't need to change, just the placement of the summary text.

Reported through support channel. Original request is pasted below. Note that the default value should be probably highlighted using a different style than a value that was manually selected by a user.

This is because:

• it should be impossible to unselect the default font, which means that we should differentiate it visually
• the default font should be unselected "automatically" only when user selects different value
• the current behavior of richcombo should rather change as well - clicking on a default value should not result in the default value being applied to the content once again as it is done right now:

CKEditor with font_defaultLabel : 'Arial', after selecting Arial in Font Name combo:

<p>This is <span style="font-family:arial,helvetica,sans-serif">some sample
</span> text.</p>

The "default" style should be applied to the content only, if the style of the content has been already modified by the user, e.g. set the style back to Arial in the middle of the sentence in "Comic Sans":

<p><span style="font-family:comic sans ms,cursive">This is <span style=
"font-family:arial,helvetica,sans-serif">some sample</span> text.</span></p>

(now repeating Arial make sense)

We found a small issue with font_defaultLabel and fontSize_defaultLabel. When these are set, the CKEditor does properly show them selected. But if you open the associated dropdown, they are not highlighted to indicate they are selected.

Screen capture 1: font and font size are properly displayed when using font_defaultLabel and fontSize_defaultLabel

Screen capture 2: font is not highlighted. Same thing for font size.

Screen capture 3: this is what we would expect when setting the font_defaultLabel setting

Markup

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1)</li>
        </ul>
    </li>
    <li>3</li>
</ul>

Selecting bullets '2.1' and '3' (in wysiwyg mode) followed by hitting 'backspace' or 'delete' will remove the entire list. It seems as if such a selection causes the editor to select the outer 'ul' as well. The same selection can be deleted safely by adding another list element at the end of the list.

Reproducible: always (Firefox, Chrome and IE)

If the 'Browse server' button in the image or link dialog is clicked, resulting in the popup window opening, and that popup is then closed, the original dialog no longer has keyboard focus. Accordingly, the escape key does not work.

Reproduce case, using 4.4.3 (revision fd4f17c):

1) Go to ​http://ckeditor.com/demo 2) Click 'Image' button. The image dialog opens. 3) Click 'Browse Server' button. The browse server popup opens. 4) Either choose an image or cancel. The browser server popup closes. 5) There is no keyboard focus any more, and the escape key on the keyboard does not work.

Comparison case:

1) Go to ​http://ckeditor.com/demo 2) Click 'Image' button. The image dialog opens. 3) Press escape, and the image dialog closes.

1. Open ​http://ckeditor.dev/samples/replacebycode.html
2. Click "Checkbox".
3. CTRL+S to see that focus is moved and "Selected" checkbox is checked.
4. Click OK to close the dialog.
5. Re-open the same dialog.
6. Press CTRL+S.

Expected:

"Selected" checkbox is toggled.

Actual:

AccessKey feature is broken is completely broken in that dialog. Other accessKeystrokes does not work either.

Since there are many questions about block MathJax some, helpers to create generic block-inline widgets would be useful.

It might be a pair of methods to transform inline widget into block and back. Of course every widget have to make some addition transformation but the common part could be handled by the widget system.

1. Use source (remember about ACF):

<dl><dt>Foo</dt><dd>bar</dd></dl>

2. Make selection in "Foo".
3. Apply bulleted list.

Expected:

<ul><li>Foo</li></ul><dl><dd>bar</dd></dl>

Actual:

<dl><ul><li>Foo</li></ul><dd>bar</dd></dl>

Use this source:

<table border="1" style="border-collapse:collapse; width:469px">
	<tbody>
		<tr>
			<td style="width: 142px;">&nbsp;</td>
			<td style="width: 320px;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 142px;">&nbsp;</td>
			<td style="width: 320px;">&nbsp;</td>
		</tr>
	</tbody>
</table>

I can't change last column's with by dragging the 3rd border from the left. Confirmed on IE8 at least

Hello,

For various reasons I need to use the CKEditor inside an iFrame that is populated with content via JavaScript. This seems to cause a bug in the isInline() function within Core.Editable, where the document of the editor is compared with the CKEDITOR.document to conclude if the editor is inline or not. Because the editor is located inside the iFrame, and the iFrame document does not match the CKEDITOR.document, the result is always false. This causes an issue with the magicline plugin that relies on this to calculate the position of the line. Its very likely that other plugins are also affected that use the isInline() function.

I made a JSFiddle to demonstrate the issue: ​http://jsfiddle.net/wschwarz/ktw9utcm/

The solution I applied is also included there as a comment, which checks if the 'cke_editable_inline' class is applied onthe editor to decide if it is inline or not. Un-comment it to see how the isInline() function returns the correct value and the magicline is positioned correctly. This might not be the ideal solution but it worked for me. If a better fix is available please let me know.

Problem is similar to #9611.

It isn't possible to jump (with tabIndex) through elements that are inside iframedialog plugin.
Problem can be reproduced in all browsers.

NOTES:
Firefox, Webkit and Blink - When you click on page inside iframe you can jump through elements but when you reach Cancel button there is no coming back.
IE - Result is the same (buttons grab focus) but there is one note to make.
Focus works a little different here even on native HTML page. Most of the time, you need to click inside input area so that you can tab through elements. When you click on page then (most of the time and it depends where you click) you will focus select element or nothing.