Custom Query

Ticket has been reported on our support channel - Topic - "Possible bug: HTML comments cause Javascript error when integrating CKFinder with CKEditor"

1. Insert on of the following

   <!--A comment-->
   <div><!--A comment--></div>
   <div>Something else</div><!-- A comment -->
   <div><div>Something else</div><!-- A comment --></div>
   

2. Try to insert Image/Table/Link/Page break using toolbar buttons.
3. After pressing OK JS error pops out.

The error:
Message: startNode.getChildCount is not a function
Line: 792
URI: ckeditor/_source/core/dom/range.js

Bug is only reproducible in Firefox 4-10 and IE 6-9 (FF 3.6 is fine).

Ticket has been reproducible from CKE 3.6.1 rev [6963]

NOTE:
Before this revision another error was thrown (from CKE 3.3)
Message: startContainer.getChild is not a function
URI: /3.6/_source/core/dom/range.js
Line: 1472

To reproduce the defect:

1. Insert a Table with first row as headers.

2. Enter data in all the cells in first row.

3. Select the first row by clicking on tr tag in elements path bar.

Issue: See that first character in the first word in first header cell not selected.

I set contentEditable="false" in a DIV, but still can modify the content inside DIV. <div contentEditable="false">xxx</div> I am not sure whether other has the same problem except DIV, maybe you can try :) Only in IE. My IE version is IE8.

In IE7 (IE 7.0.6002.18005 / OS: Windows Vista SP2) it takes about 4-5 seconds to maximize/minimize the editor (using Maximize button).

When displaying images using relative urls and config.baseHref, everytime I switch to wysiwyg mode there is a call made to the image using only the relative url and totally ignoring the baseHref. Obviously this fails into a 404 (or some other error code depending on the environnement). The image is still displayed, but there is also this unnecessary 404 call. Please note also that if you're testing this on local static files (i mean something like C:/some_directories/mypage.html) the call won't show up on Firebug, you will need to run it on a server like wamp.

You can reproduce it easily on the online demo with Firebug :

• go to ​http://ckeditor.com/demo
• go to source mode
• remove all source and paste only the following :

   <img src="logo3w.png"/>
  

• type in Firebug console :

  CKEDITOR.instances.editor1.config.baseHref = 'http://www.google.fr/images/srpr/';
  

• clear all firebug console and network panel
• hit the wysiwyg mode

you should see the Google logo, and a 404 showing up in both console et network panels.

I've located the where the call is made, it's in plugins/htmldataprocessor/plugin.js, in the toHtml function :

    // Call the browser to help us fixing a possibly invalid HTML
    // structure.
    var div = new CKEDITOR.dom.element( 'div' );
    // Add fake character to workaround IE comments bug. (#3801)
    div.setHtml( 'a' + data );
    data = div.getHtml().substr( 1 );

The data is submitted to the browser, causing it to interpret the <img> tags without taking the config.baseHref into account.

I've found a solution by using a regexp on the data : I turn all the src attributes into data attributes and back just before and after submitting the data to the browser. I'm not sure it's best way but I'm using it on the ckeditor on my website and it works fine. I can't make a patch file but here's how I've altered the code :

    //Call the browser to help us fixing a possibly invalid HTML
    // structure.        
    var fakeSrcAttribute = 'data-cke-faked-src';
    data = data.replace(/(<img[^>]+)src(\s*=)/ig, '$1' + fakeSrcAttribute + '$2');        
    var div = new CKEDITOR.dom.element( 'div' );
    // Add fake character to workaround IE comments bug. (#3801)
    div.setHtml( 'a' + data );
    data = div.getHtml().substr( 1 );
    data = data.replace(new RegExp('(<img[^>]+)' + fakeSrcAttribute + '(\\s*=)', 'ig'), '$1src$2');

To reproduce:

1. Go to replacebycode sample
2. Press Ctrl+A , and Delete (clear the contents)
3. Type 'test'
4. Put the cursor at the beginning of the word ^test
5. Start pressing enter, until scrollbar appears. (It should be about 8 Enter key presses)
6. Press pageUp

Result: Cursor jumps up but the editor does not scroll to show it.

Issue has been reproducible in all IE's from CKEditor 3.0

NOTE:If you press Enter key many times (let's say about 20 or 30) pageUp will work

When using Mozilla Firefox (or at least version 9.0.1), when a DIV with absolute positioning is not the first thing you click inside the editor, then it becomes uneditable.

Paste this inside a CKEditor to re-create:

<div>1. Click me</div>
<div style="position:absolute;">2. now try to edit me</div>

I note that this works as expected in competing editors such as TinyMCE.

To reproduce:

1. Close page on which you want to test if it is open in browser and clear the cache
2. Open the page
3. In source mode paste in the below code

   <p>test1</p><p>test2</p><p>test3</p><p>	test4</p><p>test5</p>
   <p>test6</p><p>test7</p><p>test8</p><p>test9</p><p>test10</p>
   <p>test12</p><p>test13</p><p>test14</p><p>test15</p><p>test16</p>
   <p>test17</p><p>test18</p><p>test19</p><p>test20</p><p>test21</p>
   <p>test22</p><p>test23</p>
   

4. Switch to WYSIWYG and scroll down to last line
5. Click between line 23 and 22, a little bit on the left, like it is shown on 5615.png

(In IE6-8 you should have pointer cursor and in IE9 selection cursor)

Result: CKEditor will scroll up.
This issue has been reproducible in all versions of IE from CKE 3.0

IE6 and IE7 do not recognise the "name" attribute for a META element. For these versions of IE, in order to set the "name" attribute of a META element, it is necessary to set the "Name" (initial capital) attribute.

In commitMeta, the code should be:

				if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ) {  
					meta.setAttribute( isHttp ? 'http-equiv' : 'Name', name )
				}
				else {
					meta.setAttribute( isHttp ? 'http-equiv' : 'name', name )
				}

In createMetaHash, the code should be:

			if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ) {  
				hash[ meta.getAttribute( meta.hasAttribute( 'http-equiv' ) ? 'http-equiv' : 'Name' ).toLowerCase() ] = meta; 
			}
			else {
				hash[ meta.getAttribute( meta.hasAttribute( 'http-equiv' ) ? 'http-equiv' : 'name' ).toLowerCase() ] = meta; 
			}

TC is in comment_7, proposed fix in comment_8

This test passes in browsers like Fx and Chrome, but fails in IE7&8.

var root = newElement( 'span' ),
	child1 = newElement( 'span' ),
	child2 = newElement( 'span' );

child1.appendTo( root );
child2.appendTo( root );

assert.isTrue( CKEDITOR.tools.arrayCompare( child2.getAddress(), [ 1 ] ) ); // in IE7&8 - [ 0, 1 ]
assert.isTrue( CKEDITOR.tools.arrayCompare( root.getAddress(), [ ] ) ); // in IE7&8 - [ 0 ]

Ticket reported by Elias Srensen.

I have found a critical bug in CKEditor in Internet Explorer 9.

When clicking the editor (to insert text), the page refreshes with IE7 compatibility mode, and Internet Explorer displays the following error: "A problem displaying caused Internet Explorer to refresh the webpage using compatibility View".

This error only applies to CKEditors WITHOUT innerHTMl content.

SOLUTION:

I disabled the font 'Helvetica' on my system, and reloaded the page; Now it didn't refresh the page, and everything worked as purposed.

Can you check this error, and fix it?

When pasting certain HTML content from an application like IBM Sametime into CKEditor, the browser will crash. This is consistently reproducible.

This issue was originally reported against IE8 by a customer.

When testing in IE9, switch the "Document Mode" to "IE7 Standards". It does not appear to crash in other document modes.

The crash usually occurs in plugins/selection/plugin.js line 1719 on the call to ieRange.select() or an earlier line with the same call:

....
else
{
	this.setEndBefore( endNode );
	endNode.remove();
1719 -> ieRange.select();
}

this.document.fire( 'selectionchange' );
....

To reproduce:

1. Copy a snippet of a chat log from IBM Sametime. Alternatively, the clipboard HTML data flavor has been attached to this ticket.
2. Use CTRL+A in CKEditor, then CTRL+V to paste

Result: the browser crashes

Steps to reproduce :

1. Go the ckeditor.com/demo , clear the content
2. Go to Source view
3. Paste or Type the following code:

   <pre>
   
   This is test number one
   
   This is test number two
   
   This is another test
   
   </pre>
   

4. Go back to Design view
5. Select word ^number^ on the first line, press Ctrl+C (copy)
6. Select ^This^ on the second line , press Ctrl+V (overwriting 'This' with 'number')

Expected behavior:
The copied text should replace the contents ( 'This' should be replaced with 'number' )

Actual behavior:
Part of the original content is still visible.

Issue has been reproducible from CKEditor 3.1 in all versions of IE.

Browser IE9. Right click on image, which is inside table, then click anywhere else on table. Image in table is still active, though it should be deselected. Also after theese steps pressing F5 shows IE9 not responding window.

Except one thing, it's same problem like ​http://dev.ckeditor.com/ticket/8349 The exception is the "sharedSpaces" environnement.

The CKEditor (3.6.2) fixed if NOT "sharedSpaces", but NOT fixed for "sharedSpaces"

When opening the context menu in a 'long' document, but not selecting an option and opening the context menu again (with the right mouse button) the editor scrolls to the top while the right mouse button is depressed, and jumps back to the original location after it is released. (Unless the page the editor is in is HTML 4, then it does not jump back to the correct position).

This behaviour can be reproduced on the CKEditor demo with IE9 by copy/pasting the content a few times, scrolling down, right clicking, and the right clicking again.

The cursor position while the right mouse button is down is at the beginning of the document text, and it is possible this is inside a non-editable element. This element can then be edited!

One of our customers reported instances of text that looked OK when they typed it in to CKEditor, but was missing when the edited HTML was later included in reports generated by our application. Investigation showed their text was inside spans with style display:none We've worked out how to reproduce the problem with Firefox and IE (only checked IE7 onwards), see below.

The text inside the display:none spans is only displayed inside CKEditor on some browsers (e.g. IE9 in IE7 document mode). If the person entering the text has one of these browsers then there is no indication that there is a problem. The problem can be reproduced on 3.6.2 Demo and the Nightly Build demo.

To reproduce, do the following.... If using IE, turn on JavaScript Alerts using Advanced Internet Options. Paste the following into the editor while in Source mode.

<!-- Start of Text -->
<p>Testing</p>
<p>One</p>
<p>Two</p>
<p>Three</p>
<!-- End of Text -->

Go back to WYSIWYG mode. Select the word Testing and use the toolbar to set a background colour; in IE you get a JavaScript error (note the location of the problem). Select the word Two and use the toolbar to set a background colour; it works fine. Select the word Three and use the toolbar to set a background colour; in IE you get a JavaScript error (the error details indicate a different location to the first error because it is a different problem). Note: The problem with Three does not occur with Firefox.

Inspect the HTML in Source mode; it now contains weird hidden spans (see below). Clicking after the end of the word Testing and typing some text adds the text into the hidden span. Depending on the exact browser version, the typed text either gets displayed or hidden or sometimes does not go into the hidden span.

<!-- Start of Text -->
<p><span id="cke_bm_74S" style="display: none">&nbsp;</span>Testing<span id="cke_bm_74E" style="display: none">&nbsp;</span></p>
<p>One</p>
<p><span style="background-color: #ffff00">Two</span></p>
<p><span id="cke_bm_77S" style="display: none">&nbsp;</span>Three<span id="cke_bm_77E" style="display: none">&nbsp;</span></p>
<!-- End of Text -->

The example above used Background Colour but can be reproduced with any toolbar button which works on selected text (Bold, Font, etc). The HTML comments in the source are what is triggering the problem. During testing we have also observed other ways of producing JavaScript errors and have not yet worked out reproducible test cases. These include an error during paste and an error while changing the selection. Therefore there are at least two more causes of JavaScript errors.

The problem is being caused by CKEditor badly handling JavaScript errors. During command execution the source HTML is marked up with hidden spans indicating the start and end of the selected area. These are being added at the start of the command, but are not being tidied up because the script is being aborted by the error. If this was a simple bit of code, then I'd suggest adding a try/catch block where the exception handler cleans up the hidden spans. Whatever solution is proposed, it needs to be generic enough to cope with a range of problems including ones we have not yet worked out how to repeatably demonstrate!

There is a related ticket #8232 (Inline styles create empty garbage "cke_bm_" spans). This fixed one specific cause of JavaScript error. It did not fix the problem described on that ticket by fastballweb in comment 2. Nor did it fix the general problem of tidying up after exceptions.

Steps to reproduce:

1. Go to any sample (using IE)
2. Copy the bullets from the attached document
3. Write out, "Hello World"
4. Select "Hello World" and apply a font-size of 14
5. Place your cursor at the end of the line, (Hello World^), and press the enter key to create a new line (Element's path is showing body p span)
6. Paste the bullets using the CTRL+V keyboard shortcut.

Result: All list items are wrapped in span-tags with font-size 14.

The issue has been reproducible from CKEditor 3.1 (In earlier versions results were not even close to the ones presented here)

NOTE:All browsers copy span to another line but only IE applies this span to inline elements or text

I encountered a javascript error when I try to create a table (with default parameters) with the latest ckeditor 3.6.2 samples\ajax.html using Internet Explorer 8. The only thing set in the configuration is entermode (which is set to ENTER_BR).

The javascript error is : nodeValue.length is null or not an object line: 130 char: 973

Steps to replicate the problem

1. Enter the word "TESTING" without the quotes into CKEditor.
2. Place cursor before T and press the Enter key. (The word TESTING will be on the 2nd line with a blank line on top).
3. Place the cursor on the blank line on top of the word Testing.
4. Click on the table button. The table dialog will appear.
5. Click on the OK button on the table dialog.

Notice that a table is created but the javascript error mentioned above is shown also.

NOTE: This problem do not seem to happen when I try other entermode e.g. ENTER_DIV or ENTER_P

Can anyone advise on what could be the problem here? Thank you.

Steps to replicate the problem

1. Enter the word "TESTING" without the quotes into CKEditor.
2. Place cursor before T and press the Enter key. (The word TESTING will be on the 2nd line with a blank line on top).
3. Place the cursor on the blank line on top of the word Testing.
4. Click on the table button. The table dialog will appear.
5. Click on the OK button on the table dialog.

Result: table/smiley/form are always inserted under br

Issue has been reproducible in IE9 only from CKEditor 3.5.3 rev [6624]

Founded when reproducing #8675

1. Clear editor contents or place cursor at the end of contents
2. Insert table
3. Cursor is clicking inside 1st table cell
4. Insert another table or E.g. image/iframe/flash

Result: Table or other element will be inserted in last cell.

Reproducible from CKEditor 3.6.1 rev [7004]

Workaround: To insert nested table in first cell you have to click it first.

For TC as below all browsers alert 'true', but IE7 and IE6 'inherited'.

<!DOCTYPE html>
<html>
<head>
	<script src="path/ckeditor.js"></script>
	<title>tc</title>
</head>
<body>
<div id="getAttributeContenteditable"></div>
<script>
	var element = CKEDITOR.document.getById( 'getAttributeContenteditable' );
	element.setAttribute( 'contenteditable', true );
	alert( element.getAttribute( 'contenteditable' ) );
</script>
</body>
</html>

It is not any more possible to double-click to select a word.

Confirmed with IE9+Compat. Works well with IE9.

This issue is not present on CKEditor 3.6.2.

Assume you have the following content within the ckeditor:

    <p>This is</p>
    <p>[anchor] an anchor</p>

Where [anchor] is the anchor placeholder.

Placing the cursor at the end of the first paragraph and hitting the DELETE key causes the anchor to be removed whereas I would expect that the second paragraph would be merged into the first paragraph and the anchor retained. [IE9 and FF10]

Placing the cursor at the beginning of the second paragraph, and hitting the BACKSPACE key also removes the anchor. [IE9]

This seems to work as expected on Chrome (WebKit).

I tried this on the following nightly build sample, and it still seems to be an issue: ​http://nightly.ckeditor.com/7385/_samples/replacebyclass.html

Incidentally, hitting the ENTER key immediately before an anchor on this nightly build seems to cause the anchor to get vertically squished (see screenshot).

Assume the following content is within the ckeditor:

    Here is an anchor [anchor] in some text

where [anchor] is the anchor placeholder.

On IE9, if you place the cursor immediately after the anchor and then hit ENTER, it is possible to generate an "Unable to get value of the property 'insertBeforeMe': object is null or undefined" javascript error. See screen shot.

Also managed to recreate in one of the nightly build samples: ​http://nightly.ckeditor.com/7382/_samples/replacebyclass.html

in 3.6.2 with IE8 _samples\enterkey.html

When Enter is pressed: Break the line with a <BR>

In editor, CTRL+A to select all text, and CTRL+C to copy. Then with the selection remains, just paste on the selection.

The IE8 shows the javascript error: Line 130, invalid parameter

1. open the ​http://ckeditor.com/demo/ in IE9
2. press source button to switch to source mode.
3. remove all default contents.
4. input this line. test <!-- -->
5. press source button and switch to WYSIWYG mode.
6. Click in editor (doesn't matter where) and press Enter key.

Result: Enter key does not work.

With IE9/8+Compat:

1. Load replacebyclass.
2. Insert a smiley.
3. Somewhere in the text.
4. Click the image to select it. (BUG: Doesn't work always. It works by trying it many times)
5. Once able to select the image, try to resize it. (BUG)

Works well with CKEditor 3.6.2.

1. Load replacebyclass.
2. Double-click on "are" to select it.
3. Right click on the selection to open the context menu.
4. Right click on "some". (BUG: the context menu will not appear - be sure to have something to paste, so at least that option should appear).
5. Repeat 2 and 3.
6. ESC to close the menu. (BUG: the selection moves to the previous place)

Confirmed with CKEditor 3.6. Works well with CKEditor 3.5.4.

I'm reporting these two issues together because I suspect they're very related.

Activte JAWS and open CKEditor.

1. Insert table
2. Choose cell properties from menu
3. In cell properties dialog click button to open background-color dialog
4. Start moving with arrows (E.g. Press right arrow few times)

Result: Colors are read correctly (not like in #8701) but they are not shown in highlight filed.

This issue is reproducible in IE from rev. [7370]

Opera and Safari seems to work fine.

Firefox and Chrome have their problems described in #8706.

Go to CKE demo. Insert a table. Attempt to select the cells to do something, like change background color. There is no visual indication of what cells are selected.

With IE<8, IE8+Compat and IE9+Compat:

1. Have enough contents to show the scrollbar in the editing area.
2. See the caret blinking in the editing area.
3. Move the mouse inside the editing area, close enough to the scrollbar. See that the mouse changes to arrow.
4. Click on that space.

The caret will disappear (no editing focus). If you type, nothing happens.

No matter what choice made in the clipboard access dialog, paste dialog always opens when clicking the paste toolbar button.

1. Open "Color Picker" dialog from color button panel;
2. Press one of the arrow keystrokes;
3. Close dialog;
4. Repeat step 1-2.

• Actual : There're two cells highlighted in the color matrix.

1. Load the "replacebyclass" sample;
2. Select the bold text "sample text";
3. Press Tab key to move focus outside of editor;
4. Click on "Paste" toolbar button, choose to deny clipboard access in order to bring up dialog.
5. Fill in the dialog will some text then click on Ok
   • Actual: Text is appended to the end of document;
   • Expected: Text is inserted at the range point with previously selected content removed.

1. Set to [CKEDITOR.ENTER_BR] as [enterMode] of config.
2. This CKEDITOR is opened by IE8.
3. Input some texts in WYSIWYG area.
4. Select all contents (e.g. Ctrl+A)
5. A Japanese input is turned ON.
6. Input some Japanese text (type at least two letters).

Result: The first pressed key is repeated twice. For example, in the case of the Japanese character inputted using the [H] key and the [E] key, it will be in the state where [hhe] was inputted.

Confirmed in IE8/win7.

Links that might be useful:

• ​http://www.coscom.co.jp/learnjapanese801/msime_win7_en1.html
• ​http://www.coscom.co.jp/learnjapanese801/msime_win7_en2.html

1. Load the editor with the following content:

   <ul>
   	<li>foo
   		<ul>
   			<li>bar</li>
   		</ul>
   	</li>
   </ul>
   

2. Make any small change then undo once;

• Actual : One unwanted whitespace is added to the end of the first list item (foo), this can be verified only in wysiwyg mode by moving cursor at the end of the list item;
• Expected: Content is reverted into the original status.

1. Load enough content to overflow the edit area;
2. Scrolls down to the bottom;
3. Make a text selection in the viewport;
4. Click outside of the editor to blur it;
5. Tab key to bring the focus back to it

• Actual: Editor has focused, content is scrolled by to the top;
• Expected: Editor gain focus with the content scroll bar positon remains.

1. Load any sample page, focus the toolbar and navigate to the "Format" button menu;

• Expected: AT announce the button as "menu button", with the keystroke hint prompted (press space to activate).
• Actual: AT announce the button as "menu button", but no keystroke prompt presented, instead AT reads the title of the button link element.

1. Press Space key to open the dropdown.

• Expected: AT switches to form mode, announces the dropdown as "List Box";
• Actual: No role announced, AT start with the list box item's content text, followed by the presentation to the toolbar button which is missed at the previous step.

JAWS 13 is used in the testing on IE9/Window7, Firefox works well matches the expected behavior with the same testing environment.

With IE9+Compat:

1. Be sure to have some text in the clipboard.

2. Place the caret in the middle of some text.

3. Hit the Paste button in the toolbar. "Allow" access to the clipboard. (Paste will work as expected)

4. Hit the Paste button again. (Paste will go at the end of the document)

1. Go to IE -> Tools -> Compatibility mode settings and add IP which you want to use to display HTML page E.g. 192.168.1.123
2. Place page attached to this ticket in samples folder. This page contains header

<meta http-equiv="X-UA-Compatible" content="IE=8" /> which should overwrite compatibility mode.

3. type "test" in editor, press enter 5 times and type "test2"
4. Switch to Source and back to WYSIWYG

Result: You will notice that there is no empty paragraphs between "test" and "test2"

I have managed to reproduce it in IE8 and IE9 and only when content attribute was set to IE8 - content="IE=8"

This code is somewhat sloppy but I had to kludge together an example from a plugin I'm trying to integrate.

Setup: I entered one word of text into CKEditor, which when you view source looks like this:

<p>
	word</p>

The following JavaScript works fine in Firefox, Chrome, and IE8:

	var new_node = CKEDITOR.dom.element.createFromHtml( '<span>Hello!</span>' );
	var old_node = CKEDITOR.instances.FCKeditor1.document.getDocumentElement().getChildren().getItem(1)['$'].childNodes[0];
	new_node.replace(CKEDITOR.dom.element.get(old_node));

All other browsers replace "word" with "<span>Hello!<span>". IE 6 throws an error indicating "Invalid Argument."

This may be related to ​this EXT JS bug where the author states "Internet Explorer throws an exception when no target node is specified in a call to the insertBefore() method of a native DOM object (other browsers just append the new node at the end in this case)."

I have tried the workaround listed there but to no avail. Any help would be awesome :)

1. Load the editor with following content and selection:

   <!-- A comment -->
   <p>^foo</p>
   

2. Type some random chars;
3. Click on Undo button;

• Expected: Inserted chars are removed, with cursor restored to the start;
• Actual： Inserted chars are removed, but cursor is now at the end of content.

Operating System: Windows

Browser(s) Tested: IE 9/8/7, Chrome 18

Full Notes: Using SpellCheckAsYouType inserts non-breaking spaces into content instead of regular spaces. This seems to happen nearby a word that has been flagged as invalid. It does not happen when SCAYT is turned off. It also does not seem to happen with pasting content.

While not ideal, it does not seem affect the main content area very much. However, the sidebars are more problematic because two medium sized words combined together are likely to force strange word wraps or content to overflow the provided area.

NOTE: This bug is reproduceable on the CKEditor demo

Steps to Recreate:

1. Use CKEditor demo in IE 7/8/9 or Chrome and turn on SCAYT
2. Type the following with 1 &nbsp; at the end of this string: good baaaaad baaaadd goood
3. Click the Source view and observe &nbsp; at the end
4. Click back to regular view and put your cursor at the end of the string and backspace to remove it
5. Click the Source view again, notice the &nbsp; is removed
6. Click back to regular view again and put your cursor right in front of "goood" then backspace once to connect to the last misspelled "bad" word
7. Go to Source and notice no &nbsp;
8. Go to regular and put the cursor back in between the 2nd "bad" word and "goood" and delete the rest of the connected "bad" word
9. Go to Source and notice &nbsp;

Similar to the (now closed) ticket #8689, IE9 crashes with an "A problem displaying caused Internet Explorer to refresh the webpage using compatibility View" error on clicking in the editor area, when you have an empty textarea and a stylesheet in contentsCss that contains a clearfix for <p>:

p::after {

clear: both; display: block; height: 0; visibility: hidden; content: ".";

}

Commenting out the line 'content: ".";' IE doesn't crash anymore (but the clearfix won't work either).

Other browsers don't show this problem (Opera, FF, Safari, Chrome).

<span style="display: inline-block"><a href="/send-now"><img alt="Buy - Global Express" src="sites/default/files/media/buy_button.gif" /></a></span>

Paste the above HTML in source.

While using CK editor in IE, if we select the image and click on the link editor, it looses focus and link is inserted at the beginning of the HTML rather than at the image itself.

This is due to display: inline-block and happens only in IE. Please fix.

Found when reproducing #8887 - another Browse Server bug

1. Integrate CKFinder with CKEditor
2. Click image button and hover Browse Server button it will jump up together with contents below it.

When using mouse to change the width of the input control by draging the small rectangle, the height of the control is enlarged!

expect result: Only the width is changed, the Height should not be changed.

What is full-width space:
Source: ​http://blog.greggman.com/blog/japanese_input_on_windows_xp/

Note: When typing in Hiragana mode pressing the space when there is nothing else typed will insert a full width space. That's usually what you want when typing Japanese but if you need a normal English space you can insert a half-width space while in Hiragana mode by pressing Shift-Space.

To reproduce:

1. Set editor language to Japanese - config.language = 'ja';
2. Set your input to Japanese and keyboard to Hiragana (see jp.png)
3. Load replace by code sample and put cursor at the end of line.
4. Perss space and then Enter
5. Press space in new line (Cursor will jump up)
6. Perss up arrow, and then down arrow

Result: Using arrows you can't move to lines containing full-width spaces.

Please also see jing video showing how to reproduce.

Our page HTML code forces us to use quirks mode in IE. When integrating CKEDitor, the dialog shadow images are not rendered by IE. This works ok in all other supported browsers.

To reproduce, access the CKEditor demo page with internet explorer 9, use the developer tools (F12), switch to quirks mode and view the editor with the V2 skin. Now (for example) open the image dialog window. The popup dialog is shown, but no drop-shadows are visible.

Yes, using IE developer tools may seem like a developer hack, but this is only to give you easy steps to reproduce. We observe this exact same behavior on our own page which, as written above, is non-trivial and requires quirks mode to function correctly.

In IE8 when you right-click quite often 'Paste' is greyed out. Moving the mouse as you right-click increases the chance of this happening.

In IE8, unable to edit selected text with keyboard when the selection was finished by releasing the left-mouse button outside of the ckeditor box.

Original ticket: ​http://cksource.com/forums/posting.php?mode=reply&f=11&t=25315

1. In IE9 or IE8 go to Tools -> Compatibility view settings and check "Display all pages in compatibility view"
2. Open replacebycode sample and insert table with width set to 100%

Result:
Horizontal scrollbar appears.

Reproducible from CKEditor 3.6.3 rev [7421]

Steps to reproduce the defect:

1. Open the Ajax sample in IE.
2. Create a new table with 3 rows and 3 columns.
3. Click into any of the cells in the table.
4. Click on tr in the elements path bar to select the entire table row.
5. Now click backspace.

Expected result: The entire row is deleted. (behaviour in FF)

Actual result: Only 1 cell in the row is deleted.

Steps to recreate:

1. Insert a textfield with "blah" as value.
2. Edit the textfield and remove "blah".
3. It will still say "blah" in the WYSIWYG frame.

Steps to reproduce the defect:

1. Open CKEditor in IE.
2. Paste the code below into the source view.

<div style="width: 700px">
	<img alt="" src="http://www.attackingsoccer.com/wp-content/uploads/2011/07/Shamrock-Rovers-logo.jpg" /></div>

This code is simply an image wrapped inside a div and the div has a width of 700px.

3. Switch back to WYSIWYG mode.
4. Right click anywhere on the image.

Expected Result: The context menu is displayed and it contains an option to open the Image Properties dialog.

Actual Result: The context menu appears but there is no Image Properties option

This defect was introduced with this changeset ​http://dev.ckeditor.com/changeset/7404

N.B. Similar behaviour can be seen when the image is also a link (see code below) and sometimes the Edit Link/Remove Link options also do not appear in the context menu.

<div style="width: 700px">
	<a href="http://www.attackingsoccer.com/wp-content/uploads/2011/07/Shamrock-Rovers-logo.jpg"><img alt="" src="http://www.attackingsoccer.com/wp-content/uploads/2011/07/Shamrock-Rovers-logo.jpg" /></a></div>

OS: Windows 7 Professional SP1

Browser: IE

Version: 9

Scenario:

1. Switch to source mode
2. Insert this html:

<form action="/formHandler" class="hp-smartInsertForm" method="post">
	<fieldset>
		<p>
			Here you need to add link <a href="http://www.google.com?v=1" target="_self">http://www.google.com</a></p>
	</fieldset>
</form>

3. Switch back to WYSIWYG mode
4. Double click the link

Defect: Link editing dialog shown, but field for href is blank

Reproducible in IE6-8 from CKEditor 3.2.1

<p style="width: 200px">
	<img src="http://dev.fckeditor.net/chrome/site/logos.gif" /></p>

<p>
	<span style="display: inline-block"><img alt="Buy - Global Express" src="http://dev.fckeditor.net/chrome/site/logos.gif" style="width: 100px; height: 75px" /></span></p>

To reproduce:

1. Paste one of the above code snippets that many times that after you switch to WYSIWYG mode scrollbar will appear
2. Scroll all the way down and right click on image

Result:Editor will scroll up and you can't display Image properties dialog.

Please note that clicking on the image and pressing Image toolbar button will also not work. The only way to get to Image properties is to double-click on the image.

I an unable to apply inline styles to text at the beginning of a CKEditor when using IE9 in Windows 7. It seems to work fine in older versions of IE and in Firefox.

To recreate this go to the demo page ​http://nightly.ckeditor.com/7484/_samples/replacebyclass.html. If you highlight "This is" and try to apply the "Marker: yellow" from the styles drop down box, it won't apply the style. It seems to work if you are not selecting the first character in the CKEditor box.

Problem reproducible in IE9 from CKEditor 3.6.3 rev. [7374]

To reproduce:

1. Open replacebyclass sample and click on New Page button to clear editor contents
2. Type "this" and select it with mouse from left to right - from "t" to "s" (from right to left (from "s" to "t") works ok).
3. Press link button, enter some url and press ok

Result: Link will be inserted next to word "this"

To reproduce the defect:

1. Open any CK Editor sample & open Image Properties dialog.

2. Insert an URL for the image and enter some Alternate text which as at least 250 words

3. Click your mouse on the dialog & drag the dialog to the end of the screen.

Issue: Image Properties dialog gets huge and it expands to the size of the screen

Th dialog looks huge even when we close it bring it up again. we have to close and re-open the editor to get the dialog to normal size. Reproduced in IE7, IE8 & IE9 Compat view

To reproduce, use the attached test case:

• unzip linkmenu_testcase.zip. Copy the linkmenu folder to the _source/plugins directory and the config.js file to the root ckeditor folder.
• Open any CKEditor sample in IE with debugging enabled as this sample logs content to the console.
• Enter some text into the editor and select some of the content.
• Open the toolbar menu item and click the 'Edit Link' option. This will open the link dialog and should log the selected text to the console.

Problem: The selected text is often an empty string even though there was text selected in the editor.

This occurs intermittently so it may take a few attempts. If you do not reproduce the issue at first, change the selection in the editor and try opening the link dialog from the toolbar menu again.

Note: If you use the link icon directly from the toolbar instead of the menu item, the selected text is always correct.

Enter key is not being consumed by dialog even though the dialog has focus. Instead the keystroke is propagating up and is being processed by our application while the dialog is opened. See attachment for an explanation. config.dialog_startupFocusTab = true;

I looked at dialog.js to see if I could figure out what was going on. If I modify focusKeydownHandler to consume the enter key in all instances, things work as expected.

To reproduce:

1. Open placeholder sample and clear editor contents
2. Insert placeholder
3. Click behind it so that selection frame is lost.
4. Note that elements path is still showing body p span which means you are still inside place holder (the only way to leave it is pressing space)
5. Nevertheless try to insert new placeholder

Result: New placeholder replaces the old one.

This particular TC has been reproducible in IE6, IE7 and IE9 browsers from CKEditor 3.5.2 rev. [6434]

Before revision [6434] in IE6, IE7 and IE9 it was possible to insert two placeholders in a row only if you haven’t clicked inside editing area after inserting first placeholder (click toolbar button, insert placeholder, click toolbar button again and insert another placeholder). If you have clicked inside editing area after inserting the first placeholder, the second place holder was not inserted and it was destroying the first one (removing [). Ironically this TC has been reproducible in IE8 Quirks from CKE 3.5.3 rev. [6459] and has been described in #9138

In IE8 next place holder is always inserted at the beginning. It is not possible to move cursor behind placeholder - #8990.

I have found it when reproducing #8989

To reproduce:

1. Open placeholder sample and clear editor contents
2. Insert placeholder
3. Try to move cursor behind it.

Result: you can’t do it neither with arrows nor with mouse. You can use End key but it does not always work.

Reproducible only in IE8 from CKEditor 3.5

1. Insert the following html:

<p>
	123456</p>
<pre>
123456
123456


</pre>
<p>
	123456</p>

Switch to WYSIWYG mode and move cursor after the "2" char in the first line of the pre block. Hit Shift+Enter. The new line will appear after the "5" char.

2. Html:

<pre>
123456
123456
123456
123456</pre>
<p>
	123456</p>

Switch to WYSIWYG mode and put cursor to the end of the second line of the pre block. Hit Shift+Enter. Cursor will appear at the start of the 4th line instead of the 3rd line. Toggle to source mode: note that line break disappeared.

1. Add a new table (2x3)
2. Enter some text in all cells beside the last cell in the middle row

foo|bar|test foo|bar|<LEAVE THIS CELL EMPTY> foo|bar|test

3. Select all
4. Apply style heading 1

--> The Empty cell is removed (TD is lost). It's now impossible to enter some text in this cell.

Happens in IE9.

Repro:

• go to ​http://ckeditor.com/demo
• select and remove all of the text
• type "A" [shift-enter] "-123" [shift-enter] "B" [shift-enter] "C"
• position the cursor between the "-" and the "1"
• type [shift-enter]

Result: A -1 23 B C

Expected Result: A - 123 B C

• IN IE9 go to ​​http://nightly.ckeditor.com/7478/_samples/enterkey.html and switch to the ENTER_BR setting.
• add a line of text at the end of the document
• select the entire line (with the mouse of by keyboard) and make the text bold, it doesn't work.

Only when applying the formatting for the second time it does work.

The same occurs with Underline and Italic formatting. When doing this on a specifiek word in the line the problem does not occur.

The problem might have something to do with this issue: ​https://dev.ckeditor.com/ticket/6706

To reproduce the defect:

1. Open Ajax Sample and click at bottom right hand side of editor

2. Click on Numbered list icon in the toolbar.

3. Numbered list starts with 1.

4. Start typing the text.

Issue: The typed text replaces the Numbered list

This is happening in IE 8 Compat Views & IE9 Compat View

This issue was introduced in rev 7374 to fix defect 7932

All our products use IE Compat View & it's a high priority for us

In IE9, (in WYSIWYG mode)

Inside a <p> tag:

Creating a few lines of text separated with <br /> (shift+enter in default cfg) and then selecting one of those lines using arrow keys

now if i open the link dialog box and fill in an url and press OK, no link is created.

Alternatively, if not the whole line is selected but only a word, then a link may get created but its text will be the same as the URL instead of the selected word.

This bug is reproducible in the online demo at ​http://ckeditor.com/demo

This bug seems to have come and gone a few times before: ​http://dev.ckeditor.com/ticket/8132

/Ola

An 'Unspecified Error' is sometimes thrown when selecting text in the editor. We cannot reproduce this in a standalone testcase, however it happens very often in our application. It happens in IE8 and IE9 when run in IE7 document mode.

The issue happens when you select text by starting the selection at the end of the editor. We believe this is related to the following code in the selection plugin which handles the case where the user clicks below the body.

function onHover( evt )
{
	evt = evt.data.$;
	if ( textRng )
	{
		// Read the current cursor.
		var rngEnd = body.$.createTextRange();
		rngEnd.moveToPoint( evt.x, evt.y );

		// Handle drag directions.
		textRng.setEndPoint(
			textRng.compareEndPoints( 'StartToStart', rngEnd ) < 0 ?
			'EndToEnd' :
			'StartToStart',
			rngEnd );

		// Update selection with new range.
		textRng.select();
	}
}

Adding a try/catch around this code as in the attached patch seems to fix this issue. Can you see any undesired consequences of this patch?

Steps to Reproduce

1. In the editor, type the following:
   
   Line 1
   Line 2
   Line 3
   
   
2. Highlight all three lines of text, click the "Insert/Remove Numbered List" button.
3. Highlight "Line 2", click the "Insert/Remove Bulleted List" button.

Expected Result
Text has styles successfully applied.

Actual Result
Pressing "Insert/Remove Bulleted List" will cause IE7 to crash.

Note: This will also occur if you attempt to nest an ordered (numbered) list into an unordered (bulleted) list.

To reproduce:

1. Clear editor contents
2. Write a letter
3. Press ENTER twice
4. Write a letter again
5. Activate 'source view' and go back (without this there will be no script error)
6. Place the cursor on top-left position - before first letter - at the beginning of editor content area.
7. Press SHIFT+'arrow down' twice

Result: JavaScript error is thrown.
Ticket has been reproducible in IE8 and IE9 from CKEditor 3.5.1

The error comes from the core\dom\node.js from the getPosition function where the this.$ is undefined. Seems that this object has nothing to do with the underlying DOM object.

NOTES:
From CKEditor 3.5.1 till 3.6.3 the error was
Message: 'length' is null or not an object
Line: 632
URI: /3.6.3/ckeditor/_source/plugins/selection/plugin.js

From CKEditor 3.6.3 rev. [7415] the error has changed: Message: 'compareDocumentPosition' is null or not an object
Line: 430
URI: /3.6.3/ckeditor/_source/core/dom/node.js

One of our clients has requested the ability to maintain cursor position when switching from Editor View to Source View and back. Currently when you do this you completely lose your position. This is not ideal when the document they are editing is a very large document and you are editing something in the middle to lower part of it.

Change request here is to keep the current cursor position when switching between views.

1. Paste in the below code in Source mode

   <p>
   	test a test testing<br />
   	test a test2, testing a test<br />
   	another test line<br />
   	one more test line</p>
   

2. Switch to source and use tab to get focus in content area.
3. Using arrows go to second line
4. Select word test2
5. Click on Link button, enter URL and click OK button

Results: Notice that instead of test2 you get est2, linked. Selection was moved one letter to the right. The same thing will happen if you select whole line.

Reproducible only in IE9 from CKEditor 3.5.1

I am getting script errors 1003 and 5009 when building an application on IE 9. I am using ExtJS 4, Ext Direct and jQuery. The application work fine on Chrome and Firefox. The application works just fine when I remove the loading of CKEditor. The script errors appear to be in Ext

Hi,

I am unable to copy the images from MS-word doc on CK editor for IE and chrome browser.Its working fine in FF.what would be best poosible way to sort out this issue.Thanks

Using IE 8 (other versions untested) go to ​http://ckeditor.com/demo or use the Nightly build.

Switch to source mode and paste this:

<p>
	- F&uacute;tbol 7 y f&uacute;tbol 11: <a href="http://www.futnavarra.es/secciones/competicion/grupos.asp?temporada=2011-12&amp;juego=1&amp;sexo=1" target="_blank">www.futnavarra.es</a></p>

Now switch to design.

Edit the link (double click, contextual menu, click and use the toolbar button, whatever...)

When the dialog opens just click OK.

The text changes from just the domain to the whole URL.

Firefox works fine.

I have found it when checking #9093

To reproduce:

1. Insert below code and switch to WYSIWYG

   <p>aaa</p>
   <p>bbb</p>
   <p>ccc</p>
   

2. Try to select 'bbb' but start your selection a little bit to the left of 'bbb' like shown in picture.
3. Once bbb is selected press Enter key

Result: new line is inserted above 'aaa'

Alternative step 3:

3. Once bbb is selected, press Link button and insert a link. Note that the link is inserted in the wrong place (at the end of contents).
   

The same thing happens with inline styles - they are added at the end of content. You can inspect it only with developer tools.

This issue has only been reproducible in IE8 and IE9 from CKEditor 3.6.3

Perhaps this is just my browser but despite fix in [7544] I'm not able to move absolute positioned images in IE7 and IE6.

When contents are empty you should be able to drag images right/left

To reproduce:
In empty editor insert absolute positioned image through image dialog and try to move it.

To reproduce the defect:

1. Open Ajax Sample

2. With out focussing in editor body, Click ok Align Right icon in the toolbar.

Expected Result: Right Alignment applied & cursor shown on the right hand side of editor body.

Actual Result: Cursor goes missing & it appears only when user starts typing the text.

This is happening from revision [7421]

When using a template that renders an anchor in display: inline-block, it's impossible to edit the content of this anchor. The problem occurs in IE8/9, not Firefox of Chrome.

The Source is :

<p><a class="file file_doc" href="#">Document PowerPoint</a></p>

The CSS is :

.editor .file {

display: inline-block; padding: 2px 0 2px 22px;

}

.editor a.file_ppt {

background:url(/bundles/projectfrontendcore/images/ul/icones/ppt.gif) no-repeat 0 1px;

}

To reproduce just open dialogs like: About, More Colors, Special characters, Anchor, Form Fields (all except for image button).

This is happening for Kama Skin.

See image

To reproduce:

1. Go to usage of the api sample
2. Use "Set editor Contents"
3. Use "Insert Text" (text should be inserted at the beginning)
4. Click at the end of text and use "Insert Text" (text should be inserted at the end)
5. Select with some and use "Execute Link Command"
6. Type anything and press Ok
7. Use "Execute Link Command" again

Result: focus goes to first line (see video)

While in IE6 and IE7 open tableresize plugin and try to resize the table. JavaScript error is thrown:

Message: getSelection() is null or not an object
Line: 315
URI: /ckeditor/_source/plugins/clipboard/plugin.js

See video.

Fieldset for Find and Replace options overlaps dialog footer.

On IE8 in Quirks mode iframe definition elements goes beyond the dialog. This is happening depending on language. If labels or select lists are wider then they do not fall within the dialog.

Reproducible at least from 3.6

To reproduce:

1. Open any sample and click on Link Dialog button
2. Switch to advanced tab
3. Click Cancel
4. Click on Link Dialog button

Result: Link dialog has broken layout.

Reproducible from rev. [7512]

I have found it when checking #8849 and #9127.

To reproduce:

1. Load the "replacebyclass" sample (important);
2. Select first line and copy/paste it. You should have 7 lines.
3. Select the bold text "sample text" in third line from the bottom;
4. Press Tab key to move focus outside of editor;
5. Click on "Paste" toolbar button; choose to deny clipboard access in order to bring up dialog.
6. Fill in the dialog with some text "abc" then click on Ok

Result: The above TC produces JS error:

Message: Invalid argument.
Line: 938
URI: /ckeditor/_source/plugins/selection/plugin.js

It has been reproducible (IE6-8) from rev. [7239] to [7382]; got fixed in [7383] and showed up again from [7447] to [7517]; got fixed in [7518] and now has been reproducible from CKEditor [7560]

Guys, Please use CRTL+F5 or clear cache from time to time if you have problems with reproducing.

Steps To Recreate:

1. Open any sample with IE.
2. Write "1", [Enter], "top", [Enter] 5x, and write "end".
3. Make a selection from top to end.
4. Apply a font family, size.
5. Now click on a blank line in the middle and type and start typing.

RESULT: Your new text will NOT have the font family, size, or bold (or italic or such).

Reproducible from CKEditor 3.0 in all versions of IE's.

Found in IE8 Quirks - works fine in standard mode

1. Open placeholder.html sample
2. Select some text inside placeholder, e.g. 'sample' - it is possible to select only couple of letters.
3. Click on Create placeholder toolbar button
4. Type something (e.g. '111') and click 'Ok'

Result: new placeholder is created at the beginning of the line:

<p>
	[[111]]This is a [[sample placeholder]]. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>

5. Repeat steps 3-4 but use '222' for the placeholder

Result: First bracket from first placeholder is cut off, '222' is not present anywhere.

<p>
	[111]]This is a [[sample placeholder]]. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>

Reproducible at least from 3.6

When some text is selected in WYSIWYG mode, clicking 'Find' fills the 'Find what:' input with selected text. Change the tab for 'Replace' the 'Find what:' input is empty.

The same happens in reverse direction: if first clicked button is 'Replace', then tab is changed to 'Find' - the 'Find what:' input is empty.

Reproducible at least from 3.6.1

Using IE (confirmed at least in IE6 and IE9) do the following:

• open _samples/fullpage.html
• click "New Page" button
• switch to source mode

result:

<html>
	<head>
		<title>Rich text editor, editor1, Press ALT 0 for help</title>
	</head>
	<body>
	</body>
</html>

In general, empty titles are now replaced with Rich text editor, editor1, Press ALT 0 for help.

1. Load the following into editor

   <p>&nbsp;</p>
   <ol>
   	<li>
   		B</li>
   	<li>
   		C</li>
   </ol>
   

2. Place the cursor at the end of first empty paragraph;
3. Press DELETE.

• Actual: The paragraph is deleted but the list items no longer appear as a list (even though li is still displayed on the elements path bar).

It affects IE8 on WinXP only.

Against the nightly build, in IE8, browser crashes when you highlight on a text and replace it with a text field/textarea/radio button.

Steps to reproduce: ->Type some text in ckeditor ->highlight the text ->Click on the text field/textarea/radio button plugin and click OK ->Browser crashes

This error doesn't occur with checkboxes.

Environment: XP/IE8, with or without compatibility view.

When I have a paragraph with text-indent and paste a table in IE8 or Chrome, the table inherits <p> properties to all cells, but when I change to source code and come back the table is fixed.

When this occurs and I look into IE developer tools, the table is inside P tag, and when I go to source, CKE moves to outside.

To reproduce: use this code as source: <p style="text-indent: 80px"> abcde</p>

go to wysiwyg then copy and paste a table from ​http://www.normaslegais.com.br/legislacao/simples-nacional-anexoI.html

Tested in 3.6.3 and nightly build 7578 This works fine in IE9, FF13, FF14

This is the continuation of #4688

WebSpellChecker team has been reported CheckDirty functionality doesn't work correctly after replacing misspellings with correct word. While preparing solution we discovered additional problem in IE. Here are steps to reproduce:

1. Open ​http://ckeditor.com/demo in any IE
2. Enable SCAYT and wait for all misspellings would be underlined
3. Change editor's mode to <Source> then to <WYSIWYG>
4. Run in console CKEDITOR.instances.editor1.checkDirty()

NOTE: For the above steps you can use api sample

Expected result: checkDirty=false
Actual result: checkDirty=true

Problem has been reproducible in all versions of IE from CKEditor 3.0

Steps to Reproduce

1. Place some text in the editor field (make sure it is the only thing in the editor field)
2. Highlight all of the text in the editor by clicking and dragging the mouse from the right side to the left side of the screen.
3. Press backspace

Expected Result

1. Deletes all of the highlighted text

Actual Result

1. IE9 makes the browser go back to the previously visited page

Note Video of the issue being reproduced: ​http://screencast.com/t/KbxCpzByVNtg

To reproduce in ckeditor 3.6.4 and IE 9.

1. Go to ckeditor demo page
2. Clear the page
3. Click on the Selection Field icon
4. Click in the "Text" type "abc" in that field and click on add then ok
5. Click the Source icon to view the html
6. Click the Source icon again to return to WYSIWYG mode
7. Place the curson on the Select Field just added and right click to bring up a menu
8. On this menu, click on Selection Field Properties to bring up a dialog box
9. Click the OK button in the dialog box and see that nothing happens

Clicking on the Cancel button properly closes the dialog box. Once you go to source mode and return, you cannot add any more select list items since the OK button is unresponsive.