Custom Query

As of today, the "dialog" and "dialogui" plugins represent 35KB (23KB + 12KB) of our compressed code. Some cleanup may help, reducing it to about 30KB, which is still a big portion of the total code size (currently 120KB, dialog included). We must also consider that, during the time, the code tends to get bigger, with new features and fixes.

Considering the above problem, and also that the dialog plugin is not needed to the editor to get created into a page, we could think about a lazy loading system for it. In this way, just the very basic dialog code would endup into ckeditor.js, having the rest of its logic available into another file.

A configuration option could be used to set it up:

// Load the dialog code 5 sec after the main plugin loading.
config.dialog_lazyLoad = 5;

// Load the dialog code immediately.
config.dialog_lazyLoad = 0;

// Load the dialog code only when opening a dialog.
config.dialog_lazyLoad = -1;

An event could be fired by the dialog code once loaded, so other parts of the code (like plugins) could customize it.

We must still make it possible to optionally include the dialog code into the compressed ckeditor.js file.

It's a common use case for user to define custom logic as handler for special-keystroke on dialog field, a example for this would be 'ENTER' key by default is handled as ok and close for the dialog, whereas in find/replace dialog it actually should mean by perform next search, and consider 'ESC' as one of other cases and on. After confirm with Martin, we'll introduce special key handlers in element definition API in simple form of:

{
	type: 'text',
	id: 'findReplaceTxt',
	accessKey: 'F',
	onEnterKey: function(evt)
	{
	  //do find 
	}
}

Other special keys could be defined gradually same as the onEnterKey handler later when necessary.

upload and embed audio files that then play on an inline jquery player. One of the simplest I have seen is at ​http://wiki.github.com/rhulse/media-player/home

New table insertion should keep continuation with the element style which it break due to the selection.

Reproducing procedure:

1. Open Replace by code sample;
2. Make the selection collapsed as below:

   <p><strong>te^xt</strong></p>
   

3. Click table button to insert a 1X1 default table, and switch to source mode;
4. Check the source content.

• Expected result: The content is:

  <p>
      <strong>te</strong>
  </p>
  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
      <tbody>
          <tr>
              <td>
                  <strong>
                      <br/>
                  </strong>
              </td>
          </tr>
      </tbody>
  </table>
  <p>
      <strong>xt</strong>
  </p>
  

• Actual result: The content is:

  <p>
      <strong>te</strong>
  </p>
  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
      <tbody>
          <tr>
              <td>
                  <br/>
              </td>
          </tr>
      </tbody>
  </table>
  <p>
      <strong>xt</strong>
  </p>
  

Description

Current inline style system doesn't handle the case when selection is collapsed inside styled element correctly. A MS-Word mimics behavior should be provided to actually allow users to type in the middle with the style canceled.

Procedures

1. Open the replace by code example page in IE6;
2. Make selection as below:

   <p>This is some <strong>sam^ple text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
   

3. Click bold command to cancel the bold style

• Actual Result :

  <p>This is some sample text. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
  

• Expected Result: The document remain unchanged, but when the user begin to type from this selection point, text should in unbold style.
  

  <p>This is some <strong>sam^ple text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
  

• E.g after user type 'xxx' , document should result in :

  <p>This is some <strong>sam</strong>xxx<strong>ple text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
  

The current state of the toolbar items should be included in the title, so screen readers read it. The possible options should be, for the Bold button for example:

• CKEDITOR.TRISTATE_ON : "Bold (On)"
• CKEDITOR.TRISTATE_OFF : "Bold"
• CKEDITOR.TRISTATE_DISABLED : "Bold (Disabled)"

The language file should use a template system for these entries, like "%1 (On)".

When mouse wheel on combo dropdown, the whole document is also scrolling.

When initial a document with focus but no content, the CKEDITOR.editor::getSelection returns 'null', which disable and subsequent range requests, this bug is due to a IE bug which reporting selection which not belonged to parent document.

If there's a insertion happened after the selection range content is deleted, the inserted element is at the end instead of in the front.
Take the smiley plugin for reproducing:

1. Make the content and selection as below:

   		<p>te^xt</p>
   		<ul>
   			<li>te^xt</li>
   		</ul>
   
   

2. Open the smiley plugin to insert a motion;

• Expected Result:

  <p>te<img alt=":)" title=":)" ...></p><ul><li>xt</li></ul>
  

• Actual Result:

  <p>te</p><img alt=":)" title=":)" ...><ul><li>xt</li></ul>
  

Currently it's been unable to apply indent to the whole table.

1. Make the content and selection as below:

   ^<table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
   	<tbody>
   		<tr>
   			<td>
   				<br />
   			</td>
   		</tr>
   	</tbody>
   </table>^
   

1. Apply the Indent command;

• Expected Result:

  <p style="margin-left: 40px;">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
  	<tbody>
  		<tr>
  			<td>
  				<p>
  				</p>
  			</td>
  		</tr>
  	</tbody>
  </table>
  </p>
  

• Actual Result:

  <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
  	<tbody>
  		<tr>
  			<td>
  				<p>
  				</p>
  			</td>
  		</tr>
  	</tbody>
  </table>
  <p style="margin-left: 40px;">
  </p>
  

While having the focus inside the editor, if you scroll the containing page, the caret will stay blinking inside the editor. But, at that point, the DEL key has not action anymore. Other keystrokes will continue work correctly.

I would be great to edit content with Find/Replace dialog opened. Currently the background page is disabled when any dialog is opened.

When positioning the cursor anywhere in the document, the font name and font size dropdowns are not updated. This can be reliably reproduced in the sample: ​http://www.fckeditor.net/nightly/fckeditor/_samples/default.html.

This seems like an obvious bug, but I couldn't find any tickets regarding it.

The following code:

     var div = document.createElement('div');
     var div2 = document.createElement('div');

     var editor = CKEDITOR.appendTo( div );
      document.getElementById('tests').appendChild(div);

      var button = document.createElement('button');
      button.innerHTML = 'click me';
      button.onclick = function(){
             editor.destroy();
             editor = CKEDITOR.appendTo( div2 );
             document.getElementById('tests').appendChild(div2);
      };

      document.getElementById('buttons').appendChild(button);

Fails with:

holderElement is null

as soon as one clicks the button. I noticed this since I'm using CKeditor to implement some kind of "click & edit" rich text field, and I'm creating the containing div dynamically, each time the user clicks the field.

I could solve this by re-using the same div each time the field switches to edit mode, but that would be hacky, and I don't think CKeditor should fail here (correct me if I'm wrong, please).

Regards,

Pedro

'Select all'/Ctrl-A command is not consistence between FF and IE.

Reproducing Procedures

1. Open the replace by class example page;
2. Click on 'Select All' command, then press 'Del' key.
   • Actual Result: There's still a paragraph inside document.

Current functionality for creating tables is quite moderate. A wizard-like tool would be a great addition in my opinion. I have created such a tool myself, see ​http://www.saulmade.nl/tableWizard/ . This could be added to the editor core and be extended with often requested functionalities (like styling a cell, row or column).

Hi,

When I use the paste button (and the paste dialog is showed) the href of my link is encoded. I don't want that! This problem occurs only in Firefox and not always. I tried this also on the latest build.

Can this be fixed?

Example:

<p><a href="xxxx(25)">my link</a></p> <p>&nbsp;</p> <p><a href="../xxxx%2825%29">my link</a></p>

The copy of my link resulted in an encoded href.

In V2, we had the ability to simulate an enter keystroke with EnterKeyHandler.DoEnter(). It would be very helpful to have similar functionality in V3.

Context menu always opens next to mouse cursor, even after being triggered by key press. This is usability issue in my opinion, because mouse can be anywhere withing the browser's viewport.

I see following options:

1. Distinguish between key press and mouse click. Probably impossible, but i'm not 100% sure.
2. Simply check if mouse is inside editor's viewport and then if yes - open menu next to cursor; if not - open it next to the carret.
3. Always open context menu next to the carret.

In IE8 strict, it's impossible to move carret to the end of line if form element ends this line.

Reproduction

1. Use this content:

   <p>
   	foo^<input name="foo" type="radio" value="foo" /></p>
   

2. Try move carret to the right using arrow, mouse click or End keystroke.

Works in IE8 quirks.

When tab is selected, text inside changes to bold. This sometimes results in changed width and relocation of other tabs.

TC

1. Open Image dialog
2. Select "Link" tab
3. Select "Image Info" tab

The following case is even correct with v2.

Reproducing Procedures

1. Open the replace by class example page with the following content:

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

2. Now press EnterKey to breakline;
   • Expected Result :

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

   • Actual Result : Note that the new list item line height is messed up without some necessary content within it.

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

A very slow feedback is given when moving the mouse over the characters in the special chars dialog. This is specially noticeable with IE.

Reproducing Procedures

1. Open the replace by code example page with the following config options:

   tabSpaces : 4
   

2. Switch to 'source' mode, focus the text area, then press 'Tab Key'

• Expected Result: Four spaces are inserted.
• Actual Result: text area is blured.

Reproducing Procedures

1. Open the attached example page in Firefox.
2. Move the cursor at the end of first line, press 'Enter'.
   • Actual Result: The new line is collapsed.

It is not easy to get know how to switch tabs in dialogs using keyboard.

A list with active keystrokes is needed.

When comparing the IE+Quirks dialogs, they are a bit smaller in width than IE+Standards.

It is impossible to remove preview from Image dialog using dialogDefinition (_sample/api_dialog.html ).

Preview area doesn't have ID. getById( 'ImagePreviewLoader' ) is also called many times without checking.

To reproduce:

• Please add the following lines to samples/api_dialog.html:

  37. if ( dialogName == 'flash' )
  38. {
  39. 	var infoTab = dialogDefinition.getContents( 'info' );
  40. 	infoTab.remove( 'preview' );
  41. }
  

• Add also 'Flash' to toolbar definition in the same file.

• Open flash dialog.

Result: JS error:

dialog.getContentElement("info", "preview") is undefined
http://localhost/edytor/CKEditor/trunk/_source/plugins/flash/dialogs/flash.js
Line 324

• Insert the following content into Source mode:

<form enctype="text/plain" method="post" target="_top">
	<p>
		<br />
		1111</p>
	<p>
		2222</p>
	<p>
		3333</p>
	<p>
		4444</p>
</form>

• Back to WYSIWYG

It is not possible to remove FORM element without removing all content.

Element path lacks borders in HC mode

See #4122 for a concrete example of it, though we've already provided a temporary at that ticket, a general solution should be found.

Sometimes inline style should own priority, style with higher priority should be applied at a more high level. Here's a concrete example

Reproducing Procedures

1. Open the 'replace by class' sample page;
2. Load the following content with selection:

   <p>
   	<strong>[some</strong>test<strong>text]</strong></p>
   

3. Apple 'Line Quatation" from 'Format' combo;
   • Actual Result:

     <p>
     	<strong>so<q>me</q></strong><q>test</q><strong><q>te</q>xt</strong></p>
     

   • Expected Result: The quatatoin style doesn't break into pieces

     <p>
     	<strong>so</strong><q><strong>me</strong>test<strong>te</strong></q><strong>xt</strong></p>
     

Migrated from ​forum thread.

TC

1. Open ​demo page.
2. Execute following code to move editor above the header.

   $("#header").before( $("div.demo") )
   

Result: Editor's content changes to "null" and it's not editable.

We should have a config entry for initial maximize as we have with 'show block' plugin.

Custom plugins and extensions are able to extend the list of loaded styles in the styles plugin. Unfortunately the styles plugin does not reflect dynamic changes to its list of styles and requires a reload of the whole editor to reflect the new options.

Ideally the editor should provide a way for any plugin to be reloaded without requiring the whole editor to be reloaded. Alternatively, a simpler approach to this problem would be to allow just the styles plugin to reload its data dynamically, through some additional API.

Steps to reproduce:

1. Press "Form" button and create a form (with name and action)

2. Place mouse cursor inside of the form, hit "Selection field" button, size: 2 lines, add two random options.

3. Press "OK" to close the dialog and insert the element

4. Cursor is now placed straight after created element

5. Hit enter, you should see a new empty "Select" element created below the "real" selection field that we have just created.

Confirmed in FF 3.5 and FF 3.0.

This is a minor thing, but just doesn't look nice.

If you want to create a link, select Link Type = "Link to anchor in the text", then the table that is displayed below has width set to 260px an is centered. If you choose "E-mail" or "URL", you'll see that other elements have width set to 100% (or just change tab to "Target", there are also two select elements that are positioned correctly, table width is 100% and there are two cells with width set to 50%).

Perhaps another improvement would be to remove selecting "By Element Id" it there are no anchors with id (it is impossible to set the id of an anchor with CKEditor).

The toolbar toggle button can not be given focus when tabbing through the toolbar items. It also does not display any tooltip text when you hover over with the mouse.

go to the demo and click on the image dialog. notice that there is no space between the "Align" label and the selectbox.

to reproduce:
open the "multi-language interface" demo and choose a language that has long caption in the align field (Hebrew or Hungarain for example).
open the image dialog.
open the "align" text box to see all the options. notice that some of them are being amputated.

FF3: List indentation change relocates caret.

Reproduce

1. Use following content:

   <ol>
   	<li>
   		LI
   		<ol>
   			<li>
   				LI^
   				<ol>
   					<li>
   						LI</li>
   				</ol>
   			</li>
   		</ol>
   	</li>
   </ol>
   

2. Press Decrease Indent button
3. Result is visible on attached screenshot. Wrong caret position is indicated with red line.

Reproduced in FF3 quirks, works fine in FF2. CKEditor 3.0 is also affected.

By default, shiftEnterMode is set to ENTER_BR, and Shift+Enter will insert <br> under <li>.

To Reproduce

• Add following settings to config.js.

  config.enterMode = CKEDITOR.ENTER_BR;
  config.shiftEnterMode = CKEDITOR.ENTER_P;
  

• Open sample page.
• Click "Numbered List" or "Bulleted List" button from toolbar.
• Type some text.
• Move caret at the middle of text.
• Press Enter from keyboard.
  • expect: <br> is inserted
  • actual: next <li> is created

The current behavior for the Print command is printing the contents as we see them in the editor, not as they will be in the final output. So, anchors, flash placeholders and anything else that is editor specific will be visible in the print.
We should change the print plugin to instead print the outputted document (just like preview).

Recreate Bug

Use Firefox (I tested on both Windows FF 3.5.7 and Linux FF 3.5.5) and the ​online demo and perform the following steps.

Setup

1. Click in the editor and remove all content i.e. <CTRL> + <A> then <BKSP>
2. Type or paste in: foo bar baz
3. Double-click bar and make it bold. Notice That FF on Linux selects only the word bar on double-click. Chrome and IE8 on Windows select the word plus one trailing space, which also gets the bold style.

Test 1

1. Place the cursor anywhere in the word baz then move left with the arrow key to the end of the word bar. Notice that the B button is NOT active and the status bar displays only body p.
2. Use the arrow keys to move left then right one character, returning to the same position. Notice that the B button is active and the status bar displays body p strong.
3. Use the arrow keys to move right then left one character, again returning to the same position. Notice that the B button is NOT active and the status bar displays only body p.

This inconsistency is confusing my users and is likely related to the odd behave I will describe next.

Test 2

1. Again, place the cursor to anywhere in the word baz then move left with the arrow key to the end of the word bar.
2. Backspace to the end of the word foo, completely deleting the word bar and the space between foo and bar.
3. Type <space>bar to replace the original text. Notice that the text is bold again. But rather than a STRONG tag we have a SPAN with inline style.

Unless you delete both foo and bar you cannot get rid of the littered inline style. These tests exhibit the same behavior using italic and underline, and indeed my own custom styles. This behavior is not exhibited using Chrome nor IE8. I have tested this in 3.01, 3.02 and 3.1. All exhibit the bug in FF only.

This causes the editor to lose focus and causes the editor to lose focus, scroll somewhere offscreen and remain inaccessible due to the scrollbar having been disabled through javascript. Pressing tab will eventually circle you back around to get the editor back in focus, but not a solution by any means.

I quote from the manual : "In-page settings can be passed to any of the editor instance creation functions, namely CKEDITOR.replace and CKEDITOR.appendTo."

​http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations

I use :

function ckeditorInit() {

    if (editor) /* If we already have an editor, let's destroy it first. */
    editor.destroy(true);
	CKEDITOR.replaceAll( 'rich-text', {
	    customConfig : '',
	    enterMode : CKEDITOR.ENTER_BR,
	    shiftEnterMode : CKEDITOR.ENTER_P, // Paragraphs are now made by pressing shift and enter together
	    skin : 'office2003', editor */
	    toolbar : [
		['Preview', '-', 'Cut','Copy','Paste', 'Find', 'Undo','Redo', '-','SelectAll','RemoveFormat', 'Table','HorizontalRule','PageBreak', 'ShowBlocks', '-', 'Templates', '-', 'Styles','Format', '-', 'Font','FontSize'],
		'/',
		['Bold','Italic','Underline','Strike', 'SpecialChar', 'TextColor', '-','SpellChecker', 'Scayt', '-', 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote', '-', 'JustifyRight','JustifyCenter','JustifyLeft', 'JustifyBlock', '-', 'Link','Unlink','Anchor', '-', 'Image','Flash', 'Smiley', 'BGColor', '-', 'NewPage', '-', 'Source', '-', 'Maximize'],
	    ]
	}); /* End CKEDITOR replaceAll rich-text */


};

window.onload = ckeditorInit;

All the textareas are replaced with ckeditor but the config is ignored.

So, In-page settings cannot be passed to any of the editor instance creation functions. Just some of them and not CKEDITOR.replaceAll.

Please sort this out. It's what most people would expect as "Normal" Behaviour.

Thank you.

When navigating a context menu with the keyboard, the ARROW-RIGHT executes the selected entry, just like ENTER. It should do nothing, being used just to open an eventual second level menu.

There is no visual behavior for checkboxes in dialogs when tabbing over them. We have the impression that the focus got lost.

Load 'Shared toolbars' sample from latest nightly.

The first two editors editor area overlaps the border of the editor.
If you specify a very small width to the editor (like 200), the width of the editor area will be about 320px (only the border gets the specified size).
(Chrome 5.0.322.2)

Text and Table Template uses "float: right" on the table, this then cannot be changed with the table properties dialog.

In api_dialog sample, there is too much space before My Custom Field in the customized link dialog. This may be related to a generic issue that needs investigation.

This behavior is confirmed in all browsers but IE.

1. Load the following HTML:

<p>This is <b>some sample</b> text.</p>

2. Select "This is some".
3. Click the Bold button.

Current results:

<p><strong>This is </strong><b><strong>some</strong> sample</b> text.</p>

Expected results:

<p><strong>This is some</strong><b> sample</b> text.</p>

With IE8 with Compatibility mode:

1. Load the following HTML:

<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>

2. Select Lines 2 and 3.

3. Click the Div Container button.

4. In the Advanced tab, set the Style field to "border: solid red".

5. Confirm the dialog.

Note that there will be extra (unwanted) space at the top padding of the created div. When moving back and forth to source, that space disappears.

If I put a background image behind my H1 tags in the editor css, that background image shows in the headings when you click the styles drop down in the editor. I'll attach a screenshot to show what I mean.

To reproduce

• Open a new editor
• Click on the B button and type some text.
• Place the caret in the beginning of the text
• Click again on the B button. Notice that the the button is not unselected.
• Type some text. notice that noe the button is unselected.

I can confirm that the new version fixes the img align= problem. Would it be possible/difficult to add support for replacing the style= with a CSS class for more consistent design (similar to the justifyClasses and indentClasses)? Maybe call it imageAlignClasses...

When editor is running inside an ​modeless dialog of IE, clicking on all toolbar commands will cause the focus transferring from the dialog back to the main window, which brings a major problem for continual editing experience. See attached sample page to reproduce.

Reproducing Procedures

1. Load any of the sample page and fill the editor with the following contents and selection:

   <table>
   	<tbody>
   		<tr>
   			<td>
   				^text</td>
   		</tr>
   	</tbody>
   </table>
   

2. Open 'Div Container' dialog and insert a default div.
3. Right click to open context menu;

• Expected Result: Options of 'remove' and 'edit' the div appear in menu.
• Actual Result: There's no optoins to modify the inserted div.

This ​screencast in IE demonstrates that Smiley icons are displaying in a fly-in way on slow connection thus break the layout of dialog.

It's not able to move cursor after the following elements at the end of document:

• ul/ol
• form
• blockquote

The unexitable elements list should expand to consider these elements.

1. Open Ajax Sample.

2. Click the Replace icon on the editor toolbar.

3. Attempt to find & replace some text within the page content.

The user should have the option to find text before replacing it, as he/she won't always want to replace a particular occurrence of some text.

Note: Text can be found through the Find tab & replaced specifically through the Replace tab but this function should & could be simplified by adding a Find button to the Replace tab.

Environment

IE6/7

Reproducing Procedures

1. Open any of the sample page;
2. Insert a textarea with all fields filled;
3. Switch to 'Source' mode and switch back;
4. Open 'Text Field' dialog through context menu;

• Actual Result: 'Columns' field value is missing.

Reproducing Procedures

1. Open any of the sample page, load the document with the following content and selection;

   <p> [some sample] text </p>
   

2. Apply the 'Background-color' style with 'red' value.
3. Make the following selection based on the result document.

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

4. Apply the 'Font-size' style with value '72pt';
   • Actual Result:
     1. Firefox, IE8 and Safari:
     2. IE6/7:

• Expected Result:
  

Steps to reproduce

Create new dialog without set id attribute for element or open one old dialog and remove id attribute of element:

CKEDITOR.dialog.add( 'bulletedListStyle', function( editor )
	{
		return {
			title : editor.lang.list.numberedTitle,
			minWidth : 300,
			minHeight : 50,
			contents :
			[
				{
					elements :
					[
						{
							type : 'hbox',
							widths : [ '25%', '75%' ],
							children :
							[
								{
									label: editor.lang.list.start,
									type: 'text',
									setup : function( element )
									{
										var value = element.getAttribute( 'start' ) || 1;
										value && this.setValue( value );
									},
									commit : function( element )
									{
										element.setAttribute( 'start', this.getValue() );
									}
								},
								{
									type : 'select',
									label : editor.lang.list.type,
									width: '100%',
									items :
									[
										[ editor.lang.list.style_1 , '1' ],
										[ editor.lang.list.style_a , 'a' ],
										[ editor.lang.list.style_A , 'A' ],
										[ editor.lang.list.style_i , 'i' ],
										[ editor.lang.list.style_I , 'I' ]
									],
									setup : function( element )
									{
										var value = element.getAttribute( 'type' ) || '1';
										this.setValue( value );
									},
									commit : function( element )
									{
										element.setAttribute( 'type', this.getValue() );
									}
								}
							]
						}
					]
				}
			],
			onShow: function() 
			{
				var editor = this.getParentEditor(),
					element = getListElement( editor, 'ol' );

				element && this.setupContent( element );
			},
			onOk: function()
			{
				var editor = this.getParentEditor(),
					element = getListElement( editor, 'ol' );
				
				element && this.commitContent( element );
			}
		}
	});

• Expected: all 'commit' and 'setup' method of element will execute
• Result: only the last element have that behavior

Context menu may became partially invisible (unusable) if it is positioned above the cursor (i.e. there is no space for context menu to be displayed below cursor).

Can be easily reproduced with SCAYT enabled - when there are SCAYT items in the menu, also may be reproduced with table menus.

Current behavior: if there is no room for the menu under the cursor it is displayed above the cursor position, and if there is no room for the whole menu above cursor position it becomes partially invisible

Expected behavior: if there is no room for the menu under cursor position then the room above cursor position should be evaluated - if there is a room for the menu - menu should be displayed above cursor position, if there is no room for the menu, it should be displayed strating from the top of the document visible part (i.e. top: 0).

Like MS Word, the first option in the Styles combo should be "Remove format" as it's clearly related to the Styles so it's easier to find for new users, then people can opt to remove the button from the toolbar.

This issue is partly related to #5434. On a 64-bit server, the fix for #5434 works but on a 32-bit server a different error occurs.

The issue is that 32-bit IE does not appear to support IPv6 addresses correctly, especially when getting document.domain. IE truncates the ip address when it reaches the first colon ":" in the address. This causes "access denied" errors when new IFrames are opened by CKEditor.

On (32-bit) IE:

document.domain = "[fe80:"
window.location.hostname = "fe80::fe80:fe80:fe80:fe80" 

A work-around is required for this IE bug.

1. Load the following content with selection in editor;

   <p>paragraph</p>
   <table>
   	<tbody>
   		<tr>
   			<td>
   				[cell]</td>
   		</tr>
   	</tbody>
   </table>
   

2. Open context menu on the selection, select 'Column' -> 'Delete Columns'.
   • Expect Result: The entire table is removed.
3. Click on 'Undo' once to revert the deletion.
   • Actual Result: the table is brought back but the cursor is not blinking inside the paragraph instead in the cell.
   • Expected Result: both content and selectoin should match the original state.

1. Load the following content with selection in editor;

   <table>
   	<tbody>
   		<tr>
   			<td>
   				some [mispelled] word</td>
   		</tr>
   	</tbody>
   </table>
   

2. Open context menu on the selection, make sure the selection overlaps exactly with the underline marker.
3. Click on either 'Delete Cell'/'Delete Column'/'Delete Row';
   • Actual Result: Error thrown and there's on deletion happens.

Reproducible in all browsers, error stack in Firefox:

row is undefined
http://ckeditor.t/projects/3.3.x/_source/plugins/tabletools/plugin.js
Line 181

I got this code from #4647:

1. Go to ckeditor.com/demo in IE8 and paste the following into the source:

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

2. Right click the image to open the context menu or select the image and click the image button.
3. Image Properties option is not there or it loads the dialog with empty fields.

Note that the first time I right click the image I don't get the "Image Properties" option. However, if I then right-click on the image again OR if I left click the image and then click the Image button, I get the "Image Properties" option and the dialog loads correctly.

When I create a list <ol> elment under a <p> element

• The example is shown as follow:

  <p>
  	test</p>
  <ol>
  	<li>
  		li</li>
  	<li>
  		li</li>
  </ol>
  

• when I press delete after the last character of 'test', the ckeditor will prduce a bug, the example is shown as follow:

  <p>
  	test</p>
  <p>
  	<li>
  		li</li>
  </p>
  <p>
  	<li>
  		li</li>
  </p>
  

And my IE version is IE8.0.6001.18702, Os is Windows XP + SP3, ckediotr version is 3.3.1

However when I use win7 + IE8.0.7600.16385 to test this example, the bug doesn't appear!

I am looking forward your reply!

Best regards,

Littlepower

Currently, styles can be like this:
[

{name: 'myP1', element: 'p', attributes: {'class': 'class1'}},
{name: 'myP2', element: 'p', attributes: {'class': 'class2'}}

]);

Problem 1: it is not possible to apply both classes. When a class is applied, the other is removed...

Problem 2: when applying myP1 or myP2 to a H2, H2 will be turned into a P. I would like something like this: [

{name: 'myBlock1', element: '#', attributes: {'class': 'class1'}},
{name: 'myP2', element: 'p', attributes: {'class': 'class2'}}

]);

Style myBlock1 could be applied to any block without changing its tag.
Actually, CKEditor's code seems to provide a wildcard # to target any block element but it does not seem to work as expected.

In Webkit, element.tabIndex usually returns -1 for elements that can't be focused on, and 0 for elements that can. However, Webkit also (incorrectly) returns 0 for the tabIndex of <fieldset> and <legend> elements, despite the fact that calling .focus() on a <fieldset> or a <legend> has no effect.

The fallout of this from CKEditor's perspective is that if you have the following structure:

<form>

<textarea class="ckeditor" name="wysiwyg"> </textarea> <!-- possibly other content, all of which has tabIndex of -1 --> <fieldset>

<input type="text" name="other_input" />

</fieldset>

</form>

then when you try to use the tab key to navigate from the wysiwyg element to the other_input element, you'll appear to get "stuck" inside the wysiwyg element. What happens is that the tab plugin sees that the <fieldset> appears to have a tabindex of 0, and hence calls the fieldset's .focus() method instead of the other_input's .focus() method.

I've confirmed this both in 3.3.1 and trunk. Attached is a page (intended to be put in the _samples/ directory) upon which this bug can be seen.

My first suggestion is to patch core/dom/element.js to specifically check the tabIndex attribute (which doesn't appear to be bugged) for <fieldset> and <legend> elements. I guess that's a bit of a hack, since someone -could- wish to assign element.tabIndex directly from JavaScript - but I've no idea how to handle that cleanly.

Any better ideas? Patch attached just in case that really is the best way.

I've worked around this in my own code by monkey patching getTabIndex from core/dom/element.js to just always return -1 for <fieldset> and <legend> elements. Not pretty, but fine for the site that I'm working on at the moment.

Naturally I've reported this to Webkit. See ​https://bugs.webkit.org/show_bug.cgi?id=42765

When I attempt to move a textarea (turned into a CKEditor) using the jQuery-UI framework, the moved textarea freezes up and doesn't allow any editing. I have attached a file that demonstrates this issue and I really hope there is some temporary workaround!

In MS Word, Google Docs, etc if you type in:

• Some Text

The editor automatically creates a bulleted list. This is very helpful to users because it's fast and doesn't require the user to stop their train of thought.

If CKEDITOR had this it'd be huge.

I'm using fakeobjects in a custom plugin. This plugin creates a div element, which is inserted as a fake element in the editor.

Problem is that the fake element is an image, so using 'editor.insertElement()' function inserts the element inside a paragraph, when it should be inserted outside the currently selected element.

I have created a custom template and added it to the list of templates. It outputs a generic embedded audio file using an object and embed tag. However, in IE6 and IE7, when the markup is placed into the editor, the embed tag and all but one of the param tags are stripped out. It seems to only way to get this to not happen is to set the embed type to "application/x-shockwave-flash". So, in essence, this bug does not occur for embedded flash content.

Here is the markup added to the templates list:

<object id="audio" width="0" height="0"><param name="console" value="AudioPlayer" /><param name="controls" value="audioWindow" /><param name="autostart" value="true" /><param name="src" value="YOUR_AUDIO_FILENAME_HERE" /><embed name="audio" width="0" height="0" src="YOUR_AUDIO_FILENAME_HERE" console="AudioPlayer" controls="audioWindow" autostart="true" /></object>

In IE6 and IE7, the result added to the editor is:

<object id="audio" width="0" height="0"><param name="console" value="AudioPlayer" /></object>

I have tried with many different variations of the object, param and embed attributes all with the same result. However, I can cut/paste the code into the editor and it is not stripped out so it seems to be somehow related to the template functionality.

Firebug is breaking on t.getNative().createRange is not a function Line 118 in ckeditor.js as soon as the image plugin is opened by clicking on the toolbar icon for the image plugin.

Reproduce : Firefox with firebug installed, script tab enabled and open. Visit ​http://ckeditor.com/demo and monitor the script tab. Press the blue play button in firebug to skip through the first _gat is not defined error (That's the standard bad js google offer you for tracking and nothing to do with this bug,) Now click on the Image plugin icon in the CKEditor instance in the demo. You will see this reported bug. Then stepping through that one, the next is : x is undefined Line 118 and then finally : ae[ag] is undefined Line 94.

So really, it's three bugs but they all stem from the same place and can be stepped through as described above. All three undefined.

When using common PC mouse with Apple Mac right mouse click on underlined word doesn't show SCAYT context menu.

Table cells need the ability to set the border-top, border-bottom, border-left and border-right properties so that you can set the border width, color and type as desired for each cell. In particular, it is currently not possible to set the border-top for one cell to none.

It would also be helpful to be able to set a style and class tags for a cell like you do on the advanced tab of the table properties page.

In general, it would be great to have an advanced tab for cell properties allowing you to set more things for each cell.

In chrome an additional request is produced whenever I open the image dialogue and then ok/cancel it.

1. Open ckeditor.com/demo and open the developer tools to track requests.
2. Click the 'Insert Image' button to display the image preview dialog.
3. Click Cancel.
4. A request is made relative to the current page location (so the html page ckeditor.com/demo) - The console also displays the warning 'Resource interpreted as image but transferred with MIME type text/html'

It looks like its caused during the dialog cleanup. The <img> tag src attribute is set to '' in /plugins/image/dialogs/image.js - which causes a relative request.

Browser: chrome 5.0.375.86 OS: Ubuntu 9.04

Hi,

My name is Micha Kaufman, from Pixiesoft. Small Israeli software company.

Few years ago we made a very nice WYSIWG editor, pretty much like CKEditor. we called it "RichtextArea", you can see the demo at:

​http://www.pixiesoft.com/richtextarea/samples/sample10.htm (works under IE only - we're not as good as you are....:-)

(The demo is the only page I can show you, as all other pages are in Hebrew)

I would like to help you to improve your product, by sharing some knowledge we have, and/or ideas to improve your product.

for instance, we've made a very simple (but usfull) button that embed YouTube video. (in the demo you can find this button in the most-right side of the middle buttons row). Click on it, and paste the "embeded code" from any youTube video.

Our code checks that it looks like normal youTube code (and not malicius script), and insert it into the HTML. it also adds "wmode="opaque" to avoid IE bug when the movie is on top of any other element.

This is one of the most wanted features in our editor, and I feel that your tool can be must better with such button, as it's almost perfect except for this one...

It's also very easy to develop, one of the easiest button we created. I can help you if you like.

Thanks, Micha

Please add the pixel dimensions to the thumbnail display in the main window frame. I know they are available when you view the image, but adding it in the main window would eliminate subsequent mouse clicks. Thanks.

Then a minimalistic toolbar could be shown when the ckeditor is a (small) component of some window and an elaborate toolbar when maximized/full screen.

The advantage would be having as much workspace as possible in a small editor instance where mostly text is typed. And not having to manually select a larger toolbar when clicking 'maximize' when a larger workspace and more toolbar options are required.

Hello, I have a Windows application (vs 2008).In a user control, I use a WebBrowser to put in the CKEditor 3.5.In this case, there are features that are not right. For example, theDropDownList Format, Styles and Fonts. If you create a table does not workthe menu options to add row, column, etc ...I tried using the CKEditor in a form with a webBroser and workingproperly. Therefore, the cause appears to be the user control.You can tell me a solution to this?

Attached an example: CKEditorWin is the startup project and on the website are the 2 CKEditor Form1.aspx the url of each webbrowser should be CKEditorWeb web project

Thanks

edited
Seems that we problem with WebBrowser control and CKEditor. Check comment:9 for more details

Scenario 1:

When user clicks bullet/numbered list button and then selects style/color of the text, then the color/style of bullets/numbers in lists should automatically change to style/color that we have selected

Scenario 2:

When user selects style/ color of the text first and then clicks the bullet/numbered list button, then the color/style of bullets/numbers in lists should automatically change to style/color that we have selected

Scenario 3:

When user creates numbered/bulleted list and then applies color/style only to first character in each list item , then color/style of the bullets/numbers should automatically change to style/color applied to the first character in the list item.

Also when the user selects the list item and click Remove format it should clear any style applied to the list/bullet line.

Steps to reproduce: 1) Add text to editor instance window such that cursor is not at the beginning 2) execute (in firebug's console, for example):

if no scroll is present document.body.style.overflow = "scroll"; or, if scroll is already present document.body.style.overflow = "hidden"; CKEDITOR.instances.MyInstance.insertText('Test');

3) Note that the text has been inserted at the beginning of the text editor.

This is an issue in Firefox 3.6.13 (and I believe earlier FF versions). Not certain if it is an issue in IE.

The drag-to-resize columns feature is quite useful to users, but only accessible to users who use the mouse. This feature request is to allow keyboard users to perform the same function.

Although it is currently possible to set a width on individual cells, this does not properly resize the whole column of cells in a table.

One approach to this could be to have a dedicated Column Properties dialog that allows a user to define a width for the column of cells. This would then set the width on all cells in the column, just like the drag-to-resize feature does.

Request for normalizing cut, copy and paste events in the editor across browsers. In version 3.5.2 only the 'paste' event is relayed to the editor object. Would be very convenient if 'cut' and 'copy' could also be relayed.

The specific use case is having to add attributes to the elements in a selection prior to cutting/copying. These are then parsed when pasted back into the editor.

Some quick research gave me the following summary:

I ran the following code in each of the browsers' developer tools

var body = CKEDITOR.instances.editor1.document.getBody();
var logger = function (name) {
    return function () {console.log(name);};
};
body.on('beforepaste', logger('beforepaste'));
body.on('paste', logger('paste'));
body.on('beforecut', logger('beforecut'));
body.on('cut', logger('cut'));
body.on('beforecopy', logger('beforecopy'));
body.on('copy', logger('copy'));

and registered the events fired:

Opera Version: 11.00, Build: 1156, WinXP

Cut: none
Copy: none
Paste: 
  beforepaste 
  paste

Google Chrome 9.0.597.98, WinXP

Cut:
  beforecut
  cut
Copy:
  beforecopy
  copy
Paste:
  beforepaste
  paste

Firefox 3.6.13, WinXP

Cut:
  cut
Copy:
  copy
Paste:
  beforepaste
  paste

IE8, Windows Server 2003

Cut:
  beforecut
  cut
Copy:
  beforecopy
  copy
Paste:
  beforepaste
  paste

IE also fires extra unlisted ones due to calling "queryCommandEnabled('paste')" in clipboard plugin.

Typing www.test.com and hitting enter only generates a link in IE.. Tested on Chrome 10, Firefox 4 and Opera 11.

1. ckeditor_basic_source.js loads ckeditor.js instead of source files.
   
2. CKEDITOR.status == 'basic_ready' after loading of editor when ckeditor_source.js is used.

Steps to reproduce the defect:

Scenario 1

1. Open the Ajax sample.

2. Copy the indented text from the sample doc IndentedParagraphs1.doc

3. Paste the content into the editor.

Result: The indented paragraphs seem to display fine (see screenshot).

Note: The indentations in IndentedParagraph1.doc are made by typing a line of text. Then press Enter & TAB. Type another line of text. Then press Enter & TAB twice. Then type another line of text.

Scenario 2

1. Open the Ajax sample.

2. Copy the indented text from the sample doc IndentedParagraphs2.doc

3. Paste the content into the editor.

Result: The last 2 paragraphs are not indented as they should be (see screenshot).

Note: The indentations in IndentedParagraph2.doc are made by typing 3 lines of text. Place the cursor at the start of the 2nd paragraph & press TAB once. Then place the cursor at the start of the 3rd paragraph & press TAB twice.

Word has different mark-up depending on how each indentation is created.

Reproducible in IE7, IE8 & FF 3.6.15

We would like to be able to set a default font for text in the editor. We realise this is currently possible using config.contentsCSS to specify a CSS file which defines the default stylings. However we require the default font styling to be stored within the document instead of in an external CSS file.

For example, if the default font is set to Arial, then the text entered in the editor should be wrapped in a span tag and the font family inline style should be set to arial by default e.g.

<span style="font-family: arial;">sample text...</span>

Would it be possible to implement a config option to specify a default font that will be applied like this to all text in the editor unless the user specifies a different font through the font drop down field? Alternatively could you provide an extension point that we could hook into to apply styling like this to text before it is inserted into the editor?

Note: This request came from a customer and it is a feature that would be benificial in many of our products.

Open editor and paste the following code:

<pre>
line1

line3
</pre>

• Toggle to WYSIWYG mode
  
• Put cursor to the second line
  
• Right click (notice that all content are selected now) and select Paste from context menu
• After pasting all content of pre block will be replaced with new content

With the following ​changes the popup plugin was extended with window features, but it is still impossible to specify the popup windowName. It would be nice to add support for it, otherwise the file browser is opened in a new window each time (even if the corresponding window is already opened).

The popup function in the CKEditor/trunk/_source/plugins/popup/plugin.js can be adjsuted to accept windowName:

popup : function( url, width, height, options, windowName )

Thank you in advance!

1. Go to ​http://ckeditor.com/demo
2. Scroll the editing area to the bottom and click at the end of the document. The insertion point should be at the end now.
3. Run the following code in console or firebug or via javascript: in the address bar.

var e = CKEDITOR.instances.editor1; var d = e.document; var r = new CKEDITOR.dom.range(d); r.selectNodeContents(d.getBody()); r.collapse(true); r.select(); e.focus(); e.getSelection().scrollIntoView(); 

In FF4, the cursor doesn't scroll into view, but if you use the scrollbar of the editor to scroll up, you'll see the cursor is at the beginning of the document.

• Got to ​http://ckeditor.com/demo
  
• Click in the editing area
  
• Ctrl-A to select all
  
• Ctrl-C to copy selection
  
• Ctrl-V to paste and replace selection
  

FF4: Result looks pretty much the same as it was

Chrome: All text is bold

IE9: All text is bold and font size is 3 times as large

Opera: Doesn't work at all. Neither Ctrl-C or Edit -> Copy seem to actually copy the content, so Ctrl-V just pastes whatever was previously on the clipboard

This happens in Firefox 3.6 and 4, Chrome 10, and Safari 5. It does not happen in IE7, IE8, and IE9.

1. Create a list
   
2. Select the text that you want to become the list
   

2.A.1 Click anywhere on the first line of the list
2.A.2 Home key
2.A.3 Shift-Down
2.A.4 Repeat 2.A.3 until last line is selected
or
2.B.1 Click before the list item marker
2.B.2 Shift-click before the first free line after your list.

3. Click on Numbered or Bulleted list button on the toolbar
   
4. Click on the Increase Indent button on the toolbar
   

Compare this to changing step 2 to selecting the list from the middle of the line's text.

This can also be done by selecting a list that has already been created in the same way.

I was able to reproduce this with the nightly build as well.

When opening the editor in full screen the right click context menu us not opening, after figuring it out and swithcing to normal mode(not full screen) i found the contenxt menu opened somewhere on top of the document outside of the editing area. Tested in IE8,IE9,Chrome. in FF it works good.