I've managed to reproduce this bug with the latest nightly build, as follows:

1. Download the nightly build.
2. Download and include the following plugin:
   • ​http://ckeditor.com/addon/image2
3. Download an include the additional required plugins:
   • ​http://ckeditor.com/addon/widget
   • ​http://ckeditor.com/addon/lineutils
4. Add the following to config.js:

config.extraPlugins = 'lineutils'; config.extraPlugins = 'widget'; config.extraPlugins = 'image2'; config.image2_alignClasses = [ 'text-editor-image-left', 'text-editor-image-center', 'text-editor-image-right' ];

5. Add the following to content.css:

.text-editor-image-left {

float: left; margin-right: 10px;

} .text-editor-image-right {

float: right;

margin-left: 10px;

}

5. Open one of the samples: Desktop/ckeditor/samples/replacebyclass.html
6. Double click an image to open the dialog and select Alignment: Right
   • The image floats to the right.
7. Toggle Source mode on/off
   • The image remains floated to the right.
8. Select the image and click the Link icon, and add a URL.
   • The image remains floated right.
9. Toggle the Source mode on/off.
   • The image loses its float right.
   • If you view source mode you'll see that the image is still assigned the correct class, it's just not being detected.
   • If you double click the image to open the dialog the Alignment: Right option is NOT selected.

Browser: Chrome Version: 4.5.0 beta

Open: ​http://tests.ckeditor.dev:10450/tests/plugins/uploadwidget/manual/image

1. D&D some image onto editor.
2. While image is uploading, press Ctrl + Z, to undo upload

There should be information that image upload has been aborted.

3. D&D image once again to upload.

Result: There is no notification present while uploading.

​http://plnkr.co/edit/3cupW1Y2T7zWWTXxtyyF?p=preview

It returns Uncaught TypeError: Cannot read property 'children' of null

Happens when smiley is at the very front of quote.

[quote]:D hello[\quote]

1. Open editor page perhaps ​http://sdk.ckeditor.com/samples/accessibility.html.
2. Focus on editable.
3. Press Alt + F10 to navigate to toolbar.
4. Press Alt + F11 to navigate to elements path.

Result: You can't navigate to elements path.

Expected Result: You can navigate to elements path.

It should be possible to navigate to elements path right froom toolbar and vice versa.

1. See ​http://tests.ckeditor.dev:1030/tests/plugins/embed/manual/embed
2. Try to copy&paste any of the widgets.
3. Empty widget is pasted.

Some details:

• This happens only with some kinds of widgets. It cannot be reproduced with image2, but can be with code snippets.
• This isn't a regression. We didn't notice this (and no one reported this - I guess no one uses widgets with IE8) because code snippets aren't supported on IE8.

Browser: IE11

1. Open: ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/draganddrop.
2. D&D some widget (image) internally.
3. D&D some external text from textarea located above into editor.

Result: There is an error in ​here.

Instead of trying to override buttons' onclick properties it will be much better to cover the entire toolbar with another div.

1. ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Drop an image into editor.
3. While uploading it has a size of about 10x10.
4. Once uploaded it has its correct size.

Hi, I have big problem to maximize CK 4.4.7. For some security I have defined html{display:none;}. My JS then enable html with code: if(window.top === window.self) { document.documentElement.style.display = 'block';} Everything works perfect to situation when I click CK to maximize. All browsers hardcode change style and I see only blank window. I tried in my config this: CKEDITOR.instances.content.on('maximize', function() { document.documentElement.style.display = 'block'; });

It works only in Chrome not in FF and IE. I dont want to change my security improvements, but CK maximize must work.

Next issue it on maximize CK is problem comboboxes. See picture.

1. The configuration looks like a code snippet to copy. Perhaps some border could better indicate it's ready for editing. Maybe similar to what we use for showing currently modified toolbar items in the editor?

2. It is not focused, there is no blinking cursor.

I think we could style differently Advanced Toolbar Configurator on wider screens. Imho it looks a bit weird now on such screens.

When the classes are not sorted alphabetically (in the string), it will not be made available because it is deemed not "applicable", because it does not pass the test in objectCompare(element.attributes,clone.attributes).

Example: a style in stylesset with the following definition: {name:'Multi Class', element:'p', attributes:{class:'c b a'}}

Will not be selectable from the combo because when a clone is created from the element and then compared, the compared class-string is ordered alphabetically 'a b c';

1652 core/filter.js/processElement/updateElement loops through all possible classnames and then sorts them on line 1658 classesArr.sort().join( ' ' );

140 stylescombo/plugin.js style.checkApplicable() 366 core/style.js checkApplicable/filter.check() 744 core/filter.js CKEDITOR.toosl.objectCompare()

thus the object comparison fails...

Please refer to: 12284.

1. Paste below code into editor and switch to source:

   <p>text&nbsp;<strong>bold</strong></p>
   <ol>
   	<li>item</li>
   </ol>
   

2. Put cursor at the end of bold (make sure you are inside bold by looking at element's path)
3. Press delete

Result: List item gets bold.

If there is paragraph instead of list below the bold paragraph, it won't get bolded/styled on delete.

<p>text&nbsp;<strong>bold</strong></p>
<p>text</p>

Problem can be reproduced from CKEditor 3.6.5 rev. [7620]

The main bugs are:

1.When a layout with more than 1 column is inserted, a widget out of the layout can only be dragged and dropped into the first column.

2.When there are is 3-column layout. Because of the bug pointed in '2' the widget can only be dragged into the first column.Then the widget can easily be dragged into the middle column but cannot be dragged to the third, even if it was in the middle beforehand.

Here is image of the bug.

1. Open replacebycode sample and press New Page command
2. Type some text
3. Click Ctrl+A and Ctrl+B (text is bold and element's path shows bpdy p strong)
4. Press Backspace or Delete buttons
5. Element's path shows body p and bold button is deactivated.
6. Start typing.

Result: Typed text is bold (First problem), bold button is active and element's path is showing "body p b" (<- notice the conversion, this is second problem).

Problems can be reproduced from CKEditor 3.0 in Blink and Webkit browsers.

1. Open replacebycode sample and press New Page command
2. Type some text
3. Click Ctrl+A and Ctrl+B (Don't press ctrl+B before typing -> it works then)
4. Press Backspace any number of times you want. Text is removed but element's path is still showing "body p strong"

4. Instead of Backspace press Delete. The first key press removes only text. Second key press removes the formatting.

Problem can be reproduced from CKEditor 3.0 in IE8-11.

To Reproduce:

1. Open any sample
2. Type in the console:

CKEDITOR.instances[EDITOR].on('change', function(){console.log('change...')});

3. Type anything in the editor ( event is triggered on every key press )
4. CTRL + A to select all the text or highlight it with the mouse
5. Ctrl + Right click to get browser context menu
6. Select Delete menu option

Problem: The event is not triggered

Test the issue from ​http://ckeditor.com/demo#full

1. Set config.enterMode = CKEDITOR.ENTER_BR;
2. See the differece in behavior between 2.1 and 2.2:

2.1. Type two lines content(<br> will exist), select them, click Formatted. <br> will be replaced /n in side a <pre>
2.2. Click Formatted, type two lines. <br> won't be replaced with /n in side a <pre>

How do solve the inconsistent behavior? Can we keep <br> after clicking Formatted?

Thanks in advance.

We want to use CKEditor to provide a full html document editor, and we want to use the <style> element in the <head> section.

We found that when using IE 8, the attribute type="text/css" in the <style> element is changed to type="text" when switching from source to visual editor then switch back to source view.

I am using the nightly build in the following steps, but I have used the master and the major branch on github and they all have the same problem.

Here are the step I used to reproduce this bug :

• Use IE
• Open the ​full page editing sample (from plugins\wysiwygarea\samples\fullpage.html)
• Open the Dev Console (F12), switch to IE 8 rendering mode (instead of edge)
• Switch the editor to Source mode
• Add <style type="text/css">body { color:red }</style> into the head element
• Switch to visual mode, the text is red
• Switch to Source view, the attribute type has changed to text instead of text/css
• Switch to visual mode, the text is not red anymore

I have tried to fix the bug by myself, but after 2 hours digging into the parser in the javascript console I surrender. Everything seems fine (the source is well parsed), but at some point when the DOM is inserted the content is modified.

If you have hints about how I should help to fix the problem by myself feel free to point me, or if you have any workaround.

I have tried to use bender but was stuck by a strange error in testbuilder.js on master branch. Anyway it was not related to the debugging of the code.

Please see the attachments, it would be cool to make these links a bit more functional.

For example I can edit parent container properties using right click context menu, but if there are multiple containers it is quite hard to do. Would be cool if I can do right click on items in status bar and see the same "Edit container" option.

An additional feature could be to highlight elements in the editor while hovering corresponding elements in the status bar e.g. like google chrome dev. tools do (see the second screenshot).

Best, Alexander

Hey CkEditor team

We found the align button in Ckeditor tool bar does not work correctly with enterMode as CKEDITOR.ENTER_BR

By default, the enterMode is <p>.

Under this mode, the content of editor always have <p></br><p> inside, which can not be removed by backspace(Look up through HTML inspector).

Just because of this, the left-align button is hovered when we click on the editor input area with nothing typed in.

However, under enterMode as CKEDITOR.ENTER_BR, the content is empty inside <body>

Just leak of <p></br><p>, the left-align button is NOT hovered to indicate its current states.

I wonder if the align-button(at least left-align button) is designed to work under mode of CKEDITOR.ENTER_BR.

If yes, should this issue be considered as a bug.

Many thanks John.

It is hard to find matching elements in htmlParser.element. Real DOM has couple of methods like find, findOne, byId, byClass, etc., but HMTL parser has nothing except forEach() which allows you to iterate over the entire sub tree and find whatever you need.

Implementing find/findOne which would work in the same way as in real DOM is reasonable, because the CSS selectors implementation would be huge. Therefore, I propose a simpler method accepting a callback or element name. It can be implemented in few lines of code using forEach().

Based on #12854.

I have a bunch of images displayed as block elements through CSS. When I try to apply a block style to a paragraph containing such images, a new paragraph is created instead of getting the style applied. CKEditor works as expected when removing the display:block style from these images.

Hi, i found a bug in the input select Dialog.

Steps:

1. Click on input select
2. Dialog: add some options
3. Set one added option as default
4. The default Value is now visible in "Value" field (under the "Name" field)
5. Delete the previously setted default option.

=> 6. The value of the option which was deleted is still visible in the upper "Value" field.

Expected Behaviour: => value in field "Value" should be removed on deleting the default option.

Note: However if you open the dialog again (contextMenu edit selection). The value in "Value" field is removed.

So the broken behaviour is only on creating a new selection.

Currently doing:

var range = new CKEDITOR.dom.range( root );
var range2 = range.clone();

will log that containers outside of the root are set. It does not make sense.

Used both on-site installation and demo here Steps to review the bug:

1. create new table using ckeditor (usual base 3 rows 2 columns)
2. add any content to the cells.
3. try to D&D the content -doesn't matter if it's any of text or image - from cell to cell

You'll see that these actions make the table cells disappeared.

Versions checked: from 4.4.7 placed as demo and lower

Checked under Windows 7/Chrome.

Correct behavior:

1. Go to ​http://sdk.ckeditor.com/samples/inline.html
2. Click the top right editable div
3. Select "Lorem ipsum"
4. Use Ctrl+C to copy the selection to the clipboard
5. Use Ctrl+V to paste "Lorem ipsum" 30 times

-> The editable div grows in height to adjust to the additional content.

Unexpected behavior:

Perform the exact same steps, but in step 3, select "Lorem " (Lorem + space) instead of "Lorem ipsum".
-> At step 5, after about 20 paste operations, the editable div starts growing in width instead of height.

When working in the ckeditor, you used to be able insert a check box in one area and then click on top of the check box (you did not have to highlight it) and copy and paste it. You can no longer do that.

If you click on top of the check box and copy it with the context menu, it just pates a space (no check box).

If you very tediously highlight the check box and copy it, it includes a space before the check box and a space after the check box.

Hello, thanks for the most accessible editor anywhere! I can't use a CMS without it. BUT... a BUG: My eyesight requires the 'High Contrast Mode'. (info at: ​http://ckeditor.com/blog/CKEditor-WAI-ARIA-Usable-Accessibility

But two buttons don't work in this mode. In fact they don't show up at all, they dissapear:

'TextColor', 'BGColor' (background color button). Versions I tested with bug: 3.x to 4.4.7

1. Insert below code into editor (div or table)

   <div style="float:right;">TEST</div>
   
   <div align="right">TEST</div>
   
   <table align="right">
   <tr><td>TEST</td></tr>
   </table>
   
   <table style="float:right;">
   <tr><td>TEST</td></tr>
   </table>
   

2. Hover below/over the element

Result: No magic line is displayed and there is no possibility exit the element.

1.Insert below code into editor

<div style="float: right;">TEST</div>

2. Put cursor at the end or simply into element and press enter key few times.

Result: New lines are not created (visually) and cursor stays in first line. You can't exit it with enter key or arrows.

Switch to source mode. The result is:

<div style="float: right;">TEST</div>
<div style="float: right;">&nbsp;</div>
<div style="float: right;">&nbsp;</div>

Problem can be reproduced in all browsers from CKEditor 3.0.

I haven't mentioned <div align="right">TEST</div> because it works with HTML4 doctype but not with HTML5 doctype where this attribute is not supported. On the other hand in native contenteditable elements enter key works as expected so perhaps it is worth looking into this particular issue as well.

How to reproduce:

Working demo to verify: ​http://jsfiddle.net/aZqL9/7/

1 - Add two DIVs

<div contenteditable="true" id="editable"><img src="http://i.imgur.com/M3LOzdI.jpg"/></div>

<div contenteditable="true" id="editable2"><img src="http://i.imgur.com/aD7V3hQ.jpg" width="320"/></div>

2 - Add a button to set the editors as readonly

<input type="button" onclick="editor.setReadOnly(true); editor2.setReadOnly(true);" value="Make readonly">

3 - Execute the loading of the editors in a <script>

CKEDITOR.disableAutoInline = true;

var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
var editor2 = CKEDITOR.inline( document.getElementById( 'editable2' ) );

5 - When it loads, click the button to set the editors to read only

6 - Do a right click on the first editor

7 - Do a right click on the 2nd editor. Javascript error is shown

Working demo to verify: ​http://jsfiddle.net/aZqL9/7/

Reproducible in: IE11

1. Use below code in HTML page

   var editor = CKEDITOR.replace( 'editor1', {});
   editor.on('instanceReady', function( evt ){
   	editor.setData('test');
   });
   

2. Access denied error gets thrown in IE8-IE11

Message: Access Denied.
URI: /ckeditor-dev/core/dom/node.js
Line: 663

1. Open: ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image2
2. Add some image into editor.
3. Enable image caption.
4. Drop another one into image caption.

Effect: Image uploading notification is visible, but nothing changes in the editor content.

Perhaps some day in the future it would make sense to make some kind of source code validator plugin to check the correctness of the HTML code modified by user.

There are cases like #13306 where it's even hard to notice that the source code was broken as a result of manual changes in the code. Some tool that could validate the HTML content before the mode is switched back to wysiwyg could help in dealing with mistakes and prevent from creating broken content.

Of course this is a complex task, especially if we consider notifying user in some user-friendly way where the content is possible broken. In case of unclosed tags it's even harder.

When I dragged a list from MS Word 2013 to CKEditor 4.5 I get something what looks like a list but is not a real list:

<p>&bull;&nbsp;&nbsp; &nbsp;Sdf<br />
&bull;&nbsp;&nbsp; &nbsp;Sdfsdf<br />
&bull;&nbsp;&nbsp; &nbsp;sdf<br />
&nbsp;</p>

The content in the paste event is:

"•&nbsp;&nbsp; &nbsp;Sdf<br>•&nbsp;&nbsp; &nbsp;Sdfsdf<br>•&nbsp;&nbsp; &nbsp;sdf<br>

We could fix this and change into a list.

It was working before custom drag and drop was implemented, so before 4.5. I was able to reproduce this issue in Firefox and IE 11. In Chrome dropping list works fine.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/paste
2. Select all content (which includes image2) in editor.
3. Cut content.
4. Paste removed content again.

Two images are uploaded.

The Selection field properties form has (Value) text field. When putting the cursor on this field for editing, it becomes not responsive. This happens in both bidi and English forms.

Steps: 1- Click on the Selection button. 2- Put the cursor on value text field. 3- Try to add text to this field.

The editor resizing tip is aligned to bottom right while it should be aligned to the bottom left.

See attached snapshot for illustration.

If you have CkEditor zoom plugin and you set zoom level above 100% scroll doesn't work as it should. I have zoom at body set to 1.1 and I go to the bottom of the document. Then I press enter a few times and cursor goes below visible area. Scroller is visible, but it doesn't scroll to the bottom. But then if I press one character, editor scrolls to the bottom.

To reproduce download attachment, run on web server and follow instructions on the page.

Tested on Win8/Chrome.

(tested on IE11 and FF)

Impact on all languages: text is not translated in the message box (i.e. text on the button) unless web browser itself is translated to that language.

Impact on bidi languages: message boxes are not mirrored / flipped unless web browser itself is translated to Arabic / Hebrew.

This behavior has a pretty serious impact on user experience, since there are around 18 contexts in which alert message is called.

We suggest to contribute a solution by developing a general modal message box in pure JS which will address all the needs currently addressed by alert dialog.

Do you agree that this issue should be fixed? If so, do you accept the suggested approach to the solution?

Thank you

1. Open ​http://cksource.com/ckeditor/services#accessibility-checker.
2. Scroll down to table in the editor.
3. Open table properties dialog.
4. Set Headers option to both

Actual result: There is an error in the console.

That's because editor table HTML is wrong - there are empty tr`s in the table. Removing them will fix the issue.

Browser: IE8

1. Open ​http://tests.ckeditor.dev:1030/tests/tickets/13011/1
2. D&D image somewhere (from the last line).
3. D&D anchor somewhere (from the first line).

Result: Dropped element is image but not anchor.

Issue: With enter mode as <br>, decreasing indent will cause different lines form back into 1 single line.

Steps to reproduce:

1. Use enterkey.html in sample of entryKey plugin.
2. Change "When Enter is pressed:" to "Break the line with a <BR>".
3. Type 123 and then press Enter key, do the same for 456, 789.
4. Now we have 123,456,789 in THREE lines.
5. Select them all to insert bulleted list.
6. Select the last line 789 and click on decrease indent.
7. Now 789 is removed from the list. And now do the same to 456.

Expected Result: 456,789 are in two lines.

Actual Result: 456,789, are in the same line.

We have figure out the root cause and one possible solution.

See ​https://github.com/liferay/liferay-ckeditor/pull/4

1. Test the issue in ​http://ckeditor.com/demo#full
2. Click Paste plugin, and it display the dialog box.
3. Resize the dialog box.

Actual result: the text area didn't adjust to the changed dialog box. Expected result: the text area should adjust to the dialog box.

I have prepared the fix from ​https://github.com/yuhai/liferay-ckeditor/commit/bac522635b92b29959fd0b2288e2887e359a982a. Could you please help check it? Please help solve the issue.

Thanks.

Steps to reproduce

1. Open ckeditor.com/demo#bbcode with Chrome
2. Paste enough text to make the vertical scrollbar appear
3. Click on the bottom right corner to resize ckeditor
4. While resizing (do not release the click), move the pointer to the vertical scrollbar
5. Release the click with the pointer on the scroll bar
6. Move the pointer around the screen

Expected behaviour:
ckeditor stops resizing when releasing the click

Acutal behaviour:
ckeditor keeps resizing along with the mouse movements

1. Visit ​http://tests.ckeditor.dev:1030/tests/plugins/autoembed/manual/autoembed
2. Copy embeddable URL, i.e. https://twitter.com/reinmarpl/status/573118615274315776.
3. Focus editable.
4. Hold CTRL+V for a while.
5. A number of links is pasted and corresponding embed requests turn them into widgets.
6. CTRL+Z.

Expected: The last embeddable object invoked is reverted back to link.

Actual: All widgets are reverted back to the chain of links. Sometimes only some group of widgets is reverted. The point is the invocation of multiple widgets is registered within a single undo step.

While the new feature is quite innovative and I really do like it, I found some UX issues worth discussing:

Double undo mechanism

At the moment, if the user pastes a link and it gets converted into an embeddable widget, they got to undo twice to get back to the initial state of the editor. The first undo step removes the widget, then the second one – the link.

However, if the user decides to change something in the contents after the first undo step, there's no way to convert the link into a widget again, unless you remove it completely and paste again. Thus the user is stuck with a link which supposed to be an embeddable content but there's no way to achieve that because the flow of the actions (state shifting) is broken.

Possible solutions:

• One–step undo: If the link is just an intermediate form of an embeddable content, a way to communicate the editor that something is supposed to be embedded (it is, isn't it?), there should be just a single undo step. CTRL+Z and both widget and the link are gone.
  • Pros: It's so simple.
  • Cons: There's no way for the user to decide if the link is supposed to be embedded or simply pasted in the content. It gets converted into embeddable widget whether they like it or not. TBH, I think this is rather the right way – if the administrator enabled the autoembed plugin, they expect such content to be embedded. It's a deliberate action. There's no need to leave an option to keep the link instead of embeddable to the users because they're not supposed to pollute the content with an intermediate data. And if they are desperate to do this anyway, there's still a possibility of using the "Source" or "Link" buttons.
• Context menu on links and embeddable widgets: Right–clicking the link which is prone to becoming an embeddable could display a context menu item like "Embed". It would do the same magic the autoembed plugin does when the link is pasted. At the same time, widgets containing embeddable content, would expose "Convert to link|Linkify|Collapse|Whatever..." context menu item, which would be an equivalent to the first undo step.
  • Prons: The flow of the actions (states) is no longer broken – users can go back and forth between the states of embeddable content (link<->widget), which means that double–undo system remains.
  • Cons: Hardly any. It could give too much freedom to the content creators, which I find rather unnecessary (explained above).

Batch autoembed

If one pastes

https://twitter.com/reinmarpl/status/573118615274315776

then it's converted into a Twitter embeddable. However pasting

https://twitter.com/reinmarpl/status/573118615274315776 https://twitter.com/reinmarpl/status/573118615274315776

is followed by no magic action. No autolink, no autoembed.

• What if the user wants to embed the entire list of tweets?
• Entire gallery of images?
• Dozens, hundreds of links to embed?
• A paragraph with a link like

  Hey, check this out: https://twitter.com/reinmarpl/status/573118615274315776
  

  ?
• Or they accidentally copied some white space like

  <WS>https://twitter.com/reinmarpl/status/573118615274315776
  

  ?

Since we support parallel embedding (there's a progress bar indicating the status of things) and we support embedding of multiple items in a row (just hold CTRL+V), which is not perfect (#13413) but it works, why not multiple items at the same time?

Possible solutions:

• Tune the RegEx mechanism to embed multiple items at the same time.
  • Pros: Simple as that.
  • Cons: Additional complexity of the code (?).
• Include a drop–down menu under the "Insert Media Embed" button (just like SCAYT), with a "Detect embeddables in selection|Whatever..." button. Such a magic button would let users select some content (i.e. 250 links pasted from the clipboard) and make them all embeddable with a single click.
  • Pros: It's a powerful tool.
  • Cons: Hardly any. It seems quite simple to implement.

TBH, I'd like to see both solutions implemented alongside, complementing each other.

Accessibility

I played a little bit with JAWS and my impression is that it could be confusing for some people that when a link is pasted it is immediately converted into something else. I wonder what is the right solution for such magic and whether there are mechanisms to notify the user about the transformation. In real life, the transformation (embed request) could take a lot of time and once the user received an audible confirmation from the synthesizer that the contents have been pasted from the clipboard (once pressed CTRL+V), they could move across the document, unaware of the transformation of the link which is yet to happen or which has just happened. WDYT?

EDIT: There's no context menu entry for embed widgets. There should be one to edit the widget.

This one came to me while analysing #13415.

1. Open any sample with CKEditor.
2. Use "Paste as plain text" button from toolbar.
3. Insert following text https://twitter.com/codinghorror/status/610320718635466752.
4. Accept the dialog.

Expected result: Should insert plain text.

Current result: Link is upcasted to the embed widget.

It might be related to #13415, since some of proposition there might prevent user from pasting a plain link text into his document. Then paste as plain text would be his last hope to do it.

1. Create a line of formatted text (use bold, italic, etc.)
2. Remove Format.
3. Type something.
4. Click list button.
5. Enter.

Expected: New list item without text formatting.

Actual: Text formatting does not give up.

Confirmed in Chrome and Safari. See the video.

And Chrome for comparison:

Steps to reproduce:

1. Write some text.
2. Paste https://www.google.dk/maps/place/Zygmunta+S%C5%82omi%C5%84skiego+15,+Warszawa
3. While autoembedded content is loading, type more text.
4. Autoembedded content is inserted.
5. Undo.

Expected result: Only link convertion should be undone, so the editor should contain some text, the link and the text typed in step 3.

Result: Not only link covertion was undone but also all the text typed in step 3 is deleted.

Note: This can't be tested in Firefox because after pasting the link the caret is "inside" <a> element, so everything what we type is removed when the link is converted to embedded content.

Browser: Opera, maybe others. Clasic editor only.

D&D from outside source into nested editable is possible only if you the nested editable is empty or you had focus in it before selecting something from outside source.

Steps to reproduce:

1. Create image with caption (image2) and add a caption.
2. Move focus outside of nested editable (caption field).
3. Select some content from outside of editor.
4. Try to D&D it into caption.

Expected result: Selected text has been copied into caption.

Result: Test has been copied at the beginning of the editor.

You can test it here: ​http://tests.ckeditor.dev:10450/tests/plugins/clipboard/manual/draganddrop

Browser: FF Tested on 4.5.0 dev version and built one.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Clear all content
3. D&D some image into editor, to initiate uploading.
4. During uploading D&D widget right after itself.

There is an error:

TypeError: node is null this.setStart( node.getParent(), node.getIndex() );

At core/dom/range.js:1917

Browser: Opera, maybe others.

Steps to reproduce:

1. Create widget image with caption using image2 plugin.
2. Create an inline image outside widget image.
3. Try to D&D the inline image into the widget image.

Expected result: Inline image is no longer at previous position but is now in the caption.

Result: Error thrown
Cannot read property 'getAscendant' of null

Note: It works fine if you select some text beside inline image and try to D&D the text with the image. Note: I am able to cut the inline image and paste it into caption, so it is D&D bug.

Steps to reproduce:

1. Setup your editor:

   <div id="classic">
   	<p>foo bar</p>
   	<figure class="image right"><img alt="CKEditor logo" src="/tests/_assets/logo.png" />
   		<figcaption>CKEditor</figcaption>
   	</figure>
   </div>
   <script>
   	CKEDITOR.replace( 'classic', {
   		height: 400
   	} );
   </script>
   

Height added for easier reproduction.

2. Make selection with mouse from [bar to CK] (in caption).
3. D&D the selection somewhere (i.e. before foo bar). Note that you have to start dragging on selected text, not the widget.

Result: Widget got broken in half.

I think we should discuss expected result for this kind of selection. I can imagine some users trying to select some text and widget image *whole* but will fail to do so, because they will just select it to the end of caption. In this case you end up with the properly copied version of widget but you also have empty, gray rectangle in the place of the original widget.

Follow up on ​https://dev.ckeditor.com/ticket/9771

The fix in ​https://dev.ckeditor.com/ticket/9771 does not work for editors embedded in a absolute positioned element with overflow scroll..

I've made a demo here: ​https://jsfiddle.net/899r5exm/

Yeah I know, it's probably not wise to position elements like this but the CMS I'm using is using this.

Any idea how we could fix this?

Issue: When user inputs large text in ckeditor, the scrollbar shows. Resizing ckeditor to the bottom edge of the browser results in artifacts and resize is cancelled.

Reproduced Steps:

1. Open ckeditor.com/demo#bbcode or ​http://ckeditor.com/demo#full with Chrome
2. If Chrome is maximized, return it back to normal
3. Paste enough text to make the vertical scrollbar appear
4. Click on the bottom right corner to resize ckeditor
5. Resize the ckeditor, move the mouse to the browser's bottom frame release the click there
6. ckeditor size will go back to what it was

Please see the attachment resizing_issue.gif and resizing_issue.swf. In resizing_issue.swf, the issue starts at the fourth second.

The issue might be related with ​https://dev.ckeditor.com/ticket/13407.

Thanks, Hai

(Note: lineutils-based DnD is the mechanism used while dragging block widgets)

Use cases:

1. When user starts dragging an inline image (or image2) I would like to be able to enable line-utils-based DnD. I imagine that I can listen on editor#dragstart, check what's dragged, and use some editor method, to do what I want. Of course this rises questions like - what with empty blocks left after dragging an image from them - this would be handled by the developer which implements such feature or by CKEditor. We could e.g. make it possible to alter dragRange (it may even be possible now) so a developer would be able to select whole paragraph.

2. Dragging some stuff from outside of the editor. E.g. there could be a list of products and dragging it into editor should be done with line utils.

3. Dragging table rows with line utils?

4. Must it be drag and drop? Maybe we can expose this feature for more user actions. You click a widget, choose "move" and while your moving your cursor above the editor, then line utils appear with an icon like magicline. Clicking this icon moves the element there.
   • With some more UX-related improvements we could enable magicline and lineutils-based DnD on touch devices.

.catch() in ES6 Promises causes an CKBuilder error:

Jun 25, 2015 8:39:12 PM com.google.javascript.jscomp.LoggerErrorManager println
SEVERE: plugin.js:87: ERROR - Parse error. missing name after . operator
                                }).catch(function() {
                                         ^

• Set the language of the browser to Arabic
• open CKEditor

Expected Result: The CKEditor is mirrored and help icon is mirrored

Actual Result: The CKEditor is mirrored but the help icon is not mirrored

As mentioned in ​http://docs.ckeditor.com/#!/guide/dev_file_upload

You can also add custom request headers or set flags for the default request. This is especially useful for enabling Cross-Origin requests. For more information about Cross-Origin Resource Sharing see here:

editor.on( 'fileUploadRequest', function( evt ) {

var xhr = evt.data.fileLoader.xhr;

xhr.setRequestHeader( 'Cache-Control', 'no-cache' ); xhr.setRequestHeader( 'X-CUSTOM', 'HEADER' ); xhr.withCredentials = true;

} );

This seems to be a pretty common case and it does not require lots of code, so I would consider adding an option for it. WDYT?

E.g. ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/div/lang/pl.js#L6

Try to load the Full Page demo at ​http://ckeditor.com/demo When you're lucky and the page finally loads, start the test:

Maximize the editor Open the Page properties dialog In the second tab open the color selector.

Actual results: The Page properties dialog is hidden while the color selector is shown.

Expected results. That dialog is partially visible behind the color selector.

It works correctly if the editor is not maximized.

Reproduced with the online builder only. The CLI one works fine.

First: Thank you for all your efforts! You guys are extraordinary.

I would like to suggest that CKBuilder be extended to better support those of us who would prefer to load CKEditor from a CDN, but use a lot of extra plug-ins.

I have read your doc on loading from a CDN: ​http://cdn.ckeditor.com/

I already load jQuery, jQuery UI, and Amplify from CDNs, so it is nothing new to me.

However, I do not want to load CKEditor from a CDN, as of yet.

Here is why: I load a lot of extra plugins that my users like, many of which are not in your available builds from the CDN. Unless I am mistaken, I would end up with a lot of extra HTTP calls to load those plug-ins from our server that would probably offset the benefit from CDN loading.

Although, your CDN doc is helpful, it begs the question to me of why you do not just extend CKBuilder to be able to create a "mega plug-in" (a bunch of concatenated plug-ins w/ setup code, but w/o the core ckeditor) for extra plug-ins that are not part of the standard builds, such as for the CDN builds. That way, I could just load one of the available builds from the CDN, and I could use CKBuilder to put all the extra plug-ins in one "mega plug-in" to be loaded from our server. It keeps the number of HTTP calls low, and enables me to more easily set up a CDN fall-back for my users in China for whom CDNs are sometimes blocked.

And, yes, I could probably set something up to concatenate the various extra plug-ins myself. However, isn't that what CKBuilder basically does, anyway?

​http://docs.ckeditor.com/#!/guide/dev_files

Oops…

Guide dev_files was not found.

Maybe it was renamed to something else?

Or maybe your internet connection has failed? This would be sad. Hopefully it's just a bug on our side.

Most likely you just followed a broken link inside this very documentation. Go and report it to the authors of the docs.

But if you think it's a bug in JSDuck documentation-generator itself, feel free to open an issue at the JSDuck issue tracker.

Sorry for all this :(

Win7/IE11/ckeditor instance in jQuery UI modal dialog.

I am seeing a noticeably long delay before seeing the progress notification when pasting a large image copied from MS Paint into an editor instance. In Chrome, I see the notification right away. In IE, a user may be inclined to think the editor is hung up when pasting a large file.

I think this could be a case of upload progress events not being consistently fired from one browser to another--you may need a smaller period to update progress. I have seen this before. It is important to show a 0% Progress Notification right away before initiating the upload (don't depend solely on progress events), so the user knows something is going on.

Steps to reproduce:

1. Paste text from word into the ckeditor body.
2. Select text with mouse from right to left and press Delete or use Shift+Home and press Delete (Ctrl+A and Delete work).
3. Press Remove Fomat button (inline styles are gone)
4. Type few chars and start deleteing them one by one with backspace.

Result: Cursor will enter previously removed inline styles.

1. Click into CKEditor and set language in your Windows to Japanese Hiragana
2. Clear editor with New Page command and Insert table aligned to right
3. Click in to one of table cells and try typing two byte character e.g. try typing き (‘ki’ on Latin keyboard)

Result: after pressing ‘I’ focus is moved to the left to the beginning of the body.

Same thing happens in native contenteditable page. Please see attached file.

For single line editors, when the user makes a selection, the iOS selection toolbar covers the ckeditor toolbar

Go to the ckeditor demo page and select the "ENTER key configuration" user interface. In any of the editors, select the editor to give it focus, then double tap to select a word.

Note that the iOS toolbar is on top of the ckeditor toolbar. In addition, clicking any toolbar item which creates a dialog causes the selected word to be unselected, so its impossible to do things like Format or Styles.

Hi there,

When I was looking at My App and CKeditor sample files on Safari iPad, I've noticed that when you you move cursor between the lines, CKEditor does not apply proper formatting on buttons.

For example:You select Heading 1 for the first line, and Heading 2 for the second line and when you click on first line, it still shows Heading 2 in the toolbar as opposed to Heading 1 Or If you bold some texts in first line and move the cursor to second line, Bold button is still enabled

However, it looks fine when you use Safari windows desktop version.

Could you please advise what is the best solution to get it sorted ?

Thanks

Comments (protected source) between list elements are removed by click on indent toolbar button.

1. Use these three plugins embed,embedsemantic,autoembed.
2. Empty the editor.
3. Please (Ctrl+V) this link into editor: ​https://twitter.com/reinmarpl/status/573118615274315776 (the non-semantic Media Embed is created )
4. Select created widget by clicking on it
5. Open Semantic Media Embed Dialog, paste the link and click OK.

Expected Result: Non-semantic Media Embed should be changed to Semantic one.

Actual result: JS error is thrown.

Since it works when doing this with dialogs I'm guessing that autoembed plugin doesn't report widget/content to some list.

Hi!

I'm integrating CKEditor into my site and we already have a build pipeline where our assets (CSS, image, JS, etc) are all fingerprinted for caching. I've add the CKEditor css and images to that build step and, as such, I don't need or want CKEditor to make a request for the CSS and icons.

From what I can tell, there's no way to disable the loading of a skin. Is this possible?

Scott

1. Clear editor
2. Insert below code into editor and select all contents with Ctrl+A

   <p><span style="font-family:arial,helvetica,sans-serif">test arial</span></p>
   <h1>test H1</h1>
   <p><span style="font-family:comic sans ms,cursive">test comic</span></p>
   

Result: Font dropdown shows Arial. In general, dropdowns reflect the beginning of selection.

Expected result: Dropdown shouldn’t show any value as current behaviour gives false impression that whole content has this type of font assigned.

If there are two <br /> positioned before unformatted text, and the text is changed to <h2>, the editor removes both <br />. Seen from the perspective of the user, formatting the text removes an empty line, which is probably unexpected.

Using the divarea and image2 plugin.

If you drag an image to a location in the editor that does not have any content, the image will disappear and an error will be thrown.

The error is "Unable to get property 'getParent' of undefined or null reference.

The problem occurs in IE, FireFox, and Chrome.

I've attached an animated GIF of the problem.

This is a regression. It worked in version 4.4.8, but doesn't actually work in version 4.5.0 onwards.

Steps to reproduce:

1. Go to the ​demo page or any editor from the ​nightly build.
2. Drag any link you can find in that page into the editor.

What should happen: The editor should contain a link, with the title of the page and the URL in the href attribute, as shown in the first screenshot.

What happens instead: The editor contains the plain text URL, as shown in the second screenshot.

Reproduced on OS X 10.10.4 with Chrome 44.0.2403.89 beta and Safari 8.0.7.

Additional info: You can check out how it worked in version 4.4.8 in the following JSFiddle: ​http://jsfiddle.net/jm9syL75/

I use CKEditor with divarea plugin instead of iframe (with iframe this bug is not appeared) and it is very necessary to use the editor in Safari in iPad, but the user used this device can not apply any style formatting located in selectbox for the selected text. Very crucial that font size can`t be applied too.

Steps to reproduce:
1) Open ​http://ckeditor.com/demo#div in a device with iOS 7 or 8 in Safari
2) Select any text
3) Apply any style from selectbox "Styles"
4) Result of it: text is not modified, selected value in the selectbox is changed and the previous selection of the text is disappeared, the caret locates in some unexpected position

This bug is reproduced in Safari browser in iOS 7-8 (iPad for best usability)

1. Load EnterKey sample
2. Click inside editor Set Korean language and Hangul keyboard (Korean character (not Latin))
3. Reload the page and change enter mode to BR
4. Click at the end of line and press Enter
5. Start typing

Result: Cursor will be moved up

Problem can be reproduced in IE11 only at least from CKEditor 4.0.

Issues which may be related: #10414, #12910

Edit: This is IE11 bug, it was reported here ​https://connect.microsoft.com/IE/feedback/details/1629173/ie11-broken-composition-in-contenteditable-when-using-korean-hangul

See ​https://twitter.com/wimleers/status/625671093047685121

The following bug was found to affect both a custom widget and the sample widget given in CKEditor documentation. The CKEditor sample widget "simplebox" and an inline version of "simplebox" are included in the attached files.

Steps to reproduce:

1. Open attached sample html page in either of the two test folders.
2. Click inside CKEditor's standard configuration, or the inline version underneath.
3. Click the icon to add either a block or inline "simplebox" widget (labeled "1" and "2", respectively).
4. Slowly move mouse near bottom of widget, until text edit cursor appears. Click when it appears.

Result: Previously immutable read-only widget is now editable.

Browser name: Internet Explorer 11 (v. 11.0.21) OS: Microsoft Windows 7 SP1

Editor configuration: Affects both inline and standard configurations of CKEditor 4.5.1 and CKEditor nightly build 7/29/2015.

All test cases in attached .zip folder.

Potentially relevant files:

simplewebpage.html (demo page used in test)

ckeditor/config.js (altered from standard)

ckeditor/plugins/simplebox/* (added from tutorial found at ​​http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1)

ckeditor/plugins/simpleboxinline/* (added and edited from tutorial found at ​​http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1)

ckeditor/plugins/widget/* (src: ​http://ckeditor.com/addons/plugins/)

ckeditor/plugins/lineutils/* (src: ​http://ckeditor.com/addons/plugins/)

ckeditor/plugins/clipboard/* (src: ​http://ckeditor.com/addons/plugins/)

Currently editor#selectionChange is based on:

• native selectionchange,
• keyboard events,
• mouse events.

Therefore, CKEditor does not know about selection changes done on touch devices if browser does not implement selectionchange itself. It may also happen that we have some bugs in this system.

Lack of editor#selectionChange and checkSelectionChange() calls result in various issues like wrong selection being locked on focus (we store a reference to the last selection) and lack of updates in commands states. I think that related tickets may be:

• #13522
• #13573
• #10180
• #13648
• #13659

Chrome, Firefox, and IE10 allow you drag and drop an image file into the editor with the uploadimage plugin. For some reason it does not work with IE11.

1. Go to ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/draganddrop
2. Drag the block widget inside inline editor around <blockquote>

Expected: The line always ends within editable.

Actual: The line extends beyond editable.

Might have something to do with #13155.

Reported on FF.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/autoembed/manual/autoembed
2. Copy autoembeddable link.
3. Paste.
4. Before the embeddable content loads, delete the link (i.e. ctrl+a + del).

Expected result: Nothing is embedded.

Actual result: Even though link is deleted, autoembeddable content is inserted.

Caused by ​https://connect.microsoft.com/IE/feedbackdetail/view/1609181/edge-contenteditable-preventing-the-drop-event-does-not-prevent-removing-the-dragged-text

Edge is the only browser which don't handle preventDefault() on drop correctly. The dragged text gets removed, so our cached dragRange points to an invalid location. This causes errors or removal of too much text. It could be possible to workaround this, but it's very, very sad and would make the CKEditor's integration with DnD very inconsistent.

Steps to reproduce

1. Open CKEditor sample page on Android device, Chrome browser.
2. Pinch to zoom and scroll a bit (both axis).
3. Click Size dropdown (or any other dropdown).

Expected result

Dropdown options are shown below dropdown "button".

Actual result

Dropdown options are somewhere else.

Other details (browser, OS, CKEditor version, installed plugins)

Browser is Chrome@Android. This is an old bug, I checked 4.4.0 and it is there already.

Steps to reproduce

(Simple demo attached)

1. In Chrome, load editor with only a widget in it (or at least have a widget as first thing in the editor).
2. Without selecting an insert point in the editor, try using insertHtml or insertElement. You can also try inserting widget which uses insertElement method - ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/widget/plugin.js#L420

Expected result

The HTML should be inserted before the widget.

Actual result

Fails with error "Uncaught TypeError: Cannot read property 'checkReadOnly' of undefined"

Other details (browser, OS, CKEditor version, installed plugins)

Chrome 44.0.2403.125 | Windows 10/8.1 | CKE 4.5.1 | Plugins: Widget / Enhanced Image (any plugin that uses widget will do)

When copying an excel or powerpoint content into CKEditor, rich content is lost.

Customers want to copy it as an embedded object, so that the original content can be edited.

CKEditor 4 with the current Editor Options configured:

                language: 'en',
                uiColor: '#741275',
                allowedContent: true,
                removePlugins: 'image',
                extraPlugins: 'image2,uploadimage,colorbutton,table,tableresize,tabletools,dialogadvtab',
                filebrowserImageUploadUrl: '/scripts/uploadImage.php',
                colorButton_enableMore: true

Replicate: Open Page => Add/Remove Numbered List => Add some items to the list

My test source:

<ol>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ol>

In Source mode add some line breaks between items

Test Source now looks like:

<ol>
	<li>item1</li>
	<li>item2</li><br>
	<li>item3</li><br>
</ol>

Toggle between Source/Preview mode. CKEditor will start adding line breaks and list items

After 1 iteration Test Source now looks like:

<ol>
	<li>item1</li>
	<li>item2</li>
	<br />
	<li>item3</li>
	<br />
	<br />
	&nbsp;
</ol>

Keep toggling and it becomes

<ol>
	<li>item1</li>
	<li>item2</li>
	<br />
	<li>item3</li>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	&nbsp;
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
</ol>

Expected result

CKEditor should not add line breaks and new list items. Hopefully it would just remove the line break tag.

Actual result

CKEditor adds line breaks and list items

Other details (browser, OS, CKEditor version, installed plugins)

See above

Steps to reproduce

URLs or file paths should have structure text (STT) support in order to properly display them. In Insert image dialogs, STT expression is not ordered correctly when contains Hebrew strings/resources duo to lack of STT support.

See attached images for each case:

• Image file path
• URL link
• URL image info

Expected result

Actual result

Other details (browser, OS, CKEditor version, installed plugins)

Steps to reproduce

1. Open sample page
2. Click inside 1st editor to get focus
3. Click reset button
4. Click inside the textarea (2nd editor)

Expected result

Textarea gets focus, cursor is visible

Actual result

Cursor is visible in the textarea on 3-4th click only. It's not always reproducible with nightly ckeditor.js, Step 4 has to be done quickly after reset button is pressed.

Other details (browser, OS, CKEditor version, installed plugins)

IE11

I am not sure what category this comes under so would like advice:

Currently using CKeditor 4.5.1 in a drupal 7 install to edit some quite large body fields - usually just plain html.

When I find part of the text I want to edit and look at the source code I click on 'Source' button but I am then taken to the top of the page showing code. Many of my pages have a lot of code so re-finding the relevant bit can be very time consuming.

Can we not have this work so that when I click on 'source' it returns me to the point at which I was viewing when I pressed the button?

Steps to reproduce

1. Go to the ckeditor demo: ​http://ckeditor.com/demo#full
2. Click button Broncode or Source code.
3. Paste the following code before anything else in the texteditor.

<style type="text/css">

/* Test <9 */ </style>

Expected result

Original text is still shown

Actual result

Nothing is shown

Other details (browser, OS, CKEditor version, installed plugins)

Browser used: IE11.

If there is a space between < and 9 everything works. /* Test <9 */

Steps to reproduce

1. Open demo.ckeditor.com
2. Put the cursor in the contenteditable.
3. Press enter.

Expected result

Enter is inserted, the page is not scrolled.

Actual result

Enter is inserted, but the page is scrolled to the end (end of the page, not end of the editable document).

Other details (browser, OS, CKEditor version, installed plugins)

Internet Explorer on Windows Phone 8.1

Steps to reproduce

1. Open demo.ckeditor.com
2. Put the cursor in the contenteditable.
3. Insert table.

Expected result

Table is inserted in the selection.

Actual result

Table is inserted at the end of the document.

Other details (browser, OS, CKEditor version, installed plugins)

Internet Explorer in Windows Phone 8.1.

Steps to reproduce

When I try to copy and paste certain unicode characters like pi (960), angle (8736) into the editor, it appears as "p" and "Ð"

Expected result

Should display as the actual pi and angle character

Actual result

Appear as "p" and "Ð"

Other details (browser, OS, CKEditor version, installed plugins)

Same effect on IE, chrome etc

Steps to reproduce

1. pasting only the following text from Word 2013 it breaks after 'Hasenhe' or the whole text attached:

Johanniskirche: 10.30 GD (H. Feußner); Michaelis-Kapelle Hasenhecke: 9.00 GD (H. Feußner)

Klinikseelsorge Diakonissen-Krankenhaus: Raum der Stille: Mo.- Fr. 9.-9.15 "Lichtblick am Morgen", Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

Expected result

Johanniskirche: 10.30 GD (H. Feußner); Michaelis-Kapelle Hasenhecke: 9.00 GD (H. Feußner)

Klinikseelsorge Diakonissen-Krankenhaus: Raum der Stille: Mo.- Fr. 9.-9.15 "Lichtblick am Morgen", Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

Actual result

Johanniskirche: 10.30 GD (H. Feußner);

Michaelis-Kapelle Hasenhe, Mo.- Sa. 18.-18.15 "Abendstille zur guten Nacht";

Other details (browser, OS, CKEditor version, installed plugins)