Custom Query

When I use text editor, i often use Shift+Enter to break lines and stay within the same paragraph, without loosing formating. It is also easy to change those paragraphs to numbered/bullet lists.
I tried the same use case in CKEditor:

Test case 1

• Open CKEditor with EnterMode =P and ShiftEnterMode = BR
• In Source mode paste

  <p>
  	Paragraph 1<br />
  	Line after BR</p>
  <p>
  	Paragraph 2<br />
  	Line after BR</p>
  
  

• Switch to WYSIWYG
• Select all and switch to Numbered or Bullet List

Expected result: There should be only two list items

<ul>
	<li>	Paragraph 1<br />
		Line after BR</li>
	<li>	Paragraph 2<br />
		Line after BR</li>
</ul>

Actual

<ul>
	<li>Paragraph 1</li>
	<li>Line after BR</li>
	<li>Paragraph 2</li>
	<li>Line after BR</li>
</ul>

Test case 2

• See if result of Test case 1 is still selected.
• Disable Numbered/Bullet list

Expected result

<p>
	Paragraph 1<br />
	Line after BR</p>
<p>
	Paragraph 2<br />
	Line after BR</p>

Actual

<p>	Paragraph 1</p>
<p>	Line after BR</p>
<p>	Paragraph 2</p>
<p>	Line after BR</p>

Similar thing happens when EnterMode is set to DIV and BR (Shift Enter mode is different than EnterMode setting)

Test case:

• enter two paragraphs of text
• set cursor at the end of first paragraph
• insert horizontal line

Result of above should be:

<p>test1</p>
<hr />
<p>test2</p>

• Press "select all" or Crel+A
• press "Block Quote" button

Selected text is set as quote, but horizontal line is moved outside quotation
Actual result

<blockquote>
	<p>text^</p>
	<p>test</p>
</blockquote>
<hr />

Expected result

<blockquote>
	<p>text^</p>
	<hr />
	<p>test</p>
</blockquote>

The api_dialog sample shows some interesting things that can be done with CKEditor dialog, but some of them are not working as one would expect or simply do not show something that could be considered as useful.

1. "Adding dialog window tabs – "My Tab" in the "Link" dialog window."
   • we have an extra tab in the Link dialog, but values from this tab are not used at all when inserting / editing a link
   • same with "My Custom Field"

For me this sample is not very useful, because it does not show how actually one could modify the link itself using values taken from those extra fields added to the dialog.

Perhaps instead of using plain text fields in "My Tab" (we already have one - "My Custom Field") we could offer there a select field where user could select a link from a predefined set of links. Such "tab" could be called "My Link Browser" instead of "My tab". Selecting a link could result in filling the "Url" field automatically and setting focus to "Link Info" tab.

2. "Creating a custom dialog window – "My Dialog" dialog window opened with the "My Dialog" toolbar button."
   • we could call insertText or insertHtml to insert entered text, right now one can type something there and when closing the dialog nothing else happens.

• Open a sample that has this style in its style set:

  	{ name : 'TEST1', element: 'div', styles : { 'color' : 'red' } },
  

• Click inside the sample content and click the div icon.
• Choose TEST1 from the styles list.
• Click OK.

JS error is thrown:

style._.definition.attributes is undefined
/_source/plugins/div/dialogs/div.js L339

Regression of [5846].

CKEditor language files contain entries for the scayt plugin, where options from the SCAYT dialog are translated, e.g. in German language file there is:

	scayt :
	{
		title			: 'Rechtschreibprüfung während der Texteingabe (SCAYT)',
		opera_title		: 'Nicht von Opera unterstützt',
		enable			: 'SCAYT einschalten',
		disable			: 'SCAYT ausschalten',
		about			: 'Über SCAYT',
		toggle			: 'SCAYT umschalten',
		options			: 'Optionen',
		langs			: 'Sprachen',
		moreSuggestions	: 'Mehr Vorschläge',
		ignore			: 'Ignorieren',
		ignoreAll		: 'Alle ignorieren',
		addWord			: 'Wort hinzufügen',
		emptyDic		: 'Wörterbuchname sollte leer sein.',

		optionsTab		: 'Optionen',
		allCaps			: 'Groß geschriebenen Wörter ignorieren',
		ignoreDomainNames : 'Domain-Namen ignorieren',
		// ...

However if you check the options dialog, strings from the language file are not used (for example ignoreDomainNames). See the attached screenshot.

I know you won't believe it but <hr> in IE9 can hold text node, here are the cookbook:

1. Click on the <hr> element;
2. Press "Esc" to cancel the handler;
3. Type some text;
   • Actual Result: Now <hr> becomes a paragraph ;)

Currently editor produce colored link as following, which result in a mixed color looking (underline decoration) on result HTML.

<a href="http://ckeditor.com/"><span style="color: rgb(255, 0, 0);">CKEditor</span></a>

Environment

Win7 Linux, Chrome9, found while testing CKEditor for ASP.NET

Test case

• Open Replace by code sample, with 2 editors
• In Editor 2 expand Format OR Font OR FontSize dropdown list
• When list is expanded, select the same kombo from Editor 1

Expected result

List in Editor 2 is collapsed, and expanded list in Editor 1 has the same height as corresponding one in editor 2. Styles dropdown is working properly in this case.

Actual result

List in editor 2 is collapsed. List in editor 1 is too high (attached screen)

Confirmed in IE8. In certain situations it is impossible to remove a style from a list item.

Steps to reproduce

1. Load the following:

   <ul>
   	<li>
   		first line<br />
   		second line</li>
   </ul>
   

2. Switch to wysiwyg
3. Select the first line, press "Underline" button
4. Click at the end of the first line, press again "Underline" button to stop the text from being underlined.
5. Result: the cursor jumps one line down, if you move again at the end of first line, the text will be still underlined.

Note: Remove format works fine when following the same scenario.

See attached for the wrong toolbar item wrapping starting from "Form" button, works fine in IE8.

1. Load the URL field with "​http://dev.ckeditor.com/chrome/site/logo-ckeditor-dev.png";
2. Change image width set to 100 without touch lock, confirm dialog;
3. Reopen dialog upon inserted image, check lock status.

• Actual Result: Lock opened.

Basing on #6159, and connected to #6236 While #is fully reproducible under IE7, under IE8/doc mode IE8, the same steps work in different way:

Steps to reproduce

• Click bullet icon in editor
• Type 'test1' , press enter
• Indent the bullet
• Type 'test11' , press enter
• Type 'test12' , press enter
• Type 'test13'
• Move cursor behind test12
• Press enter 3 times
• Press backspace 4 times

Expected Result

Cursor should be back at the end of 'test12'

Actual

• After pressing backspace for the 4th time, cursor is set in an empty line.
• Pressing backspace more times, does not work
• empty bullet line is placed below 'test12'

It works this way since v3.4

When list is aligned to the right the following code is created:

<ul>
<li style="text-align: right;">one</li>
<li style="text-align: right;">two</li>
</ul>

however, after clicking "Send to Flash", the list is still aligned to the left in the flash element.

When there is a link followed by text (so there is no space between link and the following text) it is impossible to edit the link, neither by double clicking on it nor using the context menu. Found in Safari at Mac.

Context menu does not work properly also in Firefox ("Edit Link" is not available) if the link is not selected before opening the context menu.

Sample HTML code:

<p>Link&nbsp;<a href="http://example.com">example</a>s</p>

• Open a RTL editor in AIR.
• Open a floating panel.

See that the contents appear as LTR.

The issue concerns FF4 and FF3.6

1. Go to ajax example create editor
2. Click on list creation - (number or bullet) and create empty list (Sometimes you have to toggle between creation and removal few times (usually 3 (c,r,c)) to achieve this)
3. Switch to source mode and than back to wysiwyg mode.
4. Click on list:
   1. in FF3.6, one click is enough
   2. in FF4 you have to click two times.

Results:

1. In FF4 the list element is removed but line break (br) tag is inserted. You can insert many br tags using this combination: list, source, wysiwyg, list, list;

2. In FF3.6 new empty item is created. Now by using combination source, wysiwyg, list - you can create many empty items. Sometimes cursor moves back to first element - if you click list, list and than again source, wysiwyg, list you will be able to create elements again.

This has happened since CKEditor version 3.3 Issue for FF3.6 has started since 3.3 but till version 3.3.1 (inclusive) effect is the same but the editor behavior is a little different.

This issue has occured in CKEditor since version 3.0 It concerns IE6, IE7, IE8

Paste the following code:

<form action="formAct" id="myid" method="get" name="form">
	<select name="myselect" size="1"><option selected="selected" value="val1">opt1</option><option value="val2">opt2</option><option value="val3">opt3</option></select></form>
<p>
	<select name="myselect1" size="1"><option selected="selected" value="val1">opt1</option><option value="val2">opt2</option><option value="val3">opt3</option></select></p>

1. In IE8 this you can only put cursor before select element. When you press enter it is added only above the select. When the cursor is above select you can't get to it using arrow keys, but only by clicking a mouse.

2. In IE6 and IE7 no matter whether you place the cursor before or after select (any select) new lines will be added only above. But you can write before of after select and move cursor freely.

This works perfectly in IE9, Chrome and Safari. Opera has a little different problem described in #7502 and Firefox has a different problem described in #7507

Tested on firefox 3.6.16 on ubuntu. Shortcut (alt+f10) from ​http://docs.cksource.com/CKEditor_3.x/Users_Guide/Keyboard_Shortcuts in Accessibility section doesn't work.

Paste the folowing code:

<form action="formAct" id="myid" method="get" name="form">
	<select name="myselect" size="1"><option selected="selected" value="val1">opt1</option><option value="val2">opt2</option><option value="val3">opt3</option></select></form>
<p>
	<select name="myselect" size="1"><option selected="selected" value="val1">opt1</option><option value="val2">opt2</option><option value="val3">opt3</option></select></p>

1. Place the cursor after select element in form and press enter

Result: seceond empty select element is created.

Bugs #7502 #7503 describe issues with select and eneter key for other browsers.

When use mod_pagespeed for apache from ​http://code.google.com/intl/pl/speed/page-speed/docs/module.html. CKEditor have problems with loading files (css , js) after refresh (when pagespeed works). Remember that use of this module automatically set Accept-Encoding gzip,deflate headers. Because this module became more popular (it is installed on hosting) we should take care about it. Please look at screenshots. All test done with _samples/eplacebyclass.html with different CKEditor js files loaded (FF 3.6.16 on Ubuntu). Problem was reported by Drupal users ​http://drupal.org/node/1095908

Create two level list or paste the following code:

<ol>
	<li>
		item1</li>
	<li>
		item2
		<ol>
			<li>
				item3</li>
			<li>
				item4</li>
			<li>
				item5</li>
		</ol>
	</li>
	<li>
		item6</li>
	<li>
		item7</li>
	<li>
		item8</li>
</ol>

Try to select 2-level list (item 3-5) and press delete or backspace. Result depends on IE version:

1. IE6 and IE7 - deleting whole second level list works if you select something like "empty space" behind item2 element. See ie67.png. If you don't select "empty space" behind item 2 there will be second-level empty list element left.
2. IE9 - there will always be second-level empty list element left.
3. IE8 - This is weird. If you select second-level list with empty space behind item2, than after pressing backspace you will get first-level empty list element. See ie8_empty.png. If you delete second-level list without this "empty space" than just see the ie8_without_empty.png, it will tell you more than my explanation :)

To remove empty element you have to place cursor behind item2 and press delete. In my opinion this is very unintuitive. Furthermore the described issue works perfectly in other browser. When you select second-level list you can delete it whole and nothing will be left.

The following TC is failing:
​http://ckeditor.t/dt/plugins/styles/styles.html

With the following HTML:

<b>this is some</b> sample text

The style system creates this when applying <b> in the word "is":

<b>this <b>is</b> some</b> sample text

After moving an image inside of editing area (e.g. a smiley), clicking on the "Source" button does not switch to source mode, until one click on the editing area.

• Load replacebyclass sample
• Insert a smiley at the end of first line
• Move it with a mouse to the beginning
• Click "Source" button
• Result: nothing happens

There is no JS error in the error console.

When resizing editor in languages sample in IE9 textarea and buttons go outside editor. This can be observed when using some locale like Polish, Icelandic, Spanish, Vietnamese, Portuguese or Welsh.

I haven tested this issue for all the languages but it works fine for example in Chinese, Korean, Persian, English, German, Hungarian or in Swedish.

I have set 3.5.3 version because in previous ones I could not see buttons in IE9 at all.

While checking the new stylesheet parser plugin introduced with #901 I've noted two issues:

1)

strong.green {
	color: #739E39;
}

is not listed as "Object Style" after clicking on the <strong> element.

2) Using the default sample text:

<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>

click in the middle of strong element:

<strong>sa^mple text</strong>

and in the "Styles" dropdown list, select "strong.green". Note that nothing happens (an empty <strong class="green"></strong> is inserted into the document, but that's not an expected result here).

Note: the described problem has nothing to do with the new plugin. It looks like it always worked this way, to confirm it in older versions, I've tried the following:

	{
		name : 'Strong blue',
		element : 'strong',
		attributes :
		{
			'style' : 'color:blue',
		}
	},
	{
		name : 'Strong green',
		element : 'strong',
		attributes :
		{
			'class' : 'green',
		}
	},

Editor will not parse the following source, degrade it into a single text node, some fault tolerant has to make instead.

<span style=""">text</span>

1. Paste the contents of the attachment in to editor (WYSIWYG mode)
2. Place the cursor before ‘item2’ (on the left of i) and press enter
3. Place the cursor before ‘item5’ (on the left of i) and press enter
4. Select ‘item2’, ‘item3’ and ‘item4’ using shift key and arrow keys
5. Press bulleted list button for selected text.

Result: When I selected ‘item2’, ‘item3’ and ‘item4’ and pressed bulleted list, an empty list item above ‘item2’ was also created.

When I tried to outsmart IE9 and selected everything except letter ‘i’ in ‘item2’, pressed bulleted list, it created three item list but it inserted an empty paragraph above it.

This issue was discovered when reproducing bug #7640

1. Open replaceBycode sample.
2. Go to second editor
3. Select part of sample text and try to cut it with toolbar button.
4. Security alert pops out.
5. Click ok and place the cursor after sample text (after dot)
6. Now buttons for cut and copy are disabled. Try to select whole sample text from dot '.' to 'T'.

Result: Buttons for cut and copy are still disabled. If you try to do it on part of the sample text or select whole text from 'T' to dot '.' it will work (Buttons become enabled on mouse up).

This has been reproducible in FF, Opera since CKEditor version 3.5.1

In Webkit these buttons are disabled all the time. I'm not sure if this is a bug or if this is due to the security settings in this case.

Environment

Opera 11.10

TC 1

1. Clear content
2. press Striketrough button and Subscript button
3. type some text

Actual result

Strikethrough line is placed above entered text

TC 2

1. Clear content
2. press Striketrough button and Sperscript button
3. type some text

Actual result

Strikethrough line is placed below entered text

Expected result for TC1 and TC2

• Strikethrough line is crossing the entered text.
• when entered text is selected again, and sub/sup is disabled ane enabled again, everything works fine

In other browsers above cases are working fine

In AIR, open the smiley dialog. Note that the blue border is position half way through the image, so it interrupts viewing the smiley.

Environment

Opera 11.10; Connected with context menu issue #7644

TC

• open any sample
• enable fullscreen mode
• click right mouse button in edit area (menu is shown in wrong place)
• disable fullscreen mode
• enable fullscreen mode again

Actual result

Editor is wrongly placed (cke 3.4.3; 3.5+) or is missing (cke 3.5.2+)

1. Open stylesheetparser demo page;
2. Load the following source by input (but not from file)

   <style>
   	p.red
   	{
   		color:red;
   	}
   </style>
   <p class="red">some red text</p>
   

3. Check Styles combo;

• Actual Result: The style doesn't show up.

1. Enable SCAYT, load the editor with the following source:

   <p>
   	<a name="anchor1">anchor mis</a>pell</p>
   

2. Wait until word "mispell" is marked by SCAYT;

• Actual Result: marker splits up the anchor text into two, with each of them get applies the anchor styles.

1. Now open context menu on first anchor and change the name to "anchor2";
2. Check source:

• Actual Result:

  <p>
  	<a name="anchor2">anchor </a><a name="anchor1">mis</a>pell</p>
  
  

Not sure if we have already a ticket for it.

The XHTML sample is using classes for different styles and it works fine (it's possible to apply bold and italic to the same text):

coreStyles_bold	: { element : 'span', attributes : {'class': 'Bold'} },
coreStyles_italic	: { element : 'span', attributes : {'class': 'Italic'}},
coreStyles_underline	: { element : 'span', attributes : {'class': 'Underline'}},

However, when using the following:

config.coreStyles_bold = { element: 'span', attributes: { 'style': 'font-weight:bold'} };
config.coreStyles_italic = { element: 'span', attributes: { 'style': 'font-style:italic'} };
config.coreStyles_underline = { element: 'span', attributes: { 'style': 'text-decoration:underline'} };

CKEditor allows setting only one style on the same selection. It's quite strange because each style uses a different CSS rule (font-weight/text-decoration etc.).

Environment

CKE 3.6, Opera 11, IE6/7, Chrome

TC

• Load BBCode sample
• clear content
• type "default"
• change font size to 200, type 200
• change font size to 150, type 150 See that newly typed text is bigger, than previous, and element path contains two size
• repeat for other font sizes

Result

the size tags, are not closed after changing font size to other values:

default[size=200]200[size=150]150[size=120]120[size=100]100[size=50]50[size=30]30[size=300]300[size=200]200[/size][/size][/size][/size][/size][/size][/size][/size]

Attached screen

Expected

default[size=200]200[/size][size=150]150[/size][size=120]120[/size][size=100]100[/size][size=50]50[/size][size=30]30[/size][size=300]300[/size][size=200]200[/size]

1. Load the editor in enterMode BR;
2. Empty the editor, type in some content;
3. Select all, then apply one inline style like bold;

• Actual Result: Everything looks fine except cursor is not blinking at the end of doc;
• Expected Result: Text selection remains unchanged.

Problem can be reproduced from CKEditor 3.5.1 rev. [6272], it gets fixed in CKEditor 3.6.1 rev. [6919] and gets broken again in CKE 4.0 beta.

• Set pasteFromWordPromptCleanup = true.
• Copy-paste any doc file into the editor using CTRL+V or paste button (NOT paste from Word button).
• Hit "cancel" when the cleanup prompt appears.

Note that in FF, unlike other browsers, Word's metadata appears in source (o:OfficeDocumentSettings etc.).

Feature request to introduce dialog to maintain a list at list item level, including list item style type and start numbering.

This bug is a rewritten forum entry ​http://cksource.com/forums/viewtopic.php?f=11&t=22508

It occurs in IE7 and IE6 with enterMode set to BR from CKEditor 3.5.3.

1. Copy the attached file to samples
2. Load it
3. click on a select box.

Result:JS error pops out: Message: editor.getSelection() is null or not an object Line: 818 URI: /_source/plugins/wysiwygarea/plugins.js Code: range = editor.getSelection().getRanges()[ 0 ];

The bbcode plugin is now textifying all unknown HTML elements (in wysiwyg), this's ok for inline elements only but not blocks, e.g.

1. Open "replacebyclass" sample, copy all content;
2. Open "bbcode" sample page and paste in the clipboard content;
3. Switch to Source and back.
   • Expected: pasted paragraphs new lines remains.
   • Actual: All line-breaks are now lost in wyiswyg.

1. Append the following to content.css file:

   ul, ol {
        color:#888888;
        line-height:16px;
   }
   

2. Open any of the rich combo

• Actual Result: List box items are affected by content style.

This function return 'old' data but check dirty function returns proper value. This is especially visible when switch between source and WYSIWYG mode. Please look at attached file. To reproduce just open attached file and fire any editor command and look at firebug console. This issue is also reported here ​http://cksource.com/forums/viewtopic.php?t=22532.

1. Append the following styles to the content.css file:

   p,strong
   {
   	border: 1px dotted #000;
   }
   
   

2. Load the editor with following content:

   <p><strong>paragraph1</strong></p>
   <p>paragraph2</p>
   

3. Copy all content and paste at the end of doc.

• Actual Result: The computed style of the content is pasted as inline style.

Back in #4246 we've changed the way how image dimension is set: deprecate the attributes for inline styles. Some users are not adapted to this change (such as #5547) and some others on the opposite want it a step further - to propagate this convention to other plugins (e.g. flash, iframe).

As usual, as both criticism has it's own advantages, it looks like the best option is still to create a configuration entry for choosing the scheme of the dimension, as well as aligning all objects with this convention.

1. Load the editor with the following content:

   <article>article</article>
   

2. Put cursor inside the article block;

• Actual Result: New paragraph established.

• Load the HTML content posted below
• Scroll down to the bottom, select and image and right-click on it

• Results: Firefox and IE scroll to the top. Additionally in IE "Image properties" option is not available (reported in #7974, because it is happening since CKEditor 3.3).

Firefox scrolls to the top since CKEditor 3.3.
IE scrolls to the top since [5214] (CKEditor 3.2.1).
Related ticket caused by the same changeset: #7934.

<p>
	(Scroll down to the bottom, select and image and right-click on it)</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<div style="float: right">
	Foo <img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" /> Bar</div>

• Load the HTML content posted below
• Scroll down to the bottom, select and image and right-click on it
• Results: "Image properties" option is not available and IE scrolls to the top (reported in #7973, started happening in 3.2.1).

"Image properties" option disappeared in 3.3.

<p>
	(Scroll down to the bottom, select and image and right-click on it)</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<div style="float: right">
	Foo <img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" /> Bar</div>

The below description was copied from bug #7928 comment 3.

Second example :

1. Create new table
2. Put the cursor in a cell
3. Add some text in the cell
4. Click "td" in the elementspath
5. Click with RBM on selected text
6. Go to cell properties and change the width of the cell
7. Save : JAVASCRIPT ERROR

Message: Object doesn't support this property or method
Line: 131
URI: /ckeditor/_source/plugins/elementspath/plugin.js

This has been true for all versions of IE from CKEDitor 3.4.1

Linked with Ticket #6845

TC

• open editor and clear contents
• open link dialog
• in url field enter: [space]​http://google.com
• press enter

Expected

New, correct link is added to edit area

Actual Result

<p>
	<a href="http://http://google.com">http://http://google.com</a></p>

1. Start with empty editor
2. Create anchor
3. Start typing

IE8 - the letters appear on the left of the anchor and you can't get to the right side using Right Arrow, End buttons or mouse.

Firefox - There are some problems with buttons and inconsistencies between how cursor is displayed and where it actually is. (Edit: these cases are not reproducible any more, but there's still a small issue, because after inserting an anchor the selection is placed before it and should be after it.)

1. After creating the anchor the cursor appears on the right but typed letters appear on the left.
2. You can’t get to the right side of the anchor using mouse or arrow button. Only End button works.
3. When you press End button cursor stays on the left but typed letters appear on the right.
4. When you delete letters on the right of the anchor (with backspace) the cursor appears on the left of the anchor but when you press delete the anchor is deleted not the letters on the left side of it.

This hasn't been working from CKEditor rev [6904]

1. Start with empty editor
2. Type some text then select it with a mouse and apply bold formatting
3. Copy text with CRTL+C
4. Text is still selected so delete it using BACKSPACE. Press backspace more than once to clean all the remainings
5. Paste the text using CRTL+V
6. Switch to source. You will see that <p>&nbsp;</p> tags were added to the beginning.
7. When you come back to WYSIWYG you will see extra empty space above the pasted text.

Issue is reproducible in Webkit and Firefox4 from CKEditor 3.5.1

1. Paste the list from the file into empty editor.
2. Switch to source and back to WYSIWYG
3. Press undo

Result: List jumps up and down but it is not removed.

Reproducible in Webkit from CKEditor 3.4

Sorry for the mysterious summary. It's best to see the picture to know what I'm talking about.

The problem is that textarea is actually smaller then the wrapper div. It's no big deal but when focus comes to textarea it doesn't look nice any more.

Found in IE8/Quirks.

• Open the replacebyclass sample. Put the cursor at the end of first line.
• Click "Anchor" button and insert an anchor.
• After closing the dialog, click with a mouse inside of the editing area, but below the first line. Note that the anchor is now resizable.
• Type some text.
• Result: the entered text goes inside of an anchor. Even after pressing the enter key, the cursor does not move to the next line and user is still inside of the anchor.

Right-click in a table, use arrow keys to select a specific menu entry and press enter.

Expected: menu entry is activated Actual: nothing happens

1. Load the editor with the following content and selection:

   <p>
   	This is <span style="background-color: rgb(255, 0, 0);">some [sample] text</span>. </p>
   
   

2. Open background color panel and apply the 'auto' color to selection;

• Actual Result:

  <p>
  	This is <span style="">some </span>sample<span style=""> text</span>.</p>
  

• Expected Result:

  <p>
  	This is <span style="background-color: rgb(255, 0, 0);">some </span>sample<span style="background-color: rgb(255, 0, 0);"> text</span>.</p>
  

1. Load the editor with following content:

   <table style="width: 500px;">
   	<tbody>
   		<tr>
   			<td>
   				&nbsp;</td>
   		</tr>
   		<tr>
   			<td>
   				&nbsp;</td>
   			<td>
   				cursor here</td>
   		</tr>
   		<tr>
   			<td>
   				&nbsp;</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   

2. Place cursor in the last cell of the second row;
3. Insert column after/before

• Actual Result: Table remains unchanged. (Edit: fixed ~3.5.3)

1. Insert row after/before

• Actual Result: Row inserted with only one cell.

1. Prepare the editor with the following configuration, to avoid nested font family style:

   config.font_style =
   	{
   		element		: 'span',
   		styles		: { 'font-family' : '#(family)' },
   		overrides	: [ { element : 'span', styles : { 'font-family' : null } } ]
   	};
   
   

2. Load the the following content and selection:

   <span style="font-family:lucida sans unicode,lucida grande,sans-serif;">some [sample] text</span>
   

3. Open font name combo and click on "Aria";

• Actual Result:

  <p>
  	<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">some <span style="font-family:arial,helvetica,sans-serif;">sample</span> text</span></p>
  

• Expected Result:

  <p>
  	<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">some </span><span style="font-family:arial,helvetica,sans-serif;">sample</span><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"> text</span></p>
  

1. Open sample page
2. Select sample text and apply "blue heading" to it.
3. Delete whole text
4. Press backspace button few more times to remove formatting
5. Start typing.

Result:
Firefox and Webkit- Path is showing “body h3” but the typed letters are small. If you change to source view you will see that there is no “h3” only “p”. This hasn't worked form CKEditor 3.5.3 rev [6586].

IE and Opera – the path is not refreshed but the typed letters have the blue heading formatting. In this case formatting is simply not removed. It has always worked that way for these two browsers.

1. Open replacebycode sample
2. Put the cursor inside editing area and press Alt+F10 to activate toolbar
3. Press Space or Enter key to switch to source
4. Press Space or Enter once more

Result: If you press Enter - nothing happens. If you press Space - browser scrolls down.

It looks like the toolbar is loosing focus. To switch back to wysiwyg you have to press tab, alt+F10 and Space or Enter - not very intuitive.

Reproducible in all IEs from CKEditor 3.0

• Open a sample and clear all contents.
• Type some text, hit one of the list buttons.
• Hit increase indentation.
• Hit the same list button as previously.

Expected: list is removed while margin stays attached to a p/div.
Actual: list is removed with the margin, reverting to a simple paragraph.

With JAWS opened:

1. Open link dialog;
2. Without putting anything in the URL field to trigger the invalid error;
3. Fill in the URL field, tab to the dialog buttons and shift-tab back to the input.
4. Ask JAWS to announce the field;

• Actual Result: JAWS read it as invalid text input.

With

config.enterMode = CKEDITOR.ENTER_BR

CKEditor creates paragraphs when inserting page break / horizontal line.

Result after inserting page break between two lines:

<p>
	first line</p>
<div style="page-break-after: always;">
	<span style="display: none;">&nbsp;</span></div>
<p>
	<br />
	second line</p>

and after inserting a horizontal line:

first line
<hr />
<p>
	<br />
	second line</p>

I have found some strange behaviour while pasting text marked as <sub>, under IE's

TC

• open editor
• Enter some text
• enable Subscript and enter some text
• select and copy text with subscript enabled
• press right cursor key or "End" on keyboard
• paste text
• press "End" again and paste

Actual

Under IE8 quirks:

<p>
	test<sub>test<sub><font size="1">test<sub><font size="1">test<sub><font size="1">test<sub><font size="1">test</font></sub></font></sub></font></sub></font></sub></sub></p>

Under IE6/7

<p>
	test<sub>test<sub>test<sub>test</sub></sub></sub></p>

Under Opera

<p>
	test<sub>test</sub><sub>test</sub><sub>test</sub><sub>test</sub></p>

Expected

Cursor keys should not influence pasting, and pasted subscript should be in one line, as in Opera. Perhaps additional </sub><sub> should also be removed?

Environment

IE 8Quirks, IE7, IE6

TC

• open editor
• insert form element
• insert text area and some "normal" buttons
• insert Image button with selected float: right

Expected

Image button is placed inside Form frame. (like in Opera 11.11)

Actual

Image button is placed below form.

Sample code:

<form action="send" enctype="multipart/form-data" id="1" method="post" name="Form1" target="_self">
	<textarea cols="30" name="Test text area" rows="5"></textarea><input name="Button 1" type="button" value="Button1" /><input name="Send" type="submit" value="send" /><input alt="test" src="google.com" style="border-bottom: 1px solid; border-left: 1px solid; margin: 11px; width: 12px; float: right; height: 12px; border-top: 1px solid; border-right: 1px solid" type="image" />&nbsp;</form>
<p>
	&nbsp;</p>

Environment

IE6/7, Opera

TC

1. create table with header row and split one header cell vertically

sample code:

<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 50%; height: 40px" summary="Summary">
	<caption>
		Caption</caption>
	<thead>
		<tr>
			<th rowspan="2" scope="col">
				Header1</th>
			<th scope="col">
				Header2</th>
		</tr>
		<tr>
			<th scope="col">
				Split header2^</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				&nbsp;</td>
			<td>
				&nbsp;</td>
		</tr>
		<tr>
			<td>
				&nbsp;</td>
			<td>
				&nbsp;</td>
		</tr>
	</tbody>
</table>
<p>
	&nbsp;</p>

1. Set caret in Split header2^
2. select from menu Column -> Insert column before

Expected result

Column is inserted between two existing columns

Actual

Column is inserted as first column in table, and before existing two columns

Same thing happens when Insert column after is used.

Table dialog caption field doesn't allow multiple consequent whitespaces to be inserted, they will collapse into one single.

Environment

Found under Opera, also happens under IE

TC

• open image dialog
• fill all atributes on all tabs and press OK (or paste example code)

Image with link should be added

<p>
	<a href="http://dev.ckeditor.com/chrome/site/logo-ckeditor-dev.png" target="_blank"><img alt="ckeditor logo" class="test" dir="rtl" id="2" lang="pl" longdesc="http://dev.ckeditor.com/" src="http://dev.ckeditor.com/chrome/site/logo-ckeditor-dev.png" style="border-right: 11px solid; border-top: 11px solid; float: left; margin: 11px; border-left: 11px solid; width: 214px; border-bottom: 11px solid; height: 59px" title="test1" /></a></p>

• in WYSIWYG select image and copy to clipboard
• paste selected image, back into editor.

Expected

Copied image == pasted

Actual

Pasted image has no link attribute

</a><img alt="ckeditor logo" class="test" dir="rtl" id="2" lang="pl" longdesc="http://dev.ckeditor.com/" src="http://dev.ckeditor.com/chrome/site/logo-ckeditor-dev.png" style="border-right: 11px solid; border-top: 11px solid; float: left; margin: 11px; border-left: 11px solid; width: 214px; border-bottom: 11px solid; height: 59px" title="test1" />

1. Open Ajax sample
2. Type "test"
3. Select text with a mouse. It is important to select it from right to left. You can start from second "t" or from "s" or "e" but it is important to stop some distance behind first "t".

Result: In FF and Opera the buttons Copy/Cut don't get enabled. When you select text from left to right or stop in the middle of the word then these buttons are enabled.

In Webkit these buttons are never enabled (maybe this is due to security settings - didn't dig into it).

Of course after selection from right to left, copying/cutting text using CRTL+C/CRTL+X works. What is more even if those buttons were enabled you could not copy/cut text with them because of default security settings in your browser. Probably in most cases this would be just a visual change.

Affects IEs < 9:

When focus is set in legend of a fieldset, and then mode is switched to source and back, additional </BR> is added to fieldset.

Environment

linked with #6804 , Firefox 4/5b

TC

1. Paste following code into editor

   <fieldset> <legend>caption</legend> <p>keep going, CKeditor!</p> </fieldset>
   

2. Switch mode to WYSIWYG
3. Set caret in "caption"
4. Switch to source
5. Repeat steps 2-4, two times

Actual result

Additional </br> added

<fieldset>
	<legend>caption</legend><br />
	<br />
	<br />
	<p>
		keep going, CKeditor!</p>
</fieldset>

• Add the autogrow plugin to the extraPlugins directive in config.js.
• Open the readonly sample in IE.
• Add some empty paragraphs to the contents, above or beneath the existing text.
• Hit "make it readonly".

See that the height is change and the empty paragraphs collapse.

This issue was found when checking #7984

If you set config.fullPage = true; open autogrow sample and paste the below code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
	</head>
	<body>
		<p>
			This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
	</body>
</html>

You will see that when pressing Enter new paragraphs are created and editor is enlarged. If on the other hand you delete those paragraphs, you have created, you will that editor doesn't get back to its smaller size.

Reproducible in Webkit quirks-mode from CKEditor 3.4

TC 1

1. Create a link from toolbar
2. Press End to go to the end of the link.
3. ElementsPath is showing that you are still inside of the link
4. Type a few letters

Result: Letters are typed as plain text

This TC is reproducible in Opera and Webkit browsers from CKEditor 3.5.1.
Until CKE 3.5 ElementsPath was showing link and first typed letter was continuation of this link. Rest of the letters were typed as plain text.

IE and Firefox work fine in this case. They don’t show that you are inside of the link and letters are typed as plain text.

TC2

1. Type a line of text - few words ended with a link.
2. Using mouse, place the cursor inside of plain-text word.
3. Using mouse again place the cursor at the end of the line – behind the link

ElementsPath is showing that you are inside of the link but the letters typed are plain-text.

This is reproducible in IE, Webkit and Opera from CKEditor 3.0

Firefox is the only browser which works correct in this case.

Steps to reproduce

• Add to the _samples folder file named test.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<title>CKEditor Samples</title>
  	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
  </head>
  <body>
  <iframe src="replacebycode.html" width="900" height="600"></iframe>
  </body>
  </html>
  

• remove doctype from replacebycode.html
• open test.html

The result can be seen on the attached screenshot.

This ticket was first reported in forum ​http://cksource.com/forums/viewtopic.php?f=11&t=22912

To reproduce:

1. Open api sample and clean CKEditor contents
2. Press bold button and type Testing statement
3. Place cursor here Testing s^tatement
4. In insertHTML text-area paste <p>sample to be inserted by insertHTMl</p> and press 'Insert HTML'. Result should be as in finding2.JPG.
5. Select using a mouse word 'statement' and what was pasted between it. See finding3.JPG.
6. Press CRTL+B one or two times.

If you press CRTL+B two times it will cause JS error in IE8 and IE9:
IE8 yields:
Message: 'null' is empty or not an object
Line: 63
URI: /_source/core/dom/walker.js

IE9 yields:
Message: Can't get property „getParent”: Object is null or undefined
Line: 1568
URI: /_source/core/dom/range.js

This is reproducible from CKE 3.4. Before 3.4 there was no error but unbolding was weird. Some parts of text were duplicated

If you press CRTL+B once than in IE6 and IE7, the phrase 'sample to be inserted by insertHTML' gets unboladed and jumps up.

This is reproducible form CKE 3.6.1 rev [6919]. Before this revision JS error was thrown.

Issue found when reproducing #7635

1. Open replacebycode sample page
2. Paste the following code

   var doScroll = function(collapseToStart) {
    var e = CKEDITOR.instances.editor1;
    var d = e.document;
    var r = new CKEDITOR.dom.range(d);
    r.selectNodeContents(d.getBody());
    r.collapse(collapseToStart);
    r.select();
    e.focus();
    e.getSelection().scrollIntoView();
   };
   var scrollToTop = function() { doScroll(true); };
   var scrollToBottom = function() { doScroll(false); };
   				
   setTimeout(scrollToBottom, 2000);
   setTimeout(scrollToTop, 3000);
   setTimeout(scrollToBottom, 4000);
   

3. Open page in Webkit

Result: You will see that editor only scrolls down once when it has no focus. If it has focus it scrolls down-up-down.

Now add extra setTimeout function

setTimeout(scrollToTop, 1500);
setTimeout(scrollToBottom, 2000);
setTimeout(scrollToTop, 3000);
setTimeout(scrollToBottom, 4000);

If editor has no focus it scrolls down-up-down. If it has focus it scrolls up-down-up-down.

If there would be only one setTimeout function, you wouldn’t see any scrolling.

Webkit uses first function call to gain focus.

Environment

Win7 ie9, ie10platform preview, CKEditor Nightly build r7095

TC

• open any sample
• clear content
• Press form element -> rafio button
• fill all fields and check "enabled"
• press OK

Expected

Radio button is added to edit area, with Enabled status

Actual

Radio button is added, _wisually_ it is set to enabled,

• but after double click on it, status Enabled is not set in dialog window,
• switch to source mode:

  <p>
  	<input name="1" type="radio" value="1" /></p>
  

It works fine under IE8 and Chrome

Environment

Related to #6111

TC

• Open editor and insert table:

  <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
  	<tbody>
  		<tr>
  			<td colspan="2" dir="rtl">
  				<strong>1</strong></td>
  			<td colspan="2">
  				<strong>2</strong></td>
  		</tr>
  		<tr>
  			<td>
  				<strong>3</strong></td>
  			<td>
  				podział poziomy ltr</td>
  			<td dir="rtl">
  				<strong><u>4</u></strong></td>
  			<td dir="rtl">
  				podział poziomy rtl</td>
  		</tr>
  		<tr>
  			<td colspan="2" dir="rtl" rowspan="3">
  				<strong>5</strong></td>
  			<td colspan="2">
  				<strong>6</strong></td>
  		</tr>
  		<tr>
  			<td colspan="2">
  				podział pionowy ltr</td>
  		</tr>
  	</tbody>
  </table>
  <p>
  	&nbsp;</p>
  

• Switch to wysiwyg, and set cursor in cell with no. 1
• from context menu select Cell - split vertically.

Actual result

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
	<tbody>
		<tr>
			<td colspan="2" dir="rtl">
				<strong>1</strong></td>
			<td colspan="2" rowspan="3">
				<strong>2</strong></td>
		</tr>
		<tr>
			<td colspan="2" dir="rtl">
				podział pionowy rtl</td>
		</tr>
		<tr>
			<td>
				<strong>3</strong></td>
			<td>
				podział poziomy ltr</td>
			<td dir="rtl">
				<strong><u>4</u></strong></td>
			<td dir="rtl">
				podział poziomy rtl</td>
		</tr>
		<tr>
			<td colspan="2" dir="rtl" rowspan="3">
				<strong>5</strong></td>
			<td colspan="2">
				<strong>6</strong></td>
		</tr>
		<tr>
			<td colspan="2">
				podział pionowy ltr</td>
		</tr>
	</tbody>
</table>
<p>
	&nbsp;</p>

Bug found when reproducing #6775

1. In config.js set RTL language like 'he'.
2. Open link dialog and move it to the right
3. When you reach the border of browser/view pane, move the dialog to the left and bottom

Result: Dialog contents goes out of dialog borders See screenshots.

Reproducible from CKE 3.5.3

1. Paste in the following code:

   <p>
   	This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
   <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
   	<caption>
   		this is table</caption>
   	<tbody>
   		<tr>
   			<td>
   				&nbsp;</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   		<tr>
   			<td>
   				&nbsp;</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   		<tr>
   			<td>
   				&nbsp;</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   <p>
   	This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
   

2. Place the cursor inside the table and try to move it with arrows to reach the caption.

Result: It is impossible to reach the caption with arrow keys but t is possible using mouse.

1. Open replacebycode sample and clean editor contents
2. Type 'wwwwwwwwwwwwwwwwwww' or similar
3. Select whole text with a mouse
4. Set "heading 2" and font-size 14 using toolbar buttons
5. Press CRTL+C
6. The text should still selected so press right arrow to go to the end of text
7. Press Enter
8. Press CRTL+V few times (6-7 will do) or CRTL+V and Enter if cursor doesn't move to new line automatically after paste.
9. Select whole text with CRTL+A
10. Now toggle with "Align Right" and "Align Left"

Result: Empty paragraphs are inserted between lines of text.

Issue is reproducible in IE8 and IE9 from CKE 3.0

1. Place 1111.html file in samples folder.
2. Open file in a browser
3. Click inside editor and start typing (type two words, you have got 5 seconds:))
4. After editor reappears, cursor appears at the beginning of typed text but If start typing without changing cursor location old text jumps one line down, so that you have two lines of text in two paragraphs.

This issue has been reproducible in Firefox5 from CKE 3.3.1

1. Open ajax sample and paste the following code:

   <p>
   	This is some sample text. You are using CKEditor.</p>
   <p>
   	This is some sample text. You are using CKEditor.</p>
   

2. Select whole first line and apply (using Toolbar buttons): green "Text Color", yellow "Background Color", Comic Sans MS "Font Name" and Big from "Fromatting Styles"
3. Select part of text from first line and copy it using CRTL+V
4. Place the cursor inside a second line or in new third line and paste the text using CRTL+V

Result: Only text gets copied (without styles).

Issue has been reproducible from CKE 3.1 in Webkit browsers.

Issue has been reproducible in Firefox and Opera 11.50 from CKEditor 3.0.

Open replace by code sample and paste the following code:

<input class="text" disabled="disabled" maxlength="220" name="abc"
type="text" />

Try to open textfield properties dialog.

In Firefox browsers it is impossible neither with right-click menu nor with double-click.

In Opera only right-click menu works.

Using CKEDITOR.style.applyToRange to re-apply styles is not cleaning up inner duplicated styles.

For example, when applying the <b> style on the following selection:

<b>this [is</b> some] sample text

Results on this:

<b>this <b>is</b> some</b> sample text

While the expected is this:

<b>this is some</b> sample text

I'll add a TC for this.

Split from #8226

I think that many new users don't realize that they have errors in the console (after all IE is the only browser that currently shows clearly when a page has a js error). We must remember that many people aren't javascript developers, that's why they use things like the asp.net or Java adapters, they just know how to work at the server side and when they try to copy some javascript code as shown in some examples and doesn't work they don't understand what's the problem.

So I strongly suggest to change throw '[CKEDITOR.editor] The instance "' + previous.name + '" already exists.'; to alert('[CKEDITOR.editor] The instance "' + previous.name + '" already exists.'); }

Currently when user wants to add new custom skin to CKFinder not only he has to create skin.js and CSS files but also add some code in ckfinder.js file - a.skins.add('myskin', (function () {... })());.
The same thing happens when user copies one of default skins folder, renames it and makes appropriate changes. Such new skin will not be visible for CKFinder if user doesn’t add this skin to the minimized ckfinder.js.

Would be nice if this code from ckfinder.js could be moved to skin.js and the only change user should do, would be change in config.js file.

This issue was reported by user Kevinelsh on our support channel – “Support question: Customizing CKFinder Skin”.

1. Open replacebycode sample
2. Insert anchor "This is some sample text. Yo^u are using CKEditor." inside "You" word
3. Move the cursor to the beginning of line
4. Start deleting text with DELETE

Result:
When you reach "o" in "You" word and press DELETE "o" will be deleted with anchor.

Reproducible from CKE 3.6 rev [6904] in IE8

This is a followup for #7354.

It should be possible to exit from blockquotes with the ENTER key when enterMode=BR.

It's not possible to scroll to toolbar combos contents to reach the hidden options at the bottom of the list.

When you select a word close to the toolbar combos, the iOS selection markers and copy/paste balloon remain over the combo panel.

See screenshot.

When a toolbar combo is opened, one would expect to close it by tapping once anywhere in the editor out of it. Instead not happens. (It eventually closes)

Other than that, if you tap the combo again, the combo reopens instead of closing. The correct behavior here could be a workaround for the previous problem.

There is no way to open the editor context menu on iOS.

When SCAYT is enabled, it's not any more possible to type in the editor on iOS.

It's not possible to drag the dialogs by tapping and dragging on iOS.

On iOS, the first dialog field is not getting typing focus once the dialog gets opened.

On iOS, the editing area grows with the contents instead of presenting a scroolbar.

On iOS, the editor resizer is not draggable becoming useless.

On iOS, a nice balloon appears when tap and holding the finger on toolbar items. See attachment​.

Currently it shows the "JavaScript" text. Ideally, the button tooltip could be there, to help the user understand the command usage.