Custom Query

Description: When using CkEditor with norwegian language, the dropdown/selector displaying the different format options (heading 1, heading 2 etc) hides the last character in "Overskrift 1".

Browser: Firefox 16.0.2

Actual result: A part of the last character in "Overskrift 1" is hidden.

Expected result: Show the entire text.

See the attached screenshot from ckeditor.com/demo/

Bug is reproducable in version 3.6.2 and the version current at ckeditor.com/demo/.

iOS6.0.1 create an ordered list

Example:

1. lions
2. tigers
3. mountain lions

After the last item hit enter twice. xit the list. Start typing, the focus seems to wrap down from the last list item and what I was typing got wrapped up to the last list item rather than remaining as a new line below the list. I see this behavior when the spell check is active on the text I am typing on the new line.

I have a video demonstrating this behavior.

I'm a big fan of clean and easily readable source code. I think it would be great to add an additional parameter to CKEditor SetRules() function just below 'breakAfterClose' named additionalBreakAfterClose which would add a 2nd line break after the closing tag. As a result, the SetRules function could allow for an additional line break after certain tags. I believe this could allow users to make their code easier for human eyes to read.

Current Method:

<div>I'm a happy div</div> <div>I'm another happy</div>

Proposed Method with 'additionalBreakAfterClose':

<div>I'm a happy div</div>

<div>I'm a very happy div now</div>

This is the continuation of #9478.

To reproduce:

1. Clear editor contents with CRTL+A Backspace
2. Insert default table
3. Open table properties dialog, clear width value and click OK
4. Open table properties one more time.

Result: Default table width 500px is present in width field and once you click OK table gets default width.

You have to use below code to see the bug

CKEDITOR.on( 'dialogDefinition', function( ev )
            {
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;

                // Set default table width during creation.
                if(dialogName == 'table')
                {
                    var infoTab = dialogDefinition.getContents( 'info' );
                    txtWidth = infoTab.get( 'txtWidth' );
                    txtWidth['default'] = '100%';
                }

                if ( dialogName == 'tableProperties' )
                {
                    var infoTab = dialogDefinition.getContents( 'info' );

                    var tab = dialogDefinition.getContents( 'advanced' );
                    tab.remove ('advLangDir');
                    tab.remove ('advStyles');
                    tab.remove ('advCSSClasses');
                }
            });

window.x  = CKEDITOR.editor.replace('editor1', {
    removePlugins : 'button,div,filebrowser,flash,format,forms,horizontalrule,indent,justify,liststyle,pagebreak,showborders,stylescombo,templates',
        toolbar :
            [
                ['Source', 'Table']
            ],
});

With this code bug can be reproduced in v4 but also in v3 from CKE 3.6.1 rev. [6979]

steps for recreation:

1. type in some text (E.g. 3 paragraphs with few letters)
2. select all format as some header (E.g Heading 1)
3. select all and format as list
4. place the cursor in the middle of the first list item
5. press enter twice

(you already have a weird gap between lines 2 and 3)

6. press up arrow twice (cursor is in the gap but when you start typing it jumps to point 2 and types text has no formatting )
7. write something
8. go 1 down and write something (cursor is in the gap and when you start typing text has header formatting )

-> you got

<ol>
	<li>
	<h1>as</h1>
	</li>
	<li>sdf
	<h1>sdf</h1>
	</li>
	<li>
	<h1>df</h1>
	</li>
</ol>

there is some text that is inside the li but outside the h1.

(i saw a similar ticket but for ck3 #4927)

Select all using the apple context menu.

The selection is not limited to only the text editor.

See image.

1. With enter mode BR, load any sample page in Opera;
2. Load editor with the following source:

   <hr />
   

3. Click to gain editor focus.

• Actual: One extra line created above the HR.

Currently there are some browser-specific css files in the skins, but those files are generated only by adding the overrides to adjust the behavior.

A further step would be to clean up them from properties aimed at the other browsers.

Simple example: moonoo\editor_ie8.css includes this:

-moz-box-shadow:0 0 3px rgba(0,0,0,.15);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);
box-shadow:0 0 3px rgba(0,0,0,.15)

But it's clear that for IE the moz or webkit properties are garbage and IE8 doesn't recognize box-shadow so all of that can be removed.

similar things happens with the rest of browser specific properties, anything -moz or -webkit is dead code in the IE files, and some advanced css properties can also be removed from the ie7 and ie8 versions.

And having such IE specific files, all the -ms or filter:progid can be removed from the generic editor.css file.

This is something that has to be done automatically: get the input css file and remove from it a list of rules before trying to compress it.

Benefits: Smaller footprint (faster download) and faster parser time during runtime each time the browser has to parse the css file as it has less things to care about. (As well as avoid poluting the error console and people reporting those harmless warnings as errors in the editor itself.)

Maybe it could be improved a bit?

Current design:

Less distracting background:

Considering that it is possible to have the languages configured during the build process, the builder should defined CKEDITOR.lang.languages, which is now hardcoded inside lang.js.

The cursor shape on themed ui resizer doesn't reflects the configuration value of resize_dir.

1. Open specialchar dialog.
2. See that first character is focused and highlighted.
3. Press tab.
4. Cancel gets focus.
5. Try to move focus back to chars tables by pressing shift+tab or tab.
6. Nothing happens. In all other dialogs it's possible to cycle through all inputs and buttons by tab, but not in this one.

It can be reproduced on v3 and v4.

Moving the text cursor inside a submit, textarea or such by using the arrow keys causes an error shown in Firebug: "Error: Permission denied to access property 'nodeType'" in ckeditor.js on line 13.

This will also result in the Source-button not working so that you cannot enter the source-mode. The button will work again after moving the cursor out of that place.

Here's a sample source code with which you can easily reproduce the bug by moving the cursor with your arrow keys.

Also tested this on the nightly build.

<h1>Form</h1><p><input id="upload" name="upload" type="file" /><br /><input id="submitForm" name="submitForm" type="submit" value="Submit" /></p>"

I am using Win7 Pro and Firefox 16.0.2

I'm a little bit concerned about the expected behavior of "insert column before" for the following case:

+-----+------+
| 1.1 | 1.2^ |
+-----+------+
| 2.1 |
+-----+

How it works now:

+-----+--------+------+
| 1.1 |   | 1.2^ |
+-----+--------+------+
| 2.1 |
+-----+

How it should look like in my opition:

+-----+--------+------+
| 1.1 |   | 1.2^ |
+-----+--------+------+
| 2.1 |   |
+-----+--------+

Most likely this is not an issue but it brings some confusion. The origin of this issue is in #9609.

In inline mode, where dialogs/context menus etc. are displayed in the same frame in which editable and on IEs always (even in framed editor), selection is visually lost when focus is moved out of editable. This may be confusing for users as they may think that their selection was really lost e.g. when trying to apply link to some text.

To reproduce in IE7 or IE8:

1. Use TC described in #9501 or

1. Open replacebycode sample and clear editor contents
2. Type foo bar
3. Select bar from left to right
4. Click cut icon
5. Allow clipboard access if browser asks you
6. bar gets cut but notice that cut icon is still enabled (unlike in v3)
7. Press cut again
8. Editor displays message that browser doesn't have permissions to cut and CRTL+X should be used (which is not true).
   

Of course if you select some text and press cut icon it will work as expected.

Copy pasting a HTML snippet from a browser window containing scripts opens channel for the execution of the script from ckeditor using the preview plugin.

Replication steps:

1. Create a test html page with the following content

<html> <head></head> <body>

<a href="javascript:alert('Executing

Javascript:alert()')">test</a>

<script>alert('Script Tag') </script>

</body> </html>

2. Save the html and open it using a browser.
3. Copy the content of the rendered html ( i.e the hyperlinked word “test”) and paste it in RTE.
4. Click the preview plugin in RTE.
5. In the preview window that opens, if the hyperlink ‘test’ is clicked it will execute the script.

This posses a security threat as it opens a channel for executing malicious script can be executed from ckeditor. Writing a server code to filter the scripts will not help as it might corrupt the data. Another problem is that server code will trigger only when data is posted but in this case scripts can be executed using preview pluign even before posting data.

The skin icons registration code for dev looks like complicated than it should, it should be handy for skin developer.

This 2px dark grey border isn't a problem when user intentionally focus button (by tabbing). But it's confusing in dialogs like "about", because "cancel" is focused by default. It looks strange there.

I think that 1px width border is better, because it's more natural in this skin. What's more - I like that blue color for focus in e.g. smileys - it shows that something is active/focus, not just hovered. In my opinion it's a good help distinguishing user between these states. So maybe buttons may have the same border on focus/active.

It's like a template:

• light grey for normal,
• darker grey for hover,
• color for active/focus.

Check the original issue #9641 for screenshots.

We relies on the sourcearea plugin for checking editor output on sample pages, while it's not working for the following scenarios:

• Inline editors
• Release build without sourcearea plugin.

A alternative view source feature is required on sample pages.

Found in the Image dialog:

CKEditor 4 must be compatible to be used inside Windows 8 Apps.

R&D is required on this to understand the current status and provide the necessary remedies for possible issues, as well as developer tools.

Problem

When hitting TAB, focus goes somewhere below the lower edge of the viewport (e.g. the very last editor), which might be confusing. Sample doesn't correctly express the idea of the feature.

​http://ckeditor4.t/ckeditor/samples/tabindex.html

Proposed idea

Organize editors with reduced toolbars in 2x2 grid, so moving focus between all of them with TAB is clear and visible:

+--------+--------+
|        |        |
|   e1   |   e2   |
|        |        |
+--------+--------+
|        |        |
|   e3   |   e4   |
|        |        |
+--------+--------+

To reproduce:

1. Go to Document Properties sample and open docprops dialog
2. Set document type to XHTML1.1 and click Ok.

Results:

1. If you looked on HTML with firebug or other webtool before changing the doctype in dialog and afterwards. You will notice that doctype is HTML5 declarations for both cases. You have to switch to source and back so that browser could see the difference. Reproducible in all borwsers.
2. If you click preview button and look at HTML with Firebug there will be no doctype declaration (dopesn't matter whether you have switched to source and back earlier). This is only Firefox issue. All other browsers show doctype.

These may be browser issues but

3. If you click on preview page (after setting XHTML1.1) - you are not able to save it in Chrome and Opera
4. In Firefox you are able to save page from preview but with no doctype (doesn't matter whether you have switched to source and back earlier)
5. In Chrome and Opera - you are not able to see source of the preview page
6. In Firefox when you click show source of preview page you get only JavaScript code.

Problem can be reproduced in both CKEditor 3.x and 4.x from CKEditor 3.6.

To reproduce:

1. Open UI color sample and open UI color dialog
2. Grab the circle and move it a little bit.

Results:

1. Firefox 3.6 - works rather smoothly but IMO after closing dialog it was hard to get any response from page for few seconds
2. In FF16 - Colors don't change at once and you have to wait sometime after closing dialog to get browser response.

Please note that problem can be reproduced from CKEditor 3.0.2 but in CKE 4.x the performance is much worse than in CKE 3.x

Orange flash has already been designed for outputforflash sample.

Reproducible from CKEditor 3.6.4 rev. [7538]. Can also be reproduced in CKEditor 4.x.

1. Open replacebycode sample and clear editor contents
2. Create 3 level list
3. Click at the end of second list item and insert table
4. There will be space below table and last list item
5. Put cursor in this extra space and press delete
6. Last list item will be joined with second one. Now cursor should be at the beginning of text that previously belonged to last list item.
7. Click list button again

Result: table and taxt that previously belonged to last list item disappears and JS error pops out:
Message: Cannot call method 'getParent' of null
Line: 1608
URI: ckeditor/_source/core/dom/range.js

We all got used to have the "Maximize" button in the top-right corner (at least Windows users) in each used application. That's a pretty cool thing to have certain basic features working in the same way everywhere.

Unfortunately, uhe Maximize button in CKEditor is currently located somehow in the middle of the toolbar, which makes it hard for the user to use it and to quickly understand that such feature is in fact available.

It would be nice to not have it available as a button, but instead make it a part of the toolbar, e.g. just like the collapser in V3.

It requires table,dialog,contextmenu and is required by tableresize. On the other hand tableresize doesn't require dialog and contextmenu.

Bug can be reproduced in all browsers.

1. Open enter key sample
2. Set any Enter mode and clear editor contents (best with new page button)
3. Click div container toolbar button

Result:
Messages: Cannot call method 'getName' of undefined or a is undefined
Line : 333 URI: ckeditor.js Please note that I was able to get this bug in release version only. It didn't occur on "trunk"

1. Open enter key sample
2. Set Enter Mode DIV and clear editor contents (best with new page button)
3. Click div container toolbar button and Click OK

Result:
Message: Cannot call method 'equals' of null
Line: 199
URI: /ckeditor/plugins/div/dialogs/div.js

It's now over-killed to open dialog in plugin, which has language files defined, e.g. the a11yhelp plugin:

	var langCode = editor.langCode;
	langCode =
		plugin.availableLangs[ langCode ] ? langCode :
		plugin.availableLangs[ langCode.replace( /-.*/, '' ) ] ? langCode.replace( /-.*/, '' ) :
		'en';

	CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( plugin.path + 'dialogs/lang/' + langCode + '.js' ), function() {
		editor.lang.a11yhelp = plugin.langEntries[ langCode ];
		editor.openDialog( commandName );
	});

It would be as easy as just adding the available language list to the plugin meta, the language file loading should be handled be the dialog plugin instead.

Steps to reproduce:

• open sample inlineall.html
• scroll to the area when 3 columns are visible
• RMB on column 1, RMB on column 2, RMB on column 3
• RMB on column 1

Expected result:

Editor became active on column 1

Actual result: Editor became active on column 1 and immediately became active on column 3.

description of problem can be found at: ​http://www.jacklmoore.com/notes/ie-transparency-problems

can potentially be resolved be ensuring a background color is specified when doing the alpha blending.

#9535 ticket is for v4, this enter key bug also affects v3, even worse it breaks both enter and shift-enter.

OS: Windows 7 Browser: Firefox 16.02 Screen resolution: 1920x1080

As can be seen from the screenshot provided, "Hyperlink" dialog appears to be a bit broken in its minimal possible size in Russian translation, since tab names are rather long and don't fully fit into the dialog.

P.S. The version is actually 4.0 Final, but I can't find it in the drop-down list below.

There exists number of internal plugins that are originally planted in v3 for better isolation, but in fact they'd be merely used by their "parent". We shall consider merge those into their parents for the following benefits:

1. Reduce the number of plugins to maintain:
2. Avoid confusing in the repository

The following list to be considered: ( -> indicates merge direction):

• listblock -> richcombo
• floatpanel -> panel
• dialogui -> dialog

There's no doc string for CKEDITOR.dialog.validate and ​its methods. At the moment it's a ghost stuff.

The feature concerns make the menu button hybrid, to behavior in the following ways:

• Click on button arrow opens up the menu (what we have today)
• Click on button icon to execute a command
• Makes the button remember the last option selected on menu.

With this basis we'll be able to group several toolbar buttons into one, good for:

• Usability
• Compact Toolbar

We need a nice iconset + guidelines for our new addon repo.

When displaying HTML that contains a UL inside a FONT tag in Internet Explorer 9, the list items of the UL end up as nested ULs.

Steps to reproduce: 1) Open IE9 2) Load CKEditor with the following HTML source code:

<FONT face=arial>Text here 
<UL>
<LI>Bullet point 1. 
<LI>Bullet point 2. 
<LI>Bullet point 3. 
<LI>Bullet point 4.</UL>
<P><FONT color=#ff0000>More text here</FONT></P></FONT>

3) See that CKEditor breaks up the list items into separate, nested unordered lists, like so:

<p><font face="arial">Text here </font></p>

<ul>
	<li><font face="arial">Bullet point 1. </font>

	<ul>
		<li><font face="arial">Bullet point 2. </font>

		<ul>
			<li><font face="arial">Bullet point 3. </font>

			<ul>
				<li><font face="arial">Bullet point 4.</font></li>
			</ul>
			<font face="arial"> </font>

			<p><font face="arial"><font color="#ff0000">More text here</font></font></p>
			</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

I realize that block-level elements (such as UL) should not be placed inside inline elements (such as FONT), and that FONT tags should never be used (this HTML was generated by the end user, not me). However, CKEditor handles this HTML gracefully in Firefox and Chrome; it would be nice if it could do the same in IE.

1. Add a table with 1 row and the headers property as first row.
2. Select the table and right click on it and select Table Properties.
3. In the Table Properties dialog that opens, change the value of Headers to None.
4. Try saving the changes by clicking OK. It will not work. Click cancel to close the dialog.
5. clicking "OK" button in this circumstance, doesn't show any apparent change in the "Rich Text" tab, when the source is viewed, it can be noticed that the tag <td style="display: none;">&nbsp;</td> is added to the <table> tag. The no. of the added "<td style="display: none;">&nbsp;</td>" tags being equal to the no. of times the "OK" button is clicked. And, when switched back to the "Rich Text" view, the Table properties now show the same no. of extra columns.

To reproduce the defect

1. Open any sample & insert a link.

2. Keep cursor inside the link & insert an image or Smiley.

Issue: See that the image/smiley overriding the link.

Now it's hard to find "how to contribute". I couldn't find this in docs and on ckeditor/ckeditor-dev, so in places where developers look for that.

If strikethrough is pressed without any text being selected it splits the text into two lines in Opera.

Steps to reproduce:

1. Place the cursor between some text without selecting any.
   
2. Click the strikethrough button and the text will be split.
   ​Video example

Browser: Opera 12.11 (Linux)

To reproduce:

1. Open the replacebyclass sample in FF/IE/Opera.
2. Right click on the image and set the width and height to 100%
3. Repeat steps 1 and 2 in Safari/Chrome.
4. Compare the preview field in the 2 browsers.

Problem: In Safari and Chrome, the image is skewed and fits exactly in the preview field without scrolling. In FF, IE and Opera, the aspect ratio of the image remains intact and it is necessary to scroll the preview field to see the bottom of the image.

This seems to be a browser issue regarding how % heights are interpreted. Is there anything CKEditor can do to make this consistent across all browsers?

The problem occurs in IE9. I am able to replicate it on 3 out of 5 computers. 2 of the problem computers are Win7-64Bit. One problem computer is Win2008R2-64Bit.

Basically, clicking the toolbar dropdowns ('Styles', 'Format', 'Font', 'FontSize') will work the first time you click them. Clicking them a second time, will cause IE to crash.

I can't replicate this on the cdeditor site, however, I can replicate it everywhere else (multiple servers).

You may test it here: ​http://www.maimedia.com/ckeditortest/test.html

Please see comment:7 and comment:9 for more details.

1. Load replacebyclass sample in Opera and clear page contents
2. In Source mode paste following content:

   <p>asdf asdfs adf asdf asdf</p>
   
   <p>sadfsadf sadf sadf afsd<br />
   asdfsadf<br />
   asdfsdaf</p>
   
   <p>asdfasdfsad</p>
   

3. Exit Source mode and select whichever whole line
4. Try applying Bold or Underline formatting

• Result: Selection is lost, cursor moves to the start of the line and formatting is not applied.

Note: this only applies to paragraphs in single lines (not ones that span across several lines) or ones that are manually broken with Shift+Enter.

Opera version:
Version: 12.11
Build: 1661
Platform: Win32
System: Windows XP

Tested and reproduced on ​http://nightly.ckeditor.com/3998/samples/replacebyclass.html

This is a patch on ckeditor 3.6.2. (this is a new feature and not actually a bugfix, I call it a patch because it involves editing an existing pluging file)

This patch allows inserting html source into the wysiwyg iframe area, which you can NOT edit in the editor itself, is NOT saved in the real source, but WILL allow you to modify the appearance of the wysiwyg editor. It does this by inserting (both prepending and appending) html in the body tag of the wysiwyg editor. (Note: it only works for the NON-FULLPAGE version. luckily, you won't need it for the fullpage config.)

for example, you can add <div id="x" class="y">...</div> wrappers so included css files will work.

I use it to insert html blocks quite deep into a fairly complex website and it still works like a charm.

USAGE EXAMPLE:

site.css:

body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1{float:right;}
body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1 div.myclasscontainer2{color:#f00;font-weight:bold;}

html/js:

<script>
	var myckconfig = {
		contentsCss : 'site.css?1234',	
		bodyId      : 'mybodyid',
		bodyClass   : 'mybodyclass',
		bodyPrepend : '<div id="myIdcontainer"><div class="myclasscontainer1"><div class="myclasscontainer2">',
		bodyAppend  : '</div><br style="clear:both;" /></div></div>',
	};
	$('textarea.ckeditor1').ckeditor(myckconfig);
</script>
<textarea class="ckeditor1">this should show up bold and red!</textarea>

1. Open any sample.
2. Change format of any block to pre-formatted.
3. Place caret anywhere in that block.
4. Press enter.
5. Caret remained in first line.
6. Type.
7. Caret was moved and text was inserted in next line.

I would like to have a config option to append a suffix to the filename of js and css files.

Use case: The build/deploy tools I use append the git commit hash to the end of the file names of static cdn assets when bulding. This busts the browser/proxy/etc cache when deploying new revisions of our application. For the time being, I had to make edits to the compiled source to make this work.

For thorough coverage, I'd suggest: config.js_suffix = config.css_suffix = config.img_suffix = doesn't apply to me, but might for others

Example filenames given the latest build commit hash is a3fdee /static/js/plugins/ckeditor/ckeditor_a3fdee.js /static/js/plusins/ckeditor/config_a3fdee.js /static/js/plusins/ckeditor/plugins/autogrow/plugin_a3fdee.js /static/js/plusins/ckeditor/themes/moomo/editor_a3fdee.js

All of my js/css assets are app

Rationale - this event is used by two plugins (and after proposed change, by 3).

​http://dev.ckeditor.com/ticket/9706#comment:4

Again we were close to miss some important error because it was thrown in silent try-catch (this time in selectionChange listener).

We should review all try-catches in code and:

1. if that's a try-catch that covers only one critical line of native code that can throw an error which we cannot handle differntly, then it's ok.
2. all other try-catches should be:
   1. removed (may be unsafe, because we'd have to test what'd be the impact).
   2. logged - we need logs (at least in DEV mode - we can introduce CKEDITOR.DEV flag with %REMOVE_LINE% annotation) of caught errors. Now it'd be unsafe to unwrap e.g. selectionChange listeners, so at least we should know about what was caught.

In the IPostBackDataHandler.LoadPostData() method, the code will not save the posted value when htmlEncodeOutput=false .

bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
	if (this.config.htmlEncodeOutput)
	{
		string postedValue = HttpUtility.HtmlDecode(postCollection[postDataKey]);
		if (this.Text != postedValue)
		{
			isChanged = true;
			this.Text = postedValue;
			return true;
		}
	}
	return false;
}

Since this is false:

if (this.config.htmlEncodeOutput)

The code will never execute, therefore the value is not saving to:

string postedValue =...
isChanged = true;
this.Text = postedValue;

Change the procedure to the following and it started saving again:

bool IPostBackDataHandler.LoadPostData(string postDataKey, NameValueCollection postCollection)
{
	string postedValue = this.config.htmlEncodeOutput ? HttpUtility.HtmlDecode(postCollection[postDataKey]) : postCollection[postDataKey];
	if (this.Text != postedValue)
	{
		isChanged = true;
		this.Text = postedValue;
		return true;
	}

	return false;
}

The key is that regardless of the htmlencodeoutput value set the post collection saves to the postedValue

string postedValue = this.config.htmlEncodeOutput ? HttpUtility.HtmlDecode(postCollection[postDataKey]) : postCollection[postDataKey];

Please Note, I am using the ASP.NET 3.6.4 code base with the 4.0 version of CKEditor

To Reproduce:

• Specify the following config setting to allow the browser spell checker to show misspellings in the editor:

  config.disableNativeSpellChecker = false;
  

• Open a sample in IE10.
• Enter a misspelled word in the editor.
• Place the cursor within the misspelled word and right click.

Problem: The browser context menu is opened instead of the CKEditor context menu.

This occurs in both 3.6 and 4.0.

​`.cke_mixed_dir_content` is extensively used by release packages but there's no other occurrence in dev code (except toolbar), which makes it look obsolete.

It should definitely have a word or two of description.

1. Open any sample.
2. Insert image.
3. Select that image.
4. Click align left.
5. Image is aligned left, but align left button isn't active.
6. Blur image.
7. Select image again.
8. Align left button is now active.

The same happens for align right.

Expected: align buttons' states should be updated after changing image alignment.

Continuation of #9800 (especially ​http://dev.ckeditor.com/ticket/9800#comment:3)

• It should not cause reflows on every mouse move. This is very expensive, especially when user moves cursor very fast. There are lags on FF that may be caused by that.
• On Webkit sometimes it misses mouseup and is still resizing with mouse button released.
• Code of this plugin can be simplified and shortened.

Hello. I have a javascript that truly encrypts email addresses (from Germany javascript developer) however your email linking sends an error message "wrong value" or something like that when I try to implement it. Is there a way to circumvent this so that the email address can be encrypted? The mailto tag is an open invintation to harvesters and the result here in the U.S. at least is over $29 billion dollars of damage. The mailto tag is a monster of a bug and I am reporting it here to you. It's an easy, easy fix. It just needs to be done, is all.

Edited

1. Please check attached files.
2. What @altoman wants is a new feature; where it is possible to define custom encrypt/decrypt functions to be used by the editor.

1. If we are going to take different approach and use only the functions provided by @altoman there will have to be some config option introduced (to use this method or not) so that developer can force usage of it and user "can't bypass it".
2. There would have to be some documentation explaining that decrypt function has to be used on resulting page. Perhaps editor could insert it.
3. If editor is to insert it (see point above) then perhaps these n vales could also be configurable if( n >= 8364 ) {n = 128; } as now they are constant and such constant code can be implemented by spambot.

Pull request: ​https://github.com/ckeditor/ckeditor-dev/pull/9

This feature would be very valuable for CMSes.

1. Open any sample.
2. Insert table (with cell padding and cell spacing set to 0).
3. Place caret inside table cell.
4. Insert next table (with cell padding and cell spacing set to 0).

• Expected: Nested table fills entire outer table cell.
• Actual: There's free space at the bottom of table cell. It's caused by bogus <br>.

This behaviour was helpful in v3, but in v4 we can use magicline to place caret after the table.

Perhaps more cases may be find in which we create unnecessary paragraphs/bogus brs to allow caret positioning.

If a link contains more markup within the <a> tag, the click event will succeed to open the page behind the link in editor's window while the editor is in read-only mode.

This can currently be reproduced using the online example of CKEditor 4 (​http://nightly.ckeditor.com/latest/ckeditor/samples/readonly.html).

The following steps describe my test scenario:

1. Open the read-only sample page
2. Click on the 'CKEditor' link of the sample text within the editor. Nothing happens, as expected.
3. Click the 'Make it read-only' button and click once again on the 'CKEditor' link mentioned above. Nothing happens, as expected.
4. Click the 'Make it editable again' button below the editor to leave the read-only mode.
5. Replace the content of the editor window with the HTML provided in the attached text file (may have to use source mode in order to do that)
6. Click on 'world junior hopefuls' link while in editable mode. Nothing happens, as expected.
7. Switch to read-only mode and click on 'world junior hopefuls' link again. Now, the news article behind this link will open inside CKEditor's window.

It seems that the <font> tag inside the anchor prevents the click protection from functioning while the editor is in read-only mode.

I am not sure if the nightly samples are off the master branch, but I could reproduce it in my environment using the master, so I chose to select it here. Please correct if necessary.

Please let me know if you need more information.

Thanks, Johannes

At least code refactorization can be done (without changing the logic), since there are many things like:

node.getAscendant( 'td' ) || node.getAscendant( 'th' );
//which is equal to:
node.getAscendant( {td: 1, th: 1} );

We could save lots of bytes by optimizing this code.

If rendered as below contenteditable will be set to false automatically (I guess by ckeditor). However if I set the div #my-id as visible with javascript and at the same time set contenteditable back to true the editor will still be in readonly mode. (Sometimes I can for some reason use copy-paste to enter text to the editor but I can't write regularly with the keyboard.)

Sent by the server: <div id="my-id" style="display:none;">

<h3 contenteditable="true">Header</h3>

</div>

After page render by the browser (it changed contenteditable to false): <div id="my-id" style="display:none;">

<h3 contenteditable="false" class="ck-editable cke_editable cke_editable_inline cke_contents_ltr cke_focus"" spellcheck="false">Header</h3>

</div>

After my custom javascript (removes display:none & sets h3 tag to contenteditable="true"): <div id="my-id" style="display:none;">

<h3 contenteditable="true" class="ck-editable cke_editable cke_editable_inline cke_contents_ltr cke_focus"" spellcheck="false">Header</h3>

</div>

Issue is caused by:

• Webkit bug: ​https://bugs.webkit.org/show_bug.cgi?id=133371
• Blink bug: ​https://code.google.com/p/chromium/issues/detail?id=313082

Workaround:

var ck = CKEDITOR.inline(element);
ck.on( 'instanceReady', function( ev ) {
     var editor = ev.editor;
     editor.setReadOnly( false );
});

After viewing or changing the properties of a hidden field, the id is completely removed.

It would be best if only the properties exposed in the dialog -- name and value -- are affected by viewing or changing.

This does not seem to happen with any other form field.

On Mac, ALT+F10 and ALT+F11 open the sound settings menu instead of the anticipated CKEditor accessibility features.
Tested on Macs with OS X Mountain Lion (10.8.2) and standard Apple keyboards (where F10 and F11 control the sound).

Most likely, the following ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/magicline/plugin.js#L1463-L1514 code can be replaced/improved/shortened with element.getClientRect() method.

There's also a possibility of performance gain since getClientRect directly refers to native DOM getBoundingClientRect.

When i use dialog and put content as :

<div style="height:200px; width:200px; overflow:hidden"> <img src="..." height="1000" width="1000" /> </div>

Dialog height is put to 1000 instead of stay a current height. I can resolve this issue with this if it can help set "vertical-align" to 'top' instead of verticale-baseline

ALT+- keystroke doesn't work for me on FF (Linux and Win). In toolbar plugin keystroke is added for:

CKEDITOR.ALT + ( CKEDITOR.env.ie || CKEDITOR.env.webkit ? 189 : 109 )

This, for some reason works on v3, but on v4 doesn't, because ALT+- is ALT+173.

How to repdroduce:

1. Open ​http://ckeditor.com/demo#enter
2. Use the developer console to set the editor data (one with the BR mode)

CKEDITOR.instances.editor2.setData('<iframe></iframe>')

3. Set the cursor after the iframe and press enter to make a newline
4. Press backspace to delete an iframe

Expected: backspace to delete an iframe Now: Cursor gets stuck on the line after the iframe

Currently events implementation accepts one listener function attached only once to one event on one object. When it's attached twice or more times (even with different context) it's ignored (or overwrite previous one).

To avoid issues like ​http://dev.ckeditor.com/ticket/9800#comment:11 events system should notify when listener is added second time. Perhaps we'll also find more issues like #9800, which will need to be fixed.

Harder way - we can remove this limitation from events system, by adding context as a next key. However:

• we would also need to change signature of event#removeListener (it'd need to accept context)
• there still will be a limitation about which developer should be notified by logged errors.

Some browsers let the floating space with toolbars overflow out of the viewport (Chrome). Some of them (FF, IEs) scale down the toolbar to fit it into viewport.

We must decide which method is correct and make this behavior consistent since sometimes it looks bad and may be confusing for users.

We do several inline elements fixing that are found orphan inside body. This was true for <br> as well, until we reverted a fix that was causing #9167.

Because of that, I've commented out a test made for that case form dt/core/htmlparser/fragment.html, test name "test_parser_13".

It is still unclear for me the cases for this fix, but considering that we were used to do so, we should keep doing it.

I'm just unsure if this is necessary.

1. Resize browser window so it's lower than 300px.
2. Open replacebyclass sample.
3. Scroll down.
4. Open image dialog.
5. Try to move it by dragging header.
6. It will stick to upper viewport border. It's impossible to move it lower.

Extracted from #8888.

In v4 we support latest FF and latest FF3.6.*. However, in code I found many outdated fragments.

What should be done:

• env.isCompatible update.
• env.cssClass update (Gecko 1.8 means FF<3).
• Fixes targeted for unsupported versions of Gecko should be removed.
• #9716 should be verified for v4.

There is room the enhance the context checking we do for several toolbar buttons. While the current approach is correct, it can be optimized to better fit user's intentions, helping on the UI usability.

One good example for that is related to object selections. There is no much sense on having inline styles, like bold, enabled when an image is selected.

Let's open a discussion and analise all possible cases first.

In this case it allows to insert space between divs by ctrl+shift+3, but it shouldn't. Accessing that space should be possible only from paragraph p1.

<div>div1</div>

<div>
  <p>p1</p>
  <p>p2^</p>
</div>

To reproduce on demo page -Click the insert Table button

• In the first cell of the first row, keep entering text until the line wraps.
• Press the tab key (it will move you to the last cell of that row
• Start entering text, you will notice any press of the space bar is ignored when at the end of your text line. If you navigate backward in the string, you are able to enter spaces.

The "OK" button looks a bit bad in RTL environment.

Happens at least since 3.5, did not try earlier versions.

The documentation for ​uiColor suggests using a color name for uiColor. It works fine in Kama skin, but does not work (properly) in Moono.

It looks like the provided color name is used somehow, but the the buttons are black.

The attached screenshots presents the result of

config.uiColor = 'Gold';

Currently editor inline has no collapse toolbar button because there was no real use case for it.

There is one use case that depends on other feature being implemented. Feature #7280 "switch toolbar at runtime" talks about changing toolbar definitions when command is executed - collapseToolbar or other like maximize toolbar button is pressed.

What CKEditor should do is provide ability to change toolbar at runtime and provide some hooks (events) when button is pressed. That way, users could create behaviour they want with any or almost any plugin.

Agreed that implementing this button so that some users could use it for their custom needs is an edge case but think what is the better place to do so than this little and nice looking button (better then button outside of editor) :)
Besides there might be other use cases that users will come up with.

1. Open any sample.
2. Insert textarea into editor.
3. Right click on it.

JS error is thrown:

Error: Permission denied to access property 'nodeType' @ core/dom/node.js:25

Context menu usually doesn't show up.

1. Open autogrow sample.
2. Add paragraphs so editor is higher than viewport.
3. Maximize editor.
4. There's no scrollbar.

1. Visit ​http://ckeditor4.t/ckeditor/samples/plugins/enterkey/enterkey.html
2. Set enterMode to BR
3. Play with Ctrl+Alt+[ or ]
4. See Object doesn't support property or method 'setAttributes'

This is because the focus space is not an element anymore (BR mode), so it cannot have data-cke-magicline-hot attribute set.

Tested in IE9. Possibly also in other browsers.

1. Open UIColor plugin sample /plugins/uicolor/samples/uicolor.html
2. There's no UIColor button.
3. Removing inline editor (which isn't supported in QM) doesn't help.

It works well e.g. inside table. But when it should be displayed with width:100% the right part isn't visible.

1. Open any dialog with native HTML select combo box (i.e. link dialog).
2. Open "protocol" select.
3. Press ESC.
4. • Chrome: Select collapsed, dialog visible.
   • Others: Dialog closed.

This behavior must be consistent.

1. Open ​http://ckeditor4.t/ckeditor/samples/plugins/uicolor/uicolor.html
2. Focus inline editor.
3. Having the floating toolbar visible, start resizing the framed instance above.
4. Floating space is visible (but shouldn't), it remains in original position.
5. Blur/focus/blur/focus inline instance to see that toolbar position is permanently broken.

1. Write two paragraphs.
2. Indent second one.
3. Select both of them.
4. Click list button.
5. Second list item is intended, but it's not a nested list item.
6. Try to outdent it - it is transformed back to paragraph.

In my opinion when paragraph is indented when creating list it should become a nested list item. However, that won't be possible for first paragraph, because it can't become a nested list (at least when indenting first item of a list).

Different solution may be found, but it should be consistent with how indent buttons work for lists and what's possible using them.

I can't understand why this event is called instanceReady. We have editor#loaded and CKEDITOR#instanceLoaded (it isn't documented, but it exists ;> #9910), so together with CKEDITOR#instanceReady we should have editor#ready.

OFC we need backward compat, so we can have both - deprecated instanceReady and ready for some time and remove it after 1-2 years.

​http://docs.cksource.com/CKEditor_3.x/Users_Guide/Keyboard_Shortcuts

How to reproduce:

1. Open enter key sample and switch to BR mode.
2. Use the developer console to set the editor data

   CKEDITOR.instances.editor1.setData('<iframe></iframe>');
   

3. Set the cursor after the iframe and press enter to make a newline
4. Press backspace to delete an iframe

JS error is thrown:
Message: Can't get property "remove": object is empty or undefined
Line: 171
URI: /ckeditor/plugins/wysiwygarea/plugin.js

NOTE: IE8 has its own problems defined here #8446. Problem can be reproduced from CKEditor 4.0. In CKEditor 4 beta inserting iframe caused another error - insufficient privileges.

To reproduce:

1. Open enter key sample and set enter mode BR.
2. Press New Page Toolbar button

Result: JS error is thrown
Message: Unspecified error
Line: 1012
URI: ckeditor/core/selection.js

Problem can be reproduced in IE10 from CKEditor 4.0

Summary:

When using iOS to create a form, the keyboard is disabled.

Steps:

1. Use iOS5+
2. Load the Full-featured demo (ie, 5 line toolbar)
3. Clear the content using Source View.
4. Switch to wysiwyg and click the Form button
5. Insert a form and move your cursor inside of it
6. Insert a text field in the form.

Expected result:

The cursor should be positioned after the new field and I should be able to enter new text using my keyboard.

Actual result:

The cursor is positioned after the field but I can type away and no characters are entered.

Hi,

There appears to be a bug affecting IE8 in CKEditor where copying and pasting (via CTRL+C, CTRL+V) changes the HTML and wraps the hyperlink text in font tags. I have been able to reproduce it 100% on ​http://ckeditor.com/demo. I was able to reproduce with IE8 versions in both WinXP 32-bit and Win7 32-bit.

Before copy HTML:

<a href="​http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a>

After paste HTML:

<a href="​http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong"><font color="#0000ff">Neil Armstrong</font></a>

It seems to affect IE8 only. I've tried to reproduce in IE9, Firefox and Chrome and there was no issue with those browsers.

When user clicks in the middle of the ckditor text-area, try to type-in, only the first key pressed character is added to the text-area & text-area immediately lost the focus so keyboard hides before user press another key.

Strange thing is when user click on top place of ckeditor textarea OR click between the already written text and try to type-in, it works fine and focus remain in text-area.

Top area means, the area of <p> tag generated by the ckeditor by default.

Reported on the forum: ​http://ckeditor.com/forums/CKEditor/Delete-key-not-working-if-at-end-of-line-past-a-space

Steps to reproduce:

1. Open the ​standard sample.
2. Place cursor at the end of the line (but not end of paragraph), after the trailing space.
3. Use Del to delete text.

Expected result: text from the next line is deleted.

Actual result: nothing happens.

Placing the cursor before the space works as expected and the text is deleted.

IE, Chrome do not seem to be affected. In Opera it seems like there is no space at the end of the line - the cursor always appears after the last character and deletion works as expected.

The elements path has been disabled on inline editing as a fix for #9847.

That fix was way too simplistic, not really solving the problem. It is totally ok to have elements path available for inline editing if a bottom space is made available to the editor instance. The shared spaces plugin showcases this in its sample, for example.

1. In an empty editor, type "test"
2. Click on the Numbered List button to make it a list.
3. Move the cursor to before "test".
4. Press Enter twice, so that now you have two empty list items, and the third one with "test".
5. With the cursor still right before "test", click on Increase Indent button.
6. Now, select the first two list items by double clicking on the first line and dragging into the second line. (See screenshot).
7. Press delete.

Actual: Two bullets render on the first line (which is normal behaviour), the text appears on the second which is a bug. (See screenshot)

Paste buttons are disabled after deselecting text by clicking inside selection.

Reproducible in: IE9, IE8, IE7 with CKEditor 4.0.1 and 3.6.4

Reproduce steps:

1. Write some text and select it.
2. Deselect the text by clicking (one time) inside the selection.