Custom Query

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)

Editor blur event is triggered when opening dialog with file element. If you don't put file element inside a dialog blur event is not triggered!

Steps to reproduce

1. In file "core/dom/domobject.js", at around line 45, modify function "getNativeListener()" by modifying the if statement that conditions the "domObject.fire()" call, such that it is preceded by a statement like console.log("Handling event:"+event).
2. In "plugins/wysiwygarea/plugin.js", at around line 321, at the beginning of definition of function "setData", put in a statement like console.log("In 'setData' at top");
3. Run any program that uses CKEditor. I am using the textarea/iframe type set-up, with five editors opening one right after the other.

Expected result

When the "load" event occurs, "setData" should get called once.

Actual result

After "load" finished, "setData" gets called a second time.

Other details (browser, OS, CKEditor version, installed plugins)

For my five text areas, all five sequences of "load" then "setData" are finished before the next set of five "setData" calls begins.

Due to the implementation with the "floating" toolbar (depending on the scroll position/available space of the page), it is not possible to fix the location of the toolbar. It'd be great to give a preferred location of the toolbar ("put it to the bottom unless there is no space").

Please see my attached plugins/floatingspace/plugin.js with my temporary workaround to get an idea of location of the problem.

Steps:

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

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

-Make the editor read-only

-Click on the image

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

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

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

CKEDITOR.instances.editor1.setReadOnly( true )

after adding the link to the image.

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

Steps to reproduce

1. Type some contents in CKEditor (such that scrollbar is showing).
2. Scroll down and tap somewhere in the middle.
3. Paste some data (plain text) from clipboard after holding on the caret and selecting 'Paste'

Expected result

The pasted content must appear on the caret position and the screen should be steady.

Actual result

The contents in the editor scrolls up and down. Sometimes the entire screen scrolls up and down especially when zoomed-in . The pasted content appears on the caret position. But hard to find where it is.

Other details (browser, OS, CKEditor version, installed plugins)

On most of the iOS versions including tablets. Browsers : Safari and Chrome.

1. Open widgetquote sample from #9764.
2. Switch between modes twice in first editor.
3. See that widget lost its styles in second (inline) editor.

Or:

1. Open datafiltering sample from master and find in dev tools last stylesheet (with data-cke-temp attr) in host page's head.
2. Switch between modes twice.
3. Stylesheet was removed...

Problem is somewhere here: ​https://github.com/ckeditor/ckeditor-dev/blob/master/core/editable.js#L681-L693

It seems that framed editor (wysiwygarea or sourcearea) does not increase stylesheet_ref, but it decreases it. Or that order of detach and new editable's setup is incorrect.

I added an Screen shot to make it more simple to understand the ticket.

There is an section where you can enter text at the CKEditor, in the following called content section. If you enter a small text at the content section and leave out enough unfilled place in the content section you can't paste text inside the editor. If you right click in the free place of the content section the browsers default context-menu will be opened but not the context menu of the CKEditor. While the text selection cursor will be changed, the context menu keeps missing.

I've attached some screenshots with the crash and the error log.

Here an example of the code I used:

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

	<iframe src="fullpage.html" height="550" width="800"></iframe>

While using the CKEditor in source mode( in the config startupMode : "source" ) instantiating the CKEditor object, with the method replace, the object doesn't contain many basic attributes e.g. the document that contains the editor or the selection of the user (edit: selection is not accessible in source mode for a reason - see comment:1).

If we use instead the wysiwyg mode, everything works fine and we have those attributes.

Reproducible in IE, Webkit and Opera.

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

Expected result: The editor grows to fit its contents.

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

Div is not replaced with editor when you'll click inbetween paragraphs. It's minor issue but can mess up user UX, if he'll click in such place for the very first time.

1. open divreplace sample (​divreplace)
2. click on space between two paragraphs

Expected result:
Editor should be created.

Current result:
Nothing happens.

additional info:

Steps to reproduce

1. set editor enterMode to ENTER_BR
2. in editor, enter text - 'Send to 123 Main St'
3. place cursor immediately after 'to', before space
4. hit Enter key
5. on new line, hit Delete or Arrow Right
6. notice cursor/action move two spaces to the right

(space is trimmed on this keypress, and the next character is acted upon)

Expected result

leading whitespace should be trimmed on initial Enter keypress (like behavior when performing same action with ENTER_DIV and ENTER_P) Expected, demo'd with ENTER_DIV:

Actual result

leading whitespace is trimmed on Delete, as well as the '1' character.

Other details (browser, OS, CKEditor version, installed plugins)

• Chrome 56.0.2924.87
• OSX 10.12.3
• CKE 4.5.2 and 4.7.1

This is a FF's only issue. Currently (and this is a state from 3.0) Editor.insertElement will take passed element, clone it multiple times and insert into every range. This is a surprising behaviour, because we lose control over inserted element - we keep the reference only to one of them.

Correct behaviour IMO would be to clean all ranges and insert element only to the first (or last?) of them.

While working on this ticket it would be worth to review and correct insertHtml which does not clean other ranges when doing insertion.

Operating System: Windows Vista Browser: Firefox 3.0.5

I posted this in the forums: ​http://www.fckeditor.net/forums/viewtopic.php?f=6&t=12676&p=33211#p33211

I originally noticed this in v2.6.3, but tried the nightly build and it is present in that as well.

When you place an editor inside a <div /> tag with "overflow" set to "auto", and you scroll that div - menus for "Font", "Size", and "Format" are not appearing directly below the menu links. They are displaced below, proportionate to how much the div has been scrolled.

This does not happen in IE 7.0.

I've attached a screenshot showing this, and example code.

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.

I built the Editor without the iframe plugin (guessing that the fallback would be just an inline-div) and did realise that I then require the divarea plugin.

When using the inline editing mode, the editor would work fine. But replace mode would result in the editor being disabled, without so much as a warning. In the code I tried to backtrack the problem but had no such luck. When I noticed that even the sample for textarea replacement did not work, I guessed that I misconfigured the builder somehow...but still did not know that I had to use the divarea plugin instead.

I stumbled upon the solution by accident when googling the issue.

A nice way to solve this would be an error/warning when neither the iframe nor the divarea plugin is used.

Environment

Opera 11.10; Connected with context menu issue #7644

TC

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

Actual result

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

To solve the problem, I have to modify the file plugins/editingblock/plugin.js. Is this OK ?

New code : (1 line disabled, 1 line added)

CKEDITOR.editor.prototype.setMode = function( mode ) {

this.fire( 'beforeSetMode', { newMode : mode } );

var data, holderElement = this.getThemeSpace( 'contents' ), isDirty = this.checkDirty();

Unload the previous mode. if ( this.mode ) {

if ( mode == this.mode )

return;

this.fire( 'beforeModeUnload' );

var currentMode = getMode( this ); data = currentMode.getData(); currentMode.unload( holderElement ); this.mode = ; LINE HAS BEEN DISABLED

}

holderElement.setHtml( );

Load required mode. var modeEditor = getMode( this, mode ); if ( !modeEditor )

throw '[CKEDITOR.editor.setMode] Unknown mode "' + mode + '".';

if ( !isDirty ) {

this.on( 'mode', function() {

this.resetDirty(); this.removeListener( 'mode', arguments.callee );

});

}

modeEditor.load( holderElement, ( typeof data ) != 'string' ? this.getData() : data);

FOLLOWING LINE HAS BEEN ADDED this.mode = (this.mode == 'wysiwyg') ? 'source' : 'wysiwyg';

};

If you put from the source mode a link that has no text the editor automatically removes it. This is bad because I am using css to define images to be put instead of the text and the link is something like <a href="..." class="myclass"></a> and in the myclass is defined the actual image to be clicked on.

Steps to reproduce:

1. go to demo page
2. go in source mode
3. replace existing source with <a href="www.google.com"></a>
4. exit the source mode
5. enter again the source mode and you will see that the tag is no there anymore

The best solution I think would be that a config parameter to change this behavior would exist

Hi,

You can test it right here : ​http://nightly.ckeditor.com/4908/_samples/sharedspaces.html

When you click on the little arrow to collapse the shared toolbar, the editor height changes, as if the toolbar height was still calculated in the editor size.

Hi!
I use "Image2" plugin and set "contentscss" to css file (works great!)

The issue happens when I create simple "image-fullwidth" class style, and apply it to the image with the Style dropdown. The editor doesn't preview it as 100% full width, instead showing original size (aligning and other styling work great). Please note that there's no problem on the front website, the image is displayed 100% width correctly.

I used dev tool to dig it and I've found the class .cke_widget_inline, on <span> element that wraps the image, has "display: inline-block". Try changing it to "block" solves half of the problem, image is displayed 100% width now. However, it doesn't respect image's height. (I remove height from image anyway so that it won't look disproportionated).

Browser & OS: Chrome version 41.0.2272.89 (64-bit) / OS X 10.9.5

Build Config:

var editor = CKEDITOR.replace(controlID, {
    height: 400,
    uiColor: '#fafafa',
    extraPlugins: 'image2',
    image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
    image2_captionedClass: 'image-captioned',
    removePlugins: 'save,newpage,preview,print,forms,find,selection,spellchecker,bidi',
    removeButtons: 'SelectAll,Scayt,Subscript,Superscript,Language,Flash,Table,Iframe,Font',
    contentsCss: '/admin/styles/editor.css'
});

Follow up on ​https://dev.ckeditor.com/ticket/9771

The fix in ​https://dev.ckeditor.com/ticket/9771 does not work for editors embedded in a absolute positioned element with overflow scroll..

I've made a demo here: ​https://jsfiddle.net/899r5exm/

Yeah I know, it's probably not wise to position elements like this but the CMS I'm using is using this.

Any idea how we could fix this?

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

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

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

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

Steps to reproduce

1. Load ckeditor.com/demo
2. Open the console and execute

CKEDITOR.instances.editor1.showNotification("Hi\r\nWhat's up?")

3. Compare with an editor without the notification plugin that will end up calling window.alert:

alert("Hi\r\nWhat's up?")

Expected result

The notification plugin should convert linebreaks into <br> so that any call to editor.showNotification is displayed in a similar way.

Actual result

alert shows the message in two lines, the html notification uses only one.

Other details (browser, OS, CKEditor version, installed plugins)

Introduced with the notifications plugin, I'm guessing 4.5 at least

To reproduce:

1. Put ajax2.html in _samples folder
2. Open it in a browser.
3. Click Create Instance button.

Result:
You will have two editors on page but only one can be hidden/shown.

In ajax2.html I have added this code.

<script type="text/javascript">
	createEditor();
	removeEditor();
</script>

Perhaps this is not very common scenario:) but it is also possible to reproduce it manually. If you click Create and Destroy buttons quickly enough you will get two editors as well (See two_editors.swf).

Browser/Os: In Chrome on Ubuntu Linux. Bug does not occur in Firefox, not sure about other browsers/operating systems. Steps to reproduce: 1) Go into Full screen mode. 2) Open a dialog (seems like any dialog, but for sure the image dialog produces bug). 3) Exit full screen mode.

At this point, the editor will extend all the way to the right of the screen, instead of going back to the size it was originally.

It seems to me that if a dialog was opened for the first time before going into full screen mode, then the bug does not occur.

Element path lacks borders in HC mode

Steps to reproduce

• Open the demo.
• Put the caret inside one of the table's cells.
• Click 'body' in the elements path.

Notice not only the body is selected, but also 'h1' and 'image'.
Tested with the demo and the current trunk with IE 8.

TC 1

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

Result: Letters are typed as plain text

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

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

TC2

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

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

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

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

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.

Buttons in elementspath should not be draggable. Now you can drag it into editable. What's worse in IE10, IE11 it will cause following exception:

SCRIPT5009: 'CKEDITOR' is undefined 
replacebyclass.html, line 355 character 1

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. click somwehere inside editable
3. click move body elements path part into editable

additional info:

1. it should be easily fixable with setting onmousedown="return false" on anchors

When you click an element in the elements path, the elementspath.js plugin executes the instruction

editor.getSelection().selectElement(element);

However, in all browsers except Firefox, the editor.getSelection().getSelectedElement() returns null !

Is this a problem that has been solved already in some patch ?

Steps to reproduce

1. Start with the following source:

<div style="background:red;">some red text</div>
<div style="background:yellow;">some yellow text</div>
<div style="background:blue;">some blue text</div>

2. In WYSIWYG, place cursor on the yellow text
3. On the elements path bar at the bottom, click "div" to highlight the yellow div
4. Press delete

Expected result

I would expect the yellow div to be removed, and the result to be:

<div style="background:red;">some red text</div>
<div style="background:blue;">some blue text</div>

Actual result

Instead, the context on yellow is removed, and the content of the following blue div is replaced inside instead (along with some line-height added for some reason):

<div style="background:red;">some red text</div>
<div style="background:yellow;"><span style="background-color:blue; line-height:1.6">some blue text</span></div>

Other details (browser, OS, CKEditor version, installed plugins)

Using Chrome on Linux.

Reproducible on ​http://ckeditor.com/demo#full

I feel like this was working differently (and used to just remove the div) in previous releases.

Please see comment:1 for Firefox result

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Place caret inside simple box.
3. Click the 3rd element (2nd div) in elements path.
4. Viewport is scrolled and selection is placed outside widget

Expected: contents of simplebox'es content should be selected.

See: comment:2.

The bug appears when editing an e-mail link that contains non-latin characters within its subject or body and document's charset is different from utf-8.

oParser.CreateEMailUri method in fck_link.js escapes non-latin characters from utf-8 charset, so the url when passed into the document remains utf-8 encoded.

Moved from SF:
​http://sourceforge.net/tracker/index.php?func=detail&aid=1325829&group_id=75348&atid=543653

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

​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed states: "Must have a start tag, and must not have an end tag." However, CKEditor is adding a closing tag.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo#full
2. Switch to source mode
3. Replace source with <embed src="movie.mov">
4. Switch to WYSIWYG mode and back to source mode
5. See the tag was closed as <embed src="movie.mov"></embed>

Expected result

The tag should remain as pasted, without a closing tag

Actual result

A closing </embed> tag is being incorrectly added

Other details (browser, OS, CKEditor version, installed plugins)

Tested on Chrome, latest version

If the HTML source includes this:

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

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

switch to source and paste

<div id="black_box"></div> 

switch twice and you'll see that the content has been lost.

(any browser)

Reported in ​http://www.fckeditor.net/forums/viewtopic.php?f=6&t=7251

Part of: #10974.

I'm not actually sure this is a valid bug as I'm somewhat uncertain the use case is supposed to be supported: inline widgets are supported, but inline editables are not by default although they generally work (and — I think — make sense in an inline widget).

Anyway, if one sets up inline editable parts in a widget and removes said parts's (textual) content, the widget *and part* remain, but the part becomes invisible and essentially un-editable: the usual outline disappears with the last visible character.

See attached document for a test case, inline widget content is the inline editable part, if the cursor is set to its end then the user backspaces until all text is removed it seemingly disappears entirely. Checking the DOM shows the widget and part are still there (and the drag & drop handle remains visible), but there's more or less no way to re-insert content in the widget.

Example use case

1. Open editor and clear it's content.
2. Type some text: abcdefg
3. Put caret here: ab^cdefg
4. Select font size: 72
5. Put caret somewhere else: abcd^efg
6. Select font size: 24

As you can see cursor fit 72 but we don't have any 72 text. That's because empty span hasn't been removed.

Since it's affect only visual part of editor (empty elements are removed on save). We might consider using CSS3 :empty pseudo selector:

span:empty {
  display: none;
}

But it's more workaround rather sultion, and it's not fully supported by browsers and it's not bulletproof.

This is continuation of ​http://dev.ckeditor.com/ticket/10146#comment:26.

Seems ticket isn't fully fixed. Problem can be reproduced in every browser.

To reproduce:

1. Set enter mode to BR
2. Clear editor contents and paste below code:

   <br />
   <br />
   <table border="1" cellpadding="1" cellspacing="1" style="width:500px">
    <tbody>
     <tr>
      <td>Table</td>
     </tr>
    </tbody>
   </table>
   <br />
   <br />
   <hr />
   

3. Switch to WYSIWYG and then to source:

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

Result: As you can see two BR's were changed into single &nbsp;.
If you were writing an article, created table and wanted to make some space above it then on page save you would end up with single &nbsp; which wasn't intended.

NOTE: This is happening if you use one or two BR's. If you use three BR's then result is "br br nbsp". Assuming that last Br has to be changed into nbsp, should it be "br nbsp" when two BR's are used?

It seems ticket #10146 hasn’t been fully fixed thus this one should be closed and the former reopened.
I have just found that if you paste above code into editor, behaviour will be different in IE. All other browsers change two BR’s into &nbsp; but IE does it in "one by one" style – it removes br and on second switch it turns last br into &nbsp;

In the demo or nightly demo, go into source view, delete existing HTML, and paste in the following:

<table> <tr> <td> Left cell</td> <td> <p>First paragraph.</p> <p>Second paragraph, with an empty link tag in it <link />.</p> <p>Third paragraph.</p> </td> <td>Right cell</td> </tr> </table>

Switch to WYSIWYG view. The table, row, and cells are gone, as is the content for the left cell and the first 2 paragraphs of the center cell. I've gotten this result on the latest versions of Opera, Firefox, Chrome, IE, and Safari (all on Windows).

This is skeleton HTML for what we've seen from several of our clients. The empty <link /> tag is the problem - everything is fine if you remove that. I know that shouldn't be there but we have clients who are getting it by copying and pasting content from web pages that already have it in them. One source of this content was Up!CMS. Browsers correctly handle the empty link tag, but CKEditor goes a bit nuts with it.

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

Issue is reproducible in Webkit and Firefox4 from CKEditor 3.5.1

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.

Steps to reproduce

1. Insert <div id="foo">&nbsp;</div> in the Source view
2. Switch out of source view and back in
3. <div> is removed

Expected result

Div should remain. If you add <p>&nbsp;</p> before or after the div remains.

Actual result

Div is removed.

Other details (browser, OS, CKEditor version, installed plugins)

Chrome 58.0.3029.81, Win 10, CKEditor 4.6.2

Config has:

config.protectedSource.push(/<i[^>]*><\/i>/g);

This prevents <i> from being removed, but:

config.protectedSource.push(/<div[^>]*><\/div>/g);

In the scenario above makes no difference to <div> being removed.

Added text to the div i.e. <div id="foo">Test</div> stops it from being removed.

We would like to have the 'find' button enabled in the source view mode of the editor.

Hi!

I'm integrating CKEditor into my site and we already have a build pipeline where our assets (CSS, image, JS, etc) are all fingerprinted for caching. I've add the CKEditor css and images to that build step and, as such, I don't need or want CKEditor to make a request for the CSS and icons.

From what I can tell, there's no way to disable the loading of a skin. Is this possible?

Scott

After call range.enlarge( CKEDITOR.ENLARGE_ELEMENT ); in some cases <\p> tag is inside enlarged range (dt/core/dom/enlarge.html 'test space 9', currently in ​git:t/10778)

<p>foo <i><b>[bar]</b></i> </p> ->
<p>foo [<i><b>bar</b></i> </p>]

and in some it is not (dt/core/dom/enlarge.html test_enlarge_element5):

<p>Test <b><i>[Enlarge</i> this]</b></p> ->
<p>Test [<b><i>Enlarge</i> this</b>]</p>

When an image is drag-and-dropped into the edit field the onmouseover and other event attributes remain intact. There should of course be server-side validation, but currently the XHTML snippets produced are unsafe in themselves and make javascript code injection way too easy.

I've managed to reproduce this bug with the latest nightly build, as follows:

1. Download the nightly build.
2. Download and include the following plugin:
   • ​http://ckeditor.com/addon/image2
3. Download an include the additional required plugins:
   • ​http://ckeditor.com/addon/widget
   • ​http://ckeditor.com/addon/lineutils
4. Add the following to config.js:

config.extraPlugins = 'lineutils'; config.extraPlugins = 'widget'; config.extraPlugins = 'image2'; config.image2_alignClasses = [ 'text-editor-image-left', 'text-editor-image-center', 'text-editor-image-right' ];

5. Add the following to content.css:

.text-editor-image-left {

float: left; margin-right: 10px;

} .text-editor-image-right {

float: right;

margin-left: 10px;

}

5. Open one of the samples: Desktop/ckeditor/samples/replacebyclass.html
6. Double click an image to open the dialog and select Alignment: Right
   • The image floats to the right.
7. Toggle Source mode on/off
   • The image remains floated to the right.
8. Select the image and click the Link icon, and add a URL.
   • The image remains floated right.
9. Toggle the Source mode on/off.
   • The image loses its float right.
   • If you view source mode you'll see that the image is still assigned the correct class, it's just not being detected.
   • If you double click the image to open the dialog the Alignment: Right option is NOT selected.

Dear Fred and developers,

Currently the FCKeditor has 4 drop-down menus

1. Style
2. Format
3. Font
4. Size

I'd like to suggest for Font drop-down menu. That menu currently has 6 fonts. Definitely, there are times when user wants to define his desired font not listed in the menu. If so, how to do ?

Simple. Just add a new item named 'Add custom'

which asks user his desired font name and adds code to the text area.

Similarly for font-size, there are times when user wants to define his desired font size not listed in the menu.

By the way, the labels 'Style’,’ Format', 'Font', and 'Size' would be better in the drop-down index 0 for the sake of spaces in the editor toolbar - we can even add more buttons at that line, resulting more precise toolbar.

Thank you so much for your time, consideration and hardwork.

Dear Fred and developers,

The Find would be better able to -

1. show finding status like '10 matches found.' *If matches > 1, the value of find button 'Find' changes to 'Find Next' after user has searched the first match.

2. search again from the beginning if desired word is not found.

[Currently, it starts searching from the cursor point.

For example, we have 3 words - hello. We place our cursor at the back of the last hello. Search it. Find none!]

In this case, the find function should check that

• the cursor should be at the first position.

Thank you so much for your time, consideration and hardwork.

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.

Dear Fred and developers,

Currently, the color picker in FCKeditor is basic. [ I'm not degrading it!] There are already some great JavaScript Cross-Platform Color Pickers on the web. Please inherit any one you feel great.

​http://www.google.com/search?q=Javascript+Color+Picker

Thank you so much for your time, consideration and hardwork.

Dear Fred and developers,

We can add more smiley icons by providing 'more' link.

Even if the icons are dozens, the more link can also be enhanced by dividing categories presented as a drop-down menu.

Thank you so much for your time, consideration and hardwork.

When enlarging a block element with element unit, the enlargement will climb up to any ancestor block, which is wrong.

When horizontail line is inserted with Format Normal <DIV> the cursor is sometimes hardly visible and enter adds two new lines.
Steps to reproduce:

1. Open http://nightly.ckeditor.com/5635/_samples/skins.html[[BR]]
2. Select Format: Normal <DIV>[[BR]]
3. Insert horizontal line[[BR]]
4. Cursor is positioned bellow the line, which is correct[[BR]]
5. Click backspace - cursor is at the end of the horizonal line and hardly visible[[BR]]
6. Hit Enter -> two new lines are added and the format is changed from Normal<DIV> to Normal

Enter !@#$ and click on enter , notice it shown underline.

Happens on IE only

Tested with FF25 and 27.

Reproducalbe in demo

Type "AAA"
Enter
Backspace
Shift+Enter

--> expected: new line, but it make p

Backspace

--> cursor is on line under "AAA"

Type "B" -> In Line 1 is "AAAB"

With "down" u can reproduce it.

Enter the letters.

The Select All letters.

Enter the characters again. (Korean)

ex)

Normal Input: 가나다라

a bug: ㄱ가나다

I think _sourc/\plugins/wysiwygarea/plugin.js Prevent IE from leaving new paragraph after deleting all contents in body. (#6966)

						if ( CKEDITOR.env.ie && editor.config.enterMode != CKEDITOR.ENTER_P )
						{
							domDocument.on( 'selectionchange', function()
							{
								var body = domDocument.getBody(),
									sel = editor.getSelection(),
									range = sel && sel.getRanges()[ 0 ];

								if ( range && body.getHtml().match( /^<p>&nbsp;<\/p>$/i )
									&& range.startContainer.equals( body ) )
								{
									// Avoid the ambiguity from a real user cursor position.
									setTimeout( function ()
									{
										range = editor.getSelection().getRanges()[ 0 ];
										if ( !range.startContainer.equals ( 'body' ) )
										{
											'''body.getFirst().remove( 1 );'''  >> '''body.getFirst().remove( 0 );'''
											range.moveToElementEditEnd( body );
											range.select( 1 );
										}
									}, 0 );
								}
							});
						}

The problem is solved

Steps to reproduce

1. Set editor enterMode to ENTER_BR
2. In editor, enter text - 'Send to 123 Main St'
3. Place cursor immediately after 'to', before space
4. hit Enter key
5. on new line, hit Delete or Arrow Right

Expected result

Space should be visible and key press should either move cursor or delete the space.

Actual result

Notice that first key press does nothing and space before '123' is not visible.

Other details (browser, OS, CKEditor version, installed plugins)

Problem can't be reproduced in native contenteditable element.

Steps to reproduce

1. Set editor enterMode to ENTER_BR
2. In editor, enter text - 'Send to 123 Main St'
3. Place cursor immediately after 'to', before space
4. hit Enter key

Expected result

Space in front of '123' is visible and cursor is blinking before it.

Actual result

There is no space in front of '123' and cursor is still blinking at the end of first line.

Other details (browser, OS, CKEditor version, installed plugins)

• In a enterMode = BR editor with the following content:

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

• Put the cursor inside the text.
• Click "RTL".
• Do CTRL+Z.

Note that the RTL icon is still highlighted.

With

config.enterMode = CKEDITOR.ENTER_BR

CKEditor creates paragraphs when inserting page break / horizontal line.

Result after inserting page break between two lines:

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

and after inserting a horizontal line:

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

1. With enterMode = CKEDITOR.ENTER_BR open any sample page;
2. Clear page content and click on "blockquote";
   • Actual Result:

     <blockquote>
     	<p>
     		&nbsp;</p>
     </blockquote>
     

   • Expected Result: There's no created paragraph.

• Open _samples/enterkey.html, set enter mode to BR
• Press increase indent button
• Press decrease indent button
• Result:

  <div>
  	This is some (...)</div>
  

TC1

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

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

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

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

TC2

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

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

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

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

TC3 (Webkit only)

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

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

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

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

TC4

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

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

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

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

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

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

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

Linked with Ticket #6845

TC

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

Expected

New, correct link is added to edit area

Actual Result

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

On Firefox 8 on Windows 7:

steps to reproduce:

1. go to demo page
2. edit source and change it to "<p></p>"
3. stop editing source
4. focus on editor using the tab key (do not click on the editor)
5. type a single character

Expected: Just the character should be typed.

Actual: A newline spontaneously appears before the character, moving the character down.

Enter at the end of DT element should create new DD element and vice versa.

In Firefox on Android, if you press enter at the end of a paragraph, the cursor skips down to a new line briefly, but then jumps back up. It is not possible to cursor down. You can tap a touchscreen where the next paragraph would be entered to move there. Problem occurs on your demo site, and in our local copy of 4.4.5.

Test platform: Android 28 or 33 on Nexus 10, Android 4.3.

This seems similar to ticket #12423.

If "enterKey" is enabled, hitting [Return] while in a simple block-level (div) widget will break the widget by creating a second "widget body" within the widget wrapper. This leads to odd formatting and an unexpected DOM.

See attached demo, the only plugins are enterKey and a custom widget plugin, put the cursor within the displayed word and hit the [Return] key. Instead of adding a line/paragraph break it will create a second widget within the container (with its own outline and everything).

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

-> The dialog is closed.

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

Page crashed when typing multi-byte characters( Japanese/Chinese in my test ) after hitting enter key before image. Happened on iOS 8 safari.

Step to reproduce:

1.Make caret right before an image, then hit enter key.

2.Try to input multi-byte characters.

Expected Results:

Multi-byte characters are normally input.

Actual Results:

Page crashed and reloaded with message said: "A problem occurred with this webpage so it was reloaded"

It's not a regression while same thing works well in V2.

Environment

IE8 Strict

Reproducing Procedures

1. Open any page sample, load the editor with the following content and selection.

   	<ol>
   		<li><p>item1^</p></li>
   	</ol>
   

2. Press 'enter' at the end of the paragraph;

• Actual Result: There's an extra line height above the newly created list item.

Since there is no 'OK' button in the search and replace dialog, the enter key is useless. therefore, when in search tab, the enter key should trigger the search, and in replace dialog it should trigger the replace.

Using the following with an editor configured as enterMode=BR:

<blockquote>
	abababab^</blockquote>

Hit ENTER, then click on the blockquote button.
Expected: blockquote is removed in the current caret position.
Actual:

<blockquote>
	abababab^</blockquote>
<blockquote>
	&nbsp;</blockquote>

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

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

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

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

Sorry for the title, i don't really know how to explain it in one sentence (also, English is not my main language)

I found a problem in CKEditor where bold text that's not selected is influenced by an action on a text that is selected. It's pretty hard to describe, so let's just give an example:

• Open the 'enterkey.html' example from CKEditor (link below)
• Set enter mode and shift-enter mode both to BR.
• Empty the text area
• Click 'Bold' button
• Type one line of random text (hit enter key)
• Type another line of random text (DON'T hit enter key)
• Select the second line you just typed with your mouse
• Click 'Bold' button to remove the bold from the last line

Result: Bold is removed from line 1 + 2 Expected result: Bold is removed from selected line 2 only

Same problem occurs for other layout options, such as italic and underline.

When you hit the enter key after line 2, and then select line 2, it works fine and only line 2 is changed. Also, when you select the 2nd line with your keyboard (shift+home for example) it works fine too.

Browser/OS: I think the bug is Chrome (or webkit?) specific. The problem occurs in latest stable version of Chrome in Windows 7 + 8.

Also tested in updated stable versions of IE 10 and FireFox in Win7+8, but there it works as expected.

Tested in 'latest' and 'nightly': ​http://ckeditor.com/latest/samples/plugins/enterkey/enterkey.html ​http://nightly.ckeditor.com/13-09-04-13-06/full/samples/plugins/enterkey/enterkey.html

I hope the explanation is sufficient.

I'm using inline mode, enterMode : CKEDITOR.ENTER_DIV

1) Slap a heap of divs into the editor 2) Hit enter anywhere, a new div is created (is this by design?) 3) Ctrl-A, Del 4) Use source button to verify editor is indeed "empty" 5) Use blocks plugin to verify editor is not actually empty, but has a dummy div holder 6) Hit Enter, divs are still created 7) Use source to set <p></p> for content 8) Hit Enter, <p>s are created now

Problems: 1) Is the enter-in-div=div by design? 2) There should be a way to go back to <p> mode between divs 3) The dummy container created for an empty editor should fall back to <p> if editor is indeed empty

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>
     

Paste below code in source mode:

<ul>
    <li data-title="The UK&#39;s No 1"></li>
</ul>
<p>The UK&#39;s No 1</p>

Switch to wysiwyg mode and back to source:

<ul>
 <li data-title="The UK's No 1">&nbsp;</li>
</ul>
<p>The UK&#39;s No 1</p>

Result: attribute value is has ' instead of &#39;. It seems that entities in attribute values are not encoded.

​http://www.w3.org/TR/html-markup/syntax.html#attr-value-unquoted
​http://www.w3.org/TR/html-markup/syntax.html#syntax-attribute-value
​http://www.w3.org/TR/html-markup/syntax.html#syntax-charref

Problem can be reproduced in every browser from CKEditor 3.0.

The problem with quirks appeared after removing IE 6 & IE 7 support (#11422), because most of hacks now apply only to QM (instead of IE 7, IE 6 and IE QM). Even worse it is implemented in multipile ways (unsing "env.ie && env.quirks", "env.ie6Compat" or "document.documentMode").

I think that it would be misleading if we keep if ( env.ie6Compat ) in our code only because of QM (env.ie6Compat is true in QM) and it is better to replace it with if ( env.ieQuirks ).

Also after clean up we can save some bites (compressed ckeditor is 322 byts smaller with env.ieQuirks).

I'm not sure if there is a point in keeping env.quirks == true for non-IE browsers. Maybe env.quirks should be true only in IE 8 and IE 9 QM (so we will use just env.quirks instead of env.ieQuirks).

Browser: FF Tested on 4.5.0 dev version and built one.

1. Open ​http://tests.ckeditor.dev:1030/tests/plugins/uploadwidget/manual/image
2. Clear all content
3. D&D some image into editor, to initiate uploading.
4. During uploading D&D widget right after itself.

There is an error:

TypeError: node is null this.setStart( node.getParent(), node.getIndex() );

At core/dom/range.js:1917

Browsers: Chrome, FF and IE9+

1. Open editor with following content and selection:

   <ol>
   	<li>hello</li>
   	<li>moto</li>
   	<li><strong>[:D]</strong></li>
   </ol>
   

2. Click "Remove format" button.
3. Press "Ordered List" or "Unordered List" button.

Actual result:

There is an error in console: TypeError: node is null range.js:1724

this.setStart( node.getParent(), node.getIndex() );

Browsers: All

1. Open sample ​http://presets.ckeditor.dev/4.4.1/full-all/ckeditor/samples/replacebyclass.html.
2. Select sentence: Apollo 11 was in first paragraph.
3. Open find dialog.
4. Click find button.
5. In replace tab click 'Replace'.
6. Click close.

Actual result: There is an error in console: Uncaught TypeError: Cannot read property 'type' of null ckeditor.js:139

Plase note: similar to #11423

In IE10 with Compatibility View, if move vertical scroll show javascript error Incompatible markup pointers for this operation.

1. Use these three plugins embed,embedsemantic,autoembed.
2. Empty the editor.
3. Please (Ctrl+V) this link into editor: ​https://twitter.com/reinmarpl/status/573118615274315776 (the non-semantic Media Embed is created )
4. Select created widget by clicking on it
5. Open Semantic Media Embed Dialog, paste the link and click OK.

Expected Result: Non-semantic Media Embed should be changed to Semantic one.

Actual result: JS error is thrown.

Since it works when doing this with dialogs I'm guessing that autoembed plugin doesn't report widget/content to some list.

On all dialogs that provide an advanced tab, the user can specify CSS styling through the Styles field. However this field is not validated when user enters inValid CSS & clicks OK. Therefore they can enter fake values and it looks to the user that they are accepted.

To reproduce:

1. Open the Table dialog.
2. On the advanced tab, if the user enters a name value pair that is not valid css (e.g. myFakeAttribute: 200px)
3. Click OK.

Expected Result: An error warning should occur indicating that the user has entered inCalid css

Problem: There is no error warning that the value entered is inValid CSS. However when the dialog is opened again, Styles field is now empty. The user has not been told that their content is invalid so they have no idea why their content has been removed. This would also occur if the user accidentally mis-spelled a CSS attribute name e.g. widtth: 100px. This is not reported as invalid, but it is removed from the Styles field on the dialog.

Is there anyway to use the same validation that removes these entries from the Styles field, to also alert the user to invalid content when they click OK on the dialog? Do you know at what point the invalid entries get removed from the Styles field? Is this something CKEditor has control over or is it due to the browser?

This issue originally reported in ticket #8124 which is fixed in 3.6.2 but the issues mentioned in ticket #8124 still exists so we are logging this new ticket to track the issue

Hi.

Using CKEditor v4.1.1 - the following JavaScript error occurs when highlighting a word in the editor and switching to source view, when config.enterMode = EnterMode.BR.

Error: Object doesn't support property or method 'getParent'

If you remove editor container from DOM and then call editor.destroy(), you got exception, because CKEditor assumes frameElement of editable is available. But element.frameElement is null.

Demo: ​http://jsfiddle.net/danya_postfactum/wfy9fgdd/2/

Hi,

i have got a parent page which loads the ckeditor script and has an iframe in which the contenteditable divs are.

in this configuration, dargging and dropping an image gives an error:

TypeError: a is undefined: doc:a.document

line: extractHtmlFromRange:function(a,b){var c=w,d={range:a,doc:a.document}

the image is not moved, but sometimes "null" is inserted where the image should be.

my setup:

parent page with iframe id=ifr and the following code:

... load ckeditor ... <iframe id="ifr" src="iframe.php"></iframe>

$(document).ready(

function(){

var myFrame = document.getElementById('ifr'); ifr.onload=function(){

var contenteditableElement = myFrame.contentWindow.document.getElementById('editor1')

CKEDITOR.inline( contenteditableElement, {

removePlugins: 'maximize,resize'

} );

} onload ifr

});

iframe.php with <div id="editor1" contenteditable></div> and content

If I put the ckeditor script directly into iframe.php, everything works fine

best regards

Bernd

<ol>
        <li>x
            <p>y^</p>

            <ol>
                <li>z</li>
            </ol>
	</li>
</ol>

• When outdenting:

  Uncaught TypeError: Cannot call method 'getParent' of null 
  

• When indenting: Nothing happens, in previous version margin-left added to the outer list.

ie throws javascript error: Incompatible markup pointers for this operation

This occurs when drag and drop action takes place from the same browser window the editor is currently running. Additonaly the formating remains even with ForsePasteAsPlainText set as True.

1. Open attached sample.
2. Switch to source mode.
3. Error is thrown.

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

It would be more like feature request:

It would be useful to add possiblity to turn off escaping HTML in function CreateHtml(), because user may pass already escaped html.

Simple solution:

var $EscapeHTML = true;

<...>

function CreateHtml()
{
$HtmlValue = $this->EscapeHTML ? htmlspecialchars(
$this->Value ) : $this->Value ;
<...>

Best regards, Laurynas

Moved from SF:
​http://sourceforge.net/tracker/index.php?func=detail&aid=1174671&group_id=75348&atid=543656

We could encapsulate APIs for functional testing, consider the following basic ones:

1. Toolbar button clicking;
2. Dialog controlling;
3. Document selection and keystrokes;