Custom Query

When javascript code is inserted in source mode in the middle of html code and it has spaces in the closing script tag, rendering in display mode fails.

i.e. <script>alert("hello world!");< / script>

To reproduce:

1) Using Apple Mail, copy a fragment of text with a couple of paragraphs of text 2) Paste it in coeditor (for example, in the demo: ​http://ckeditor.com/demo)

Only the first paragraph is pasted.

It doesn't happen in Chrome.

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

This seems a bit complex to follow, but it isn't so much.

Refer to the following post for extra info: ​http://alfonsoml.blogspot.com.es/2010/06/nesting-dialogs-in-ckeditor.html

The process is:

• An editor instance,
• Launches a dialog.
• That dialog launches a new one
• In this dialog we create a new CKEditor
• And now we open a dialog to create a link.

After closing the link dialog the selection isn't unlocked, and that leads to weird problems (remember, this is only for IE, other browsers work fine and that might be the reason why this problem has remained hidden for so long after I started using that setup).

Now that we know the root of the problem, the fix is quite easier.

Is it possible to review it?

Insert a table in the editor, insert another table after an empty line:

table

(empty line)

table

It is not possible to remove the line between the two tables.

• Make a list (numbered or bullet) like

          1.text
          2.text
  

• Make a new line outside the list
• Go back in the list with the cursor
• do a right mouse click outside the list to leave it
• insert another list, "1." appears and write "text"

--> the text appears one line below and if you delete the text (backspace) the "1." one line above will be deleted

When using filebrowserImageUploadUrl, CKEditor creates an iframe and loads the given filebrowserImageUploadUrl as the source for the iframe. It is my understanding that the HTML loaded in the iFrame is then supposed to execute a Javascript looking like this:

window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum, uploadedImageUrl, sucessMessage);

The problem is that when filebrowserImageUploadUrl is not on the same domain as the originalPage, browsers absolutely refuse the javascript to access window.parent.CKEDITOR, and the callback is never called back. If I analyzed the problem correclty, this could probably be made to work by creating a <script> tag instead of an <iframe>, in which case there is no cross-domain problem.

On Mac OS X the keyboard shortcut of alt + 0 (zero) is used to enter º (degree symbol).

In CKEditor this keyboard shortcut does not work. Instead a window with accessibility instructions pops up.

This behavior is very confusing for the user as it does not happen when any other text field is selected.

Proposed changes:

Use another keyboard shortcut for this window on Mac OS X that does not interfere with any system functionality.

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.

TC1

1. Open replacebyclass sample.
2. Set content: <p>aaa</p><p>bbb</p><p>ccc</p>.
3. Select second paragraph (with mouse or keyboard).
4. Press enter.

Expected: when EOL visually not selected (visual EOL selection is possible only on Webkits) enter command should remove content of selected paragraph (leaving the tag) and then create new one below.

Expected content: <p>aaa</p><p>&nbsp;</p><p>^&nbsp;</p><p>ccc</p>

Actual: Ok on Firefox, ok on IE, Visually broken on Chrome and Opera. They remove content of paragraph and create new one but this new paragraph is not visible (See image). Only after you switch to source and back second paragraph is visually added.

TC2

Steps as in TC1. but select with EOL preceding second paragraph.

Expected: EOL is selected, so delete it with the content (move caret to <p>aaa^</p> and then create new paragraph. I’m not sure why but this can be reproduced in all browsers – Just select {{{a bbb}} and press SHIFT+right arrow.

Expected content: <p>aaa</p><p>^&nbsp;</p><p>ccc</p>

Actual: Visually it works in all browsers but if you switch to source and back you will see that new extra paragraph is added. All browsers delete contents of existing paragraph and add new one (Can be checked with E.g. Firebug) but it is only visible when switching to source and back.

TC3 (Webkit only)

Steps as in TC1. but select with EOL succeeding second paragraph.

Expected: EOL is selected, so delete it with the content (move caret to <p>^ccc</p> and then create new paragraph. I’m not sure why but this can be reproduced in all browsers – Just select {{{a bbb}} and press SHIFT+right arrow.

Expected content: <p>aaa</p><p>&nbsp;</p><p>^ccc</p>

Actual: Visually it works in all browsers but if you switch to source and back you will see that new extra paragraph is added. All browsers delete contents of existing paragraph and add new one (Can be checked with E.g. Firebug) but it is only visible when switching to source and back.

TC4

I've got the following results when running these TCs (The same as for manual tests):

'test Enter key for paragraphs 1' : function()
{
	var bot = this.editorBot;
	bot.setHtmlWithSelection( '<p>bam</p><p>[foo]</p><p>bar</p>' );
	bot.execCommand( 'enter' );

	assert.areSame( '<p>bam</p><p>&nbsp;</p><p>&nbsp;</p><p>bar</p>', bot.getData( false, true ) );
},

'test Enter key for paragraphs 2a' : function()
{
	var bot = this.editorBot;
	bot.setHtmlWithSelection( '<p>bam</p>[<p dir="rtl">foo</p>]<p dir="rtl" id="target">bar</p>' );
	bot.execCommand( 'enter' );

	assert.areSame( '<p>bam</p><p dir="rtl">&nbsp;</p><p dir="rtl">&nbsp;</p><p dir="rtl" id="target">bar</p>', bot.getData( false, true ) );
},

'test Enter key for paragraphs 2b' : function()
{
	var bot = this.editorBot;
	bot.setHtmlWithSelection( '[<p dir="rtl">foo</p>]<p dir="rtl" id="target">bar</p>' );
	bot.execCommand( 'enter' );

	assert.areSame( '<p dir="rtl">&nbsp;</p><p dir="rtl">&nbsp;</p><p dir="rtl" id="target">bar</p>', bot.getData( false, true ) );
}

This was reproduced on CKEditor's demo.

Reproducing the problem

Enable SCAYT Type "This is my text." Select the final word and give it a style (ie: bold) Place cursor at the end of the paragraph using keyboard or mouse. Press enter to create a new paragraph. Type "This is my text." (NOTE: text will be bold as expected). Repeat step 5 & 6. Note that the word "This" will be underlined with a red squiggle. Control case

Make sure SCAYT is not enabled Type "This is my text." Select the final word and give it a style (ie: bold) Place cursor at the end of the paragraph using keyboard or mouse. Press enter to create a new paragraph. Type "This is my text." (NOTE: text will be bold as expected). Repeat step 5 & 6. Enable SCAYT Note that the word "This" will NOT be underlined with a red squiggle.

To reproduce:

1. Open replacebycode sample
2. Click inside editor and press CRTL+A
3. Press backspace few times quickly Two is usually enough but you may need to press it few more times. Cursor should go up a little bit.
4. Try to apply style from styles dorpdown like Blue, Red title, big, Small (it works with some styles) or underline, subscript, superscript, strike (it works with bold and italic).

Result: Cursor will go up a little bit and style/button won't get applied/activated.

Reproducible in Firefox from CKEditor 3.5.3

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]

To reproduce (don't use mouse):

1. Run JAWS and FF13 on WinXP
2. Open replacebycode sample and tab into editor
3. Press ALT+F10 and TAB to Smiley or Special Characters dialog. Try moving arrows. It works.
4. Press Escape and again press ALT+F10, TAB to Special Characters dialog. Try moving arrows.

Result: JAWS reads Cancel button and you can't navigate with arrows. This issue has been reproducible only in Firefox from CKE 3.5 - when navigation with arrows while JAWS is enabled was introduced (It didn’t work before).

Currently it is possible to escape from table or div container using arrows. New element which is in accordance with enterMode is created (perhaps the technique I have in mind can be used for lists and blockquotes).

The problem is that such new line, even if not created on purpose, stays when form is submitted. At present we advise user to filter their data when submitting but IMO this is not very friendly approach.

I think that CKEditor should control when this element should be submitted and when not. CKEditor should create this new escape element with attribute E.g. cke_escape_line.

The behaviour would be as follows:

1. If there is text or other data below block element there is no need to create new line with attribute.
2. If there is no text and this element is last in document such element should be created
3. If user types a char, pastes something or creates more empty lines below this one, attribute cke_escape_line should be dropped.
4. One exception is when user is in that last empty element and presses delete or enter. I think that in IE it is impossible to remove such element but it could be given an attribute what would mark it to remove when form is submitted.
5. When form is submitted CKEditor should look (probably only at the end of document) for empty elements with these attributes and remove them.
6. I’m not sure about user specific attributes. If such new line element has other attributes than {cke_*} then IMO it should be left and only cke_* removed.

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;

}

1. Load the following editor content:

   <ol>
   	<li>
   		foo
   		<ol>
   			<li dir="rtl">
   				^bar</li>
   			<li>
   				baz</li>
   		</ol>
   	</li>
   </ol>
   

2. Press the Outdent button

• Actual:

  <ol>
  	<li>
  		foo</li>
  	<li dir="rtl">
  		bar
  		<ol>
  			<li>
  				baz</li>
  		</ol>
  	</li>
  </ol>
  

• Expected:

  <ol>
  	<li>
  		foo</li>
  	<li dir="rtl">
  		bar
  		<ol>
  			<li dir="ltr">
  				baz</li>
  		</ol>
  	</li>
  </ol>
  

1. Load the editor with the following:

   <ol>
   	<li>
   		foo^bar</li>
   </ol>
   

2. Click on "insert page break" button

• Actual:

  <ol>
  	<li>
  		foo</li>
          <div style="page-break-after: always"></div>
  	<li>
  		bar</li>
  </ol>
  

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

Tested on Chrome and Safari, didn't check the others.

• Open a sample and clear the editor.
• Hit Bold, Underline and Italics.
• Type a bit. Text should be seen as expected.
• Hit Bold, Underline and Italics.
• Type a bit more.
• Hit CTRL+A.

Selection jumps to to the beginning of text (Chrome) / first character (Safari).

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

Open a sample with its default contents. Click underneath the contents and drag the cursor for some distance, to make a selection at the text above. The cut and copy buttons do not go enabled.
Confirmed for Chrome and Safari at least.

Confirmed on Safari and Chrome.

• Open the AJAX sample and create an editor.
• Without focusing it, hit the link button or select some sample text and hit link button it doesn't matter.
• Insert some dummy link, see that it's created and selected.
• Leaving the selection as is, type a few characters.

Note that the first character becomes a link.

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 selecting a cell with the elementspath tool and then applying cell properties, if the selected cell contains a table, the cell properties are also applied to the cells of the child table.

This is bad because it makes it impossible to apply some properties only to the cell I want. For example: I could have a cell with a red background ( the parent cell ) which would contain a table with cells of different backgrounds. If I want to change any property on the parent cell then all of the properties of this cell would be applied to all cells in the child table.

I tested this with the latest version of ckeditor from the demo page. Out of curiosity I also tested other online editors ( xinha and tinymce ) and they don't behave like this ( please don't tell me to use those, I think ckeditor is the best :) )

I'm not sure if this is a bug or just browser difference that can't be fixed.

To reproduce:

1. Copy the lists from the attached doc file.
2. Place cursor between two lists and press backspace.
3. Repeat step 1 and 2 but this time press Delete.

Results:
IE and Opera (from CKE 3.1) - Backspace joins two lists in one, Delete removes paragraph and turns first list item into paragraph.
Firefox and Safari (from CKE 3.1) - Backspace and Delete remove paragraph so that there are two separate lists one under another.

Chrome doesn't handle bulleted lists paste from MS Word 2010 - #8734

Unlike in other dialog windows (e.g Image or Link), the Cancel button is orange, not red. It has no hover effect as well.

The Templates dialog, which is using a single Cancel button as well, works fine.

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

Use the following selection and right click:

• F[oo

C]K

• Bar

Result: Bulleted list properties option is available. Now:

• Foo

C[K

• Ba]r

Result: There's no Bulleted list properties.

The problem is that this option is added conditionally depending on whether selection start is inside of a list.

Anyway, in both cases (start in list, end in paragraph and vice versa), modifying list properties doesn't change anything.

I have found it when checking #9154.

To reproduce:

1. paste the below code and switch to WYSIWYG.

   <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;"><tbody><tr><td>a</td><td>aa</td></tr><tr><td><p>a</p><table border="1" cellpadding="1" cellspacing="1" style="width: 500px; "><tbody><tr><td>a</td><td>a</td></tr><tr><td>a</td><td>a</td></tr><tr><td>a</td><td>a</td></tr></tbody></table><p>a</p></td><td>aa</td></tr><tr><td>a</td><td>aa</td></tr></tbody></table><p>&nbsp;</p>
   

2. Select all text/cells in inner table
3. Choose cell properties and apply background colour to these cells

Result: Styles are applied to outer cell as well. See video for more details.

Problem has been reproducible in all browsers from CKEditor 3.6.1 rev. [6918].

• Press 'Enter' any number of times
  
• Apply 'Formatted' paragraph format
• Type any word
  
• Double-click the word
  
• Press 'Backspace'
  

Expected Outcome: The highlighted word is deleted
Outcome: The previous line is deleted

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.

To reproduce

1. Go to the CkEditor demo page
2. Clear all content from the page
3. Click on the Selection Field icon to add a select list
4. Place the cursor in the "Text" field, type "aaa" and click on the "Add" button
5. Place the cursor in the "Text" field again, type "bbb" and click on the "Add" button
6. Click on the "bbb" field just added which is below the "aaa" field
7. Click Set As Selected Value to make "bbb" the selected value.
8. Go to source mode and notice the that selected="selected" is set on both the "aaa" and "bbb" options (see html below)

<p>
	<select><option selected="selected" value="">aaa</option><option selected="selected" value="">bbb</option></select></p>

I would expect that setting the "bbb" field would remove the selected="selected" tag on the "aaa" entry and place it on the "bbb" entry since the "Allow Multiple Selections" check box has not been checked.

When I have a paragraph with margin-left:3in (for example) and click on increase indent button, ckeditor change margin-left to 43px.

Indent plugin get only the integer part ignoring unit.

To correct I've changed _source\plugins\indent\plugin.js adding CKEDITOR.tools.convertToPx to getStyle calls inside parseInt.

To reproduce the defect:

1. Open CK Editor sample, insert a Table with default values for Rows & columns and set Table headers to both(First Row & First Column)

2. Enter the data in all table cells.

3. See that cells in first row & first columns are set as headers

4. Open Table Properties dialog and Change Table Headers to First Column.

Expected Result: All the cells in First Column remain as headers and all the cells ( except cell in first column) in first row are changed back to normal.

Actual Result: All the cells in First Column remain as headers and all the cells including cell in first column in the first row are changed back to normal.

5. Open Table Properties dialog again

Expected Result: Table Headers should be shown as First Column

Actual Result: Table Headers is shown as none.

Firefox 13 and newer no longer understand -moz-border-radius. The standard border-radius CSS property must be used instead, which is supported since Firefox 4 ​https://bugzilla.mozilla.org/show_bug.cgi?id=781059

There are some places in the ckeditor css code where you use -moz-border-radius without also using the border-radius

It is not possible to select empty table cells in IE. This is the source of merging problem.

When trying to merge empty table cells in IE the context-menu "Merge Cells" option remains disabled.

Steps to reproduce:

1. Open a new page
2. Create a table with multiple columns/rows
3. Try merging some empty cell
   1. Try selecting some empty cells (won't work)
   2. Right-click on "selected" cells to display context-menu
   3. The "Merge Cells" option is disabled
4. Try applying styles like background colour to multiple empty cells - won't work because you can't select these cells.

Reproducible in all versions of IE from CKEditor 3.0.

in ​http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/filebrowser/plugin.js#L249 this

if ( element.type == 'hbox' || element.type == 'vbox' || element.type == 'fieldset' ) 

should be something like

if ( element == undefined ) continue;
if ( element.type == 'hbox' || element.type == 'vbox' || element.type == 'fieldset' ) 

otherwise random apparently unrelated things like the link create/edit dialogue cause a RTE.

Often happens when CKEditor is used as a component in some other visual framework i.e. Ember

• Go to source mode
• Add the following code: <body><br></body>
• Leave source mode

Result: CKEditor crashes in Chrome, IE, FF and Opera. All browsers except Opera need to be restarted to unfreeze. Any variation of BR causes the crash (<br>, </br>, <br/>).

Steps:

Make it so you have an image with a link in the editor. Something like this:

<a href="http://www.google.com"><img alt="smiley" height="20" src="http://nightly-v4.ckeditor.com/3419/plugins/smiley/images/regular_smile.gif" title="smiley" width="20" /></a>

-Make the editor read-only

-Click on the image

Result: The link's url is followed and the ckeditor's content area is replaced with the destination page. This brakes the ckeditor's functionalities even if the buttons are still visible.

If the link has only text, the link is not followed and no problem arise.

Reproducible on every browser at ​http://ckeditor.com/demo with

CKEDITOR.instances.editor1.setReadOnly( true )

after adding the link to the image.

Or, since there is a button to make read-only, even more easily at: ​http://nightly-v4.ckeditor.com/3419/samples/readonly.html

The event is fired in OnPreRender(). This is not the proper place to fire this event.

It should be fired in IPostBackDataHandler.RaisePostDataChangedEvent().

In attachment you can find a pach

1. Open any sample.
2. Focus editor.
3. In CKE 4.x press ctrl+a and delete twice (to leave only <p>^</p>). In CKE 3.x press ctrl+a and delete or backspace twice.
4. Write word.
5. Press ctrl+b or apply other inline style.
6. Write word.
7. Press ctrl+a or "select all" button.
8. Kaboom! Only first word is selected.

9 .In v3 result is different - nothing is selected.

1. Delete content of the editor.
2. Write few words.
3. Add checkbox
4. Try to move caret right after the checkbox

Actual: it is not possible. Logically caret is on the right of checkbox (you can type there), but it's shown on the left.

1. Click inside of table, open table cell context menu
2. Click on one of disabled item. e.g. Merge Cells

• Actual: Menu is closed
• Expected: Menu should stay open

Affected v3.

1. Visit ​http://ckeditor4.t/ckeditor/samples/inlineall.html
2. Select some text.
3. Click link from the toolbar. Fill the form.
4. Move the dialog so it floats over the editable.
5. Click OK, and, when the dialog disappears, click the editable again. You got to be fast.
6. Toolbar is gone. You must re-enter the editable to see it again.

Current code that use deprecated env check, e.g. ie8Compat, should be migrated to env.version check.

The merge and add row/column function provided is too basic . Merge a row of 10 columns needs 10 individual click to merge.

Step 1: User adds a Table with 10 columns and 3 rows. by clicking on the “Insert/Edit” Table functionality Step 2: User wants to merge the column for the table created. If the user wants to merge the columns C, D, E, and F, the user needs to perform the following steps:

• Click each cell and right click to select “Cell”
• Merge Right.

Problem: The user needs to perform multiple clicks in order to perform a simple merging of columns in the table. If the table has multiple columns and rows and some of the columns within certain rows need to be merged then it becomes very time-consuming.

Requested Solution: The customer expects a much more easier functionality like creating a “Table” in Microsoft Word.

1. Open ckeditor demo (3.6.4)
2. Open insert textarea "plugin"
3. Set focus on textarea field and start typing and press enter key

-> The dialog is closed.

• Shift + enter works
• It seems to be that all dialogs with textareas are affected
• Works fine with 3.6.3

I think that list property dialog should have also have none option.

Based on #7822.

This is very similar to proctectedSource.

1. Based on some regex, code that is to be hidden should be recognized.
2. When switching to wysiwyg this code should be replaced by image <code>...</code> (just like with flash).
3. When switching to source this code from image should be changed back to readable code.

Please note that it is impossible to edit such code but it is still possible to remove it by removing the image.

Loading a CKEditor instance with the config setting

 readOnly = true

breaks the undo/redo user interface buttons. Ctrl-z and ctrl-y still work, but the undo and redo UI buttons never get activated, they remain grayed out.

Steps to reproduce: Load CKE with readOnly = true, set readonly to false and type. See ​This JSfiddle for an example. In the example, wait for the editor to be set editable, write something and the undo button never gets enabled but ctrl-z works. The undo buttons flash enabled every time the editor is set to readOnly false, but after focusing on the editor input they get grayed.

Tested in IE9 and Chrome13 on Win 7 64bit.

To reproduce the defect:

1. Open any sample and insert a table with one row & one column

2. Keep cursor inside the cell and open Context Menu.

3. In Context menu select Cell & Insert Cell Before option

Expected Result: A new cell inserted before the current cell

Actual Result: Nothing happens no new cell inserted

Same issue happens with Insert Cell Aafter option

Reproducible in in all IE Verions

Using the following configuration:

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

Start with this content:

<p>Test Line</p>

Highlight the text and mark it bold produces this expected content:

<p><span style="font-weight:bold;">Test Line</span></p>

Highlight the text and change the font size produces this unexpected content:

<p><span style="font-size:48pt;"><span style="font-weight: bold;">Test Line</span></span></p>

Expected content:

<p><span style="font-size: 48pt; font-weight: bold;">Test Line</span></p>

This is an issue for us because the resulting content from the editor is displayed in a page with the following css file:

*
{
    font-family: Arial, Helvetica, Verdana;
    font-size:8pt;
}

This causes the inner bold span tag to always force the font size to 8pt.

Leaving the config coreStyles set to the default also produces a similar issue because the bold span is simply replaced with a strong tag.

<p><span style="font-size:48pt;"><strong>Test Line</strong></span></p>

Currently removeFormat command may be applied only to the selection inside the editor. Thus, it's useless elsewhere - e.g. on paste.

removeformat plugin should expose command that by default is applied to the selection, but may be also to given range.

I found this ticket (​http://dev.ckeditor.com/ticket/8451) in your database from 11 months ago and it's marked closed/invalid but the issue still seems to exist.

Steps:

-Create a table -Right-click on it, pick Table Properties -> advanced tab. -Enter: background-repeat:no-repeat; in the Style box, you get background-repeat:no-repeat no-repeat;

That is invalid and shouldn't happen. This can be reproduced in your ckeditor.com/demo site as well as latest nightly build.

What's interesting is that this doesn't happen when you create a new DIV, edit it and enter the same into style box there. This seems to happen on table properties only.

Reproducible in IE, Webkit and Opera.

• Open the autogrow sample and click Maximize on the toolbar.
• Enter enough content to introduce the vertical scroll bar.
• Click the Minimize toolbar icon.

Expected result: The editor grows to fit its contents.

Actual Result: The editor has a scroll bar and does not grow to fit its contents until you click into the editing area.

Allow for adding checkboxes in word 2010 as described in ​http://www.word-2010.com/insert-a-check-box-in-microsoft-word-2010/ or use the attached docx file.

Paste checkboxes into CKEditor and notice that no checkboxes appear.

I think it would be nice if CKEditor would recognize at least some of elements presented in Legacy Forms menu (See picture).

To reproduce the defect:

1. Open any CK Editor sample & insert a table that is wider than the editor so that vertical & horizontal scroll bars are displayed (e.g. 2000px with 30 rows & 10 columns) .

2. Enter content in table cells, keep cursor in one of table cells & move either vertical or horizontal scroll bar.

Issue: In IE8 & IE9 Focus goes out of editor body where as in IE7 OR IE8/IE9 Compat view cursor jumps out of table.

It is possible to define toolbar menus in CKEditor which can be used to combine a number of toolbar icons into one collection. If toolbar menus are defined, and no config.toolbar value is provided, the toolbar is automatically generated in v4. However any icon included in the toolbar menu is included in the toolbar twice: once in the menu, and once as an individual toolbar icon.

To see an example of this, save the attached plugin and sample file into their respective directories and run in any browser.

Notice how the toolbar contains a Paste Menu which combines all paste icons into one toolbar entry. However the individual Paste icons are also available on the toolbar.

If a toolbar button is included in a toolbar menu, it should not also appear as an individual toolbar icon. Is there any way to prevent this from happening? Is it possible to exclude toolbar icons from the automatically generated toolbar if they are already part of a CKEDITOR.UI_MENUBUTTON?

Copy/Pasting a bulleted list from Microsoft Word ends up in broken text.

Pasting the bulleted list from the attached file doesn't work.

I have a feeling that it is related to the encoding of the file, since I cannot reproduce it on a newly created file

The real problem here is that if below two options are not set to false table gets broken which should not hapen:

config.pasteFromWordRemoveFontStyles=false;
config.pasteFromWordRemoveStyles=false;

The following anchor style is invisible on the list of available styles:

CKEDITOR.stylesSet.add( 'default', [
	{
		name: 'Custom anchor',
		element: 'a',
		styles: {
			'line-height': '18px',
			color: 'red'
		}
	}
]);

The following code also fails:

var range = CKEDITOR.instances.editor1.getSelection().getRanges()[ 0 ];
new CKEDITOR.style( { element: 'a', ... } ).applyToRange( range );

It is visible when accessing via getStylesSet though:

CKEDITOR.instances.editor1.getStylesSet( function( stylesDefinitions ) { 
	console.log( stylesDefinitions );
});
>>> [ Object ]

This problem is only for element: 'a'. It works with p and similar. Also in v3.

If the HTML source includes this:

<a href="">TEXT HERE</a>

...then CKeditor gets confused and won't show "Edit Link" when you right-click on "TEXT HERE".

To reproduce the defect:

1. Open Massive inline editing sample

2. Click inside any div & press Shift + Control + F10 to open Context menu.

Expected Result: Context menu opens & displayed next to current cursor position

Actual Result: Context menu opens but displayed at top left hand corner of browser. but if we use Application key Context menu displays next to current cursor position.

1. Open iframe based sample (replacebycode)

2. Click inside text somewhere in the middle & press Shift + Control + F10 to open Context menu.

Context menu opens in upper left corner of editor (iframed page)

To reproduce the defect:

1. Open the Autogrow Sample & Maximize the editor by clicking Maximize toolbar icon.

2. Enter enough content to cause both vertical and horizontal scrollbars to appear.

3. Click Minimize toolbar icon to return to normal editing mode.

4. Click Maximize toolbar once again to maximize the editor.

Issue: Editor does not return to Maximize mode correctly at all. Editor displayed off-screen. This issues was mentioned in comment 2 on defect 9311 ​https://dev.ckeditor.com/ticket/9311#comment:2 which was closed as fixed.

• Open inlinebycode sample, resize the browser so that vertical scrollbar appear and try to scroll window.

Result: Toolbar stays in viewport which is good.

• Now download attached file, put it in samples folder and open it.
• It displays inlinebycode sample in iframe.
• resize the browser so that vertical scrollbar appear and try to scroll window

Result: Toolbar doesn't stay in viewport.

Probably editor doesn't listen to parent page events.

I have a custom link picking dialog. When we upgraded from 3.6.2 to 3.6.3 (or newer), problems arose with IE: in some cases the selection that was supposed to become a link was lost. I tried to create a minimal test case, see below.

How to reproduce:

• open IE9 or IE10.

• go to ​http://venko.net/naapuri/tyo/ckeditor/3.6.3.html

• doubleclick on the word "bar" to select it

• click on the kitten

What I expected to happen:

The selection is preserved. (Well. That is actually not the standard behavior with input controls, but seems to mostly happen with CKeditor, maybe due to it using an iframe?)

What actually happened:

The selection is lost and the cursor is moved to the beginning of the document.

Other notes

The problem is somehow linked to the table. The behavior seems to have changed between 3.6.2 and 3.6.3. Try here: ​http://venko.net/naapuri/tyo/ckeditor/3.6.2.html - this page doesn't have this problem. Other versions are available in ​http://venko.net/naapuri/tyo/ckeditor/.

I didn't try to find workarounds for this yet. Binding onmousedown might help.

Since magicline is injected into editable in brings a lot of problems, especially in old IEs:

• content flickering
• unexpected scrollbars
• problems with copying
• and so on...

The idea is to keep magicline outside of the editor in a top-level document, pretty much the same way like dialogs and panels. The problem might be the CSS interaction with existing styles, which needs to be considered.

Related issues

#11270

1. Select and Copy text that already exists in the editor.
2. Paste the text somewhere in the editor. After tapping on the Paste menu the keyboard goes away.

The bug can be reproduced using the CKEditor demo: ​http://ckeditor.com/demo

This bug exists in iOS 6. There is not such a bug in iOS 5.

At the moment CKEDITOR.editor.popup() ​returns true and accessing popup's window namespace/content ​is confusing for the users.

When an instance is loaded with a custom stylesSet that contains a table or image style and there already is a table or image with that style in the loaded content, the style is not displayed in the styles combo when the table or image has the caret/focus.

Expected: the style would be visible in the combo. It works as expected with even triple nested unordered lists, but not tables or images (see example). Other elements not tested at this point, but basically all the styles combo possible elements (like div) might be good to be checked.

​Example at Jsfiddle

Tested with CKEditor 3.6.2 Reproducable in IE9, Firefox 15.0.1 and Chrome 18. All running on Windows 7.

Please see comment:5 and comment:6 for further explanation.

This issue is related to #3582 and #9330.

Since it is possible now (#3582 was fixed) to insert text for anchor in source mode it would be nice if such text could be also entered through anchor dialog.
This would allow inexperienced users for editing or removing text when it was for example pasted from word (#9330), pasted in source or written with typo.

It looks like iOS 6 is having problems when trying to display a CKEditor-generated Flash object, or at least embedded Youtube videos.
I created the embed code using the CKEditor demo and published the resulting source here: ​http://havens.no-ip.org/testembed.html
Attached is a screenshot of the resulting rendering on an iPhone with iOS 6.

When rowspan is applied columnwise to the equal amount of rows, e.g.

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
	<tbody>
		<tr>
			<td colspan="1" rowspan="3">
				&nbsp;</td>
			<td colspan="1" rowspan="3">
				&nbsp;</td>
			<td>
				&nbsp;</td>
		</tr>

...rowspan'ing the last column the same way in WYSIWIG should most probably lead to replacing all previously made rowspans and colspans with simple <td></td>, but it doesn't. It leads to strange errors and weird table behaviour.

Unfortunately this method doesn't trigger paste events.

On the demo page, edit as "Source" and paste this: <br><ul><pre>TEST</pre></ul>

This will crash the browser when trying to view or edit as html again. Tested in all browsers (Chrome, Firefox, Safari, IE 9).

Seems to be some kind of infinite loop because browser starts using lots of cpu.

To reproduce:

1. Download attached file and put it in /_source/plugins/ folder.
2. On HTML page, in instance definition add extraPlugins:'fakediv'
3. Switch to source and paste below code:

   <div class="myfakedivsframe" >&nbsp;</div>
   

4. Switch to WYSIWYG then again to Source and WYSIWYG

Result: Div will be removed.

This is only happening when there is nothing in div or just one blank space or one &nbsp; or one &nbsp; and blank space. If there are E.g at least two &nbsp; or one letter then everything is working as expected:

<div class="myfakedivsframe" >&nbsp;&nbsp;</div>

There should be a way to localize the toolbar and context menu icons.

For example, in German, the bold and italic buttons should be "P" and "K", instead of "B" and "I".

The ​original request comes from our blog.

• It's quite likely a matter of a bad bg image with CSS repeat.
• Both 3.6.4 and 3.6.5 are affected.

• Problem occurs in IE8 and IE9

Quote from ​http://cksource.com/forums/viewtopic.php?f=11&t=27337:

I'm using ckeditor version 3.6.4. The only change in config.js is adding config.enterMode = CKEDITOR.ENTER_BR

Only in Firefox (15.0.1), whenever I press enter, the paste buttons suddenly becomes disabled. Ctrl-V still works, and once I do anything else, they will become enabled again.

This issue is reproducible in 3.6.4 (I haven't checked older releases) and 4.0 Github master.

In Firefox 15.0.1, the image "Browse server" popup appears behind the main browser window. When you remove the popup and try again the popup appears in front, as it should.

Just a suggestion for future: consider adding a button active only in source mode, that comments/uncomments previously selected part of code. Would be useful for testing and debugging purposes, especially related with using of JavaScript and CSS Styling.

To reproduce:

1. Paste in the below source

   <table border="1" cellpadding="1" cellspacing="1" style="width: 500px; ">
   	<tbody>
   		<tr>
   			<td>
   				abc</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   		<tr>
   			<td>
   				def</td>
   			<td>
   				&nbsp;</td>
   		</tr>
   	</tbody>
   </table>
   

2. Switch to WYSIWYG
3. Click inside editor and press CRTL+A
4. Choose formating Normal(Div) from dropdown

Result: In all versions of IE from CKEditor 3.0, empty column will be removed.

Now editor is using a static, html5 alike DTD for the basic level of support.

The nature of html5 is DTD-less and conformance checks are based on content model that are relevant to the element context, but currently the parser is NOT handling the following cases:

1. Element with ​transparent content model.
2. Element with dynamic content model depending on attribute values, e.g. ​video
3. Other constraints like interactive element (e.g. button) must not appear as a descendant of the <a>

Prerequisites:

1. Must have Iframe button enabled
2. Must be using inline editing feature

Steps to reproduce:

1. Click on Iframe button and add an iframe

Result: You will see a placeholder image representing the area the Iframe will be occupying Expected result: You should see the actual iframe being rendered inline.

I understand that for non-inline editing this functionality could make sense. However, with inline editing a user will never be able to see what the finished content will actually look like unless all editors are removed from the page.

Example:

​http://i.imgur.com/ZYF6u.png

In the case above, the user would never be able to see his embedded video unless he logs out and inline editors are not present.

On the latest version of iOS 6, on the iPad 2 you cannot use the Rich Combo Fields, you lose your selection and the style is not applied. Steps to reproduce;

1. Access the nightly build demo site on device (At the time of writing): ​http://nightly-v4.ckeditor..com/3571/samples/divarea.html
2. Create a selection around some text (doesn't matter what text is selected, just that there is a selection of text)
3. Tap on the 'Font' menu

Result:
Page "jumps up", selection is lost but menu appears. Cannot tap on any item in the menu, tapping on the menu items causes the menu to disappear and restore the cursor on the editor. Selection is lost; cursor seems to appear where you attempted to tap on the menu item.

Expected result:
The menu should work like the desktop experience.

When toggling toolbar button by clicking on it twice, when fast enough it will display the native context menu that disturbs user.

Feature ticket based on: ​http://stackoverflow.com/questions/12914536/prevent-attributes-from-being-copied-when-entering-new-paragraph/12948962

In short: attributes and styles are copied on enter key. This should be configurable.

It is still possible to click on a dialog button after having disabling it with the disableButton method in CKEDITOR.dialog (​http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#disableButton).

When "disableButton" is called, the property "disabled" is correctly set to true and a css class is added to the button. But if you click on the button, there's no check to see if it's disabled and the event is still fired.

I think this could be fixed by modifying the code in _source/plugin/dialogui/plugin.js and adding a check for disabled before the onClick is applied.

Like this :

(line 949)

onClick : function( dialog, func )
{
    this.on( 'click', function()
    {
        if(!this._.disabled)
        {
            // Some browsers (Chrome, IE8, IE7 compat mode) don't move
            // focus to clicked button. Force this.
            this.getElement().focus();
            func.apply( this, arguments );
        }
    });
}

By the way, the css class (cke_disabled) added to the button when it's disabled does nothing and the button doesn't look disabled.

In Moono skin we used CKEDITOR.templates to create content of CSS stylesheet. CSS uses '{' and it's also part of our wildcard, so we had to use trick to make it work.

There are couple of solutions:

1. Escaping '{' by e.g. doubling. Note that escaping with '\' is not possible because it's also escape character in JS string.
2. Specifying more precise regexp for template's wildcards, so e.g. only [a-zA-Z0-9]+ will be accepted.
3. Changing wildcard format.

Solution first is ok, because it's backward compatible, but we will have to add more characters in our templates making them longer and less readable.

Third solution completely breaks backward compatibility so it's bad.

Second solution isn't fully backward compatible, but should work in 99% of cases (if we'll make good pattern) and it doesn't enlarge template and doesn't make it less readable.

1. Go to ​http://ckeditor4.t/ckeditor/samples/uicolor.html
2. Open the context menu in the second editor (turquoise), it matches editor's color.
3. Open the context menu in the last editor (inline, green), it also matches editor's color.
4. Change UI Color of the last editor, lets say... pink.
5. Open the context menu in the second editor (turquoise). It's pink.

1. Build a release version.
2. Open uilanguages.html sample.
3. Compare icon for text field in LTR and RTL language.

• Actual: it doesn't change.
• Expected: moono skin provides textfield-rtl icon, but it's ignored by builder because it's not available in forms plugin.

We cannot assume that if plugin doesn't provide RTL version of an icon it doesn't exist at all. It depends on the style of skin - imagine all icons dropping a shadow - then in RTL version all would have to have its RTL version.

Steps To Reproduce:

1. Go to the demo page in IE6 or IE7 or IE8.
2. Clear the content in the editor.
3. Type:

   foo bar
   boo far
   

4. Click on find icon
5. type foo into the find field
6. click find (foo will become selected)
7. click cancel in the find dialog
8. click 'cut' icon in ckeditor
9. (accept the permissions if the browser asks)
10. Error Invalid Argument gets thrown.

Looks like it's some issue with getting nodeValue (for nodeValue.length) within the GetRanges function of the selection plugin.

// Start the measuring until distance overflows, meanwhile count the text nodes.
var i = siblings.length;
while ( distance > 0 && i > 0 )
{
	sibling = siblings[ --i ];
	if ( sibling.nodeType == CKEDITOR.NODE_TEXT )
	{
		container = sibling;
		distance -= sibling.nodeValue.length;  <----- this line throws the error
	}
}

Same error occurs if you do a find a replace for foo then close the dialog and click cut.

Open replacebycode sample, clear editor contents with New Page button and insert table

1
Notice that cursor blinks above table cell. The same thing happens when tab between cells. See cursor.png

2
Once you have inserted table and cursor blinks a little bit above the cell start tabbing. Rows will collapse one by one. Please see "collapse Row.swf"

3
Letters show sometime after you type.

1. Insert table.
2. Click in cell 2.1, type 'ss', tab to cell 2.2 and type 'ss'
3. Tab to cell 3.1, type 'ssss', tab to cell 3.2 and type 'ssss'

Result should be seen in cells 3.1 and 3.2. Please see "lateType.swf"

• clear all contents
• change paragraph format to Preformatted
• type some text and press Shift+Enter to create new line
• switch to the Source (notice that pre block has extra line break) and go back to the wysiwyg mode. Without switching to source mode pressing SHIFT+ENTER and ENTER works as expected.
• put cursor to the empty second line of pre
• press Enter to exit from pre block

Outcome: We are still into pre block and you have to press enter one more time to get out of it.
Expected: Exit from pre block and create the new paragraph.

The problem is that enterkey plugin appends bogus br element which is converted to the invisible line break.

The current way is long and isn't minifiable at all:

node.type == CKEDITOR.NODE_TEXT || node.type == CKEDITOR.NODE_ELEMENT

We may introduce shorter version. E.g. method 'is' may be added to node:

node.is( '#doc' );
// or
node.is( [ '#text', '#element' ] );

Tokens have to be prepended with hash, because we already have is method to check element name. Also, it was used to duck typing, what would has to be fixed.

This solution's flaw is that additional check has to be done when method is called on element. Thus, we may think of other method's name specialized in type checking. E.g. node#node ( node.node( 'text' ) ).

1. Load the replacebyclass in IE;
2. Check the toolbar status without focusing the document;

• Actual: the toolbar is not properly given the initial states as in other browsers.
• Expected: the toolbar should reflects the selection as if it's anchored at the start of document, this works for Firefox and Webkit.

1. Open any dialog the first time, on IE7.
2. Note that there's a while of black-out until the dialog shows up.