Custom Query

Steps to reproduce

1. Visit ​http://ckeditor.com/features in firefox and chrome
2. Enter the following into console:

   CKEDITOR.instances.ckdemo.on('key', function(event){
     console.log("key-event-data: ", event.data);
   });
   

3. Focus into CKEditor and press CTRL
4. Console output:
   in Firefox - keyCode: 17
   in Chrome - keyCode: 1114129

Expected result

In Firefox the keyCode result should be 1114129 (like CKEDITOR.CTRL)

Actual result

In Firefox the keyCode result is 17

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

CKEditor:

Actual demo version on homepage ​http://ckeditor.com/features (4.6.2)

Browser:

Firefox: 53.0 (64bit)
Chrome: 58.0.3029.96 (64-bit)

OS:

Ubuntu 16.10

It seems that if I lock the UndoManager for snapshots, keyboard presses will still render undo button to indicate that undo steps are available.

1. Open any sample with CKEditor. (i.e. samples/replacebyclass.html)
2. Go to JavaScript console, and enter following code:

CKEDITOR.instances.editor1.fire( 'lockSnapshot', { dontUpdate: true } );
CKEDITOR.instances.editor1.fire( 'lockSnapshot', { dontUpdate: true } );

3. That should result with UndoManager lock counter being increased to 2, confirm that by evaluating:

CKEDITOR.instances.editor1.undoManager.locked.level

4. Type anything in the editable.

Expected result:
No snapshot should be created, undo button should be off/unavailable.

Current result:
Undo button is enabled.

Additional info:

1. Good news is that it seems not to be recent regression, as I've checked 4.3.0 and the same error occurs there.
2. Commands do cares about UndoManager being locked, because if you'll perform bold or any other command it will not record snapshot.
3. Snapshots are not really recorded, you can check that by evaluating CKEDITOR.instances.editor1.undoManager.snapshots.length

Continuation of ticket #7943.

It has been fixed in CKE 3.x but can be reproduced in 4.x branch in both skins.

To reproduce:
Add styles on page:

<style type="text/css">
    label,select,.ui-select-menu { float: left; margin-right: 10px; font-size:1.3em; height:26px; line-height:26px; font-size:1em; }
</style>

Open dialog - labels are floated.

While working on ticket:11982 I found out that ​this code might be error prone. Based on this ​fix. When I commented lines which might be risky I found out that all tests pass. Few things need to be done:

1. Tests have to be written.
2. We should find in which use cases there might be an errors (mostly when there is one li in list).
3. Eventually fixes should be applied.

The languageCodeInputLabel property defined in the language files is redundant, since the Div Container dialog window is using the langCode property of the Link dialog window instead.

Moreover, most language files contain faulty translation of the langCode property which instead of an equivalent of "language code" says "language direction". Result: the Advanced tabs of the Link and Div Container dialog windows in most languages have 2 entries for the Language Direction and none for the Language Code.

ckeditor does not handle language code as 'it-IT' or 'en-US', 'en-GB' etc etc

it should fall back to 'it', 'en' or whatever instead it does not recognize these language coeds

When the new language menu provided in CKEditor 4.3 contains a large number of language options, the menu is just displayed as one long list - see attached screen capture. This menu should be styled in a different way so that the language list can be displayed in a more user friendly way when a large number of language options are provided e.g. the menu could be scrollable or presented as a grid layout etc.

Otherwise there should be some way to customize the styling of this menu so that we could use CSS to change the appearance of the menu. Currently there is no easy way to customize this menu.

One idea which could help to make the styling of menus more flexible is adding a feature specific class to the cke_menu_panel div like cke_menu__<menuName> e.g. cke_menu__language, cke_menu__scayt etc. We realize that this div is reused for all menus though so this would need to be maintained as menus are opened and closed. Would this be possible?

The language button is working on inline level, but currently not on a block level. You will notice that with RTL languages in LTR texts as the text stays left aligned. We could add the following behavior:

• if text included in a block element is selected, the block element should get a lang and dir attribute.
• if the user is adding a next blocklevel element, the language should be applied as well
• if the user has a blocklevel selected with a language, the language button should be active.
• If the user deactivate the button, the blocklevel element should remove the language and dir attributes.

Over at ​https://www.drupal.org/node/1993928, we're working on shipping the Language plugin with Drupal 8 core. It will not be enabled by default, but it will be 'available' by default, hence making it simple to meet WCAG2, which is required by many governments.

It's working well in general, except… that the way it handles <span>s is extremely frustrating.

If you write

<p><span dir="ltr" lang="nl">Hallo, wereld!</span></p>

and you have your cursor at the end of that line and press enter (to start a new paragraph) and type something, you'll get:

<p><span dir="ltr" lang="nl">Hallo, wereld!</span></p>
<p><span dir="ltr" lang="nl">foo</span></p>

Where you'd really expect the language span to not be applied to this new paragraph.

Issue is reproducable with Chrome/31.0.1627.0, Firefox 23.0, MSIE10

We're unable to nest multiple spans using languages plugin

1. open any sample with CKEditor languages plugin enabled (i.e. samples/replacebyclass.html)
2. Replace content with following HTML: <p>This is sample code.</p>
3. Select sample substring and apply French language (by clicking chinese icon at toolbar, and selecting proper lang).
4. Select is sample code substring and apply Spanish language.

Expected result:
Produced source code: <p>This <span dir="ltr" lang="es">is <span dir="ltr" lang="fr">sample</span> code</span>.</p>

Current result:
Paragraph with nested spans: <p>This <span dir="ltr" lang="es">is sample code</span>.</p>

additional info:

1. Currently spans are created with CKEDITOR.style object being passed to CKEDITOR.editor.applyStyle()

Reproduce:

1. With Safari and Chrome, go to ​http://ckeditor.com/demo
2. Right click on the Little Red Riding Hood image.
3. Select "Image Properties"
4. Changle "Alignment" to "<not set">
5. Press "Ok"

Place your cursor in the "Little Red Riding Hood" text that is next to the image. Observe that the cursor is as tall as the image. This differs from other browsers. While this is probably inherent to the browser, perhaps there is something that can be applied to the image so that it remains inline but does not affect the cursor size.

Add-on to #13824

1. Drop large file into editor e.g. 30MB image
2. Try clicking in to editor

Result: Eeditor doesn't respond because it processes base64 string to display image in editor. Also the very important thing to notice is that upload of such file with preview feature used takes much much longer.

We should introduce configuration variable for maximum file size for which preview should be displayed. Any file above that size will be uploaded without the preview. Image will be displayed only after the file is fully uploaded to the server.

Many people will disable ACF because it modifies whatever content exists upon initial load if the classes, attributes, styles... haven't been added to the allowedContent.

A simple example is the stylesheet parser: you have been forced to make it disable the ACF in order to have things work.

Instead, the ACF could have an optional "learn mode" that adds whatever exists in the initial source to the allowedContent for that instance (maybe even configurable to work only on elements/classes/attributes/styles)

So now the stylesheet parser doesn't need to completely disable ACF: the first run of ACF sees some classes that aren't included in the ACF, so it adds those classes. Then the stylesheet is loaded and adds all the desired classes for the content. Nothing has been lost. The user then tries to paste something from an external page and the ACF is run and cleans up removing anything undesired. If the user copies and pastes something inside the editor, then all that content now is allowed and no filtering happens. everyone is happy.

Hey CkEditor team

We found the align button in Ckeditor tool bar does not work correctly with enterMode as CKEDITOR.ENTER_BR

By default, the enterMode is <p>.

Under this mode, the content of editor always have <p></br><p> inside, which can not be removed by backspace(Look up through HTML inspector).

Just because of this, the left-align button is hovered when we click on the editor input area with nothing typed in.

However, under enterMode as CKEDITOR.ENTER_BR, the content is empty inside <body>

Just leak of <p></br><p>, the left-align button is NOT hovered to indicate its current states.

I wonder if the align-button(at least left-align button) is designed to work under mode of CKEDITOR.ENTER_BR.

If yes, should this issue be considered as a bug.

Many thanks John.

Reproduced with the online builder only. The CLI one works fine.

Feature request from WCM around stylesheet parser.

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>"

Config example:

extraPlugins: "stylesheetparser"
contentsCss: '<styleSheetURL>'
stylesSet: []

The stylesheet contains the following CSS styles,

p.ibm
{
 color : red;
 font-size: 200%;
}

.cats
{
 color : purple;
 font-size: 200%;
}

.sydney
{
 color : blue;
 font-size: 200%;
}

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>". When the style is applied to a text selection, the element tag wraps the text selection and then the class attribute is set. When the above style sheet is passed in, the styles in the dropdown menu only contain "p.ibm".

Is it possible for the style sheet parser to generate style sets for CSS selectors that have the ".<class name>" format and wrap the text selection with "<span>" tags ? The objective is to get "cats" and "sydney" appear in the style sheet drop down menu with proper styling. When either "cats" or "sydney" is applied to a text selection, it should wrap the text selection with "<span>" tags, and set the applicable class attribute (either "cats" or "sydney").

Without modifying the internal Javascript code of the stylesheetparser, the following attributes can be set.

stylesheetParser_validSelectors : /(^\w|\.)/ stylesheetParser_skipSelectors : /^body/i

In this case, all 3 styles will appear in the dropdown menu, along with the styles in stylesheets of other CKeditor plugins. In my case, I also had the styles of "/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" in the dropdown menu. The class selectors appear in the dropdown menu as "<class='cats'>.cats". The class selectors will not have the styling applied to them in the dropdown menu. But when there are applied to a text selection, the style is applied to the text selection.  

1. Enter some text on one line.
2. Insert a smilie at the end of the text.
3. Move caret after the smilies.
4. Press Enter.

Image is brought down to the next line. Happens with ENTER_BR and ENTER_P

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

Test case 1

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

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

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

Expected result: There should be only two list items

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

Actual

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

Test case 2

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

Expected result

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

Actual

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

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

<br> tag is lost when the block element after line break is empty.

Steps to reproduce

• Set in CKEditor configuration ignoreEmptyParagraph to false
• Paste the following in source mode:

  <div>
  	First line</div>
  <br />
  <div>
  </div>
  

• Switch to wysiwyg mode, result:

  <div>
  	First line</div>
  <div>
  	&nbsp;</div>
  

Same things happens when <p> tag is used instead of <div>.

Suppose someone has added a few line breaks with Shift+Enter to visually separate an indented list, like in the example below:

<ul>
	<li>
		test 1<br />
		<br />
		<br />
		<ul>
			<li>
				test 11</li>
			<li>
				test 12</li>
		</ul>
	</li>
</ul>

Switch to source/wysiwyg twice. Result: all line breaks are lost

<ul>
	<li>
		test 1
		<ul>
			<li>
				test 11</li>
			<li>
				test 12</li>
		</ul>
	</li>
</ul>

as in MsWord, it looks nice to have line spacing option as in button click: -Space Sizes List -add/remove spacing after paragraph -add/remove space before paragraph

I Think this will completethe editor to be as perfect as using MSWORD.

1. Go to ​http://tests.ckeditor.dev:1030/tests/plugins/clipboard/manual/draganddrop
2. Drag the block widget inside inline editor around <blockquote>

Expected: The line always ends within editable.

Actual: The line extends beyond editable.

Might have something to do with #13155.

Environment

Found under Opera, also happens under IE

TC

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

Image with link should be added

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

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

Expected

Copied image == pasted

Actual

Pasted image has no link attribute

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

Steps to reproduce

1. Clean editor contents and type 'dddd'
2. Select this text and press link button, type any link and press OK.
3. Press End button to move to the end of link and the Shift+Enter to insert BR
4. Type 'eeee'. Everything is fine - text is unlinked.
5. Press up arrow and End button to move to the end of the link
6. Press Shift+Enter and start typing 'ffff'.

Expected result

Typed text should be unlinked

Actual result

Typed text is linked.

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

Problem can be reproduced at least from CKEditor 4.0

Steps to reproduce

1. go to CKEditor demo ​http://ckeditor.com/demo#standard
2. switch to source code mode
3. remove the existing source
4. enter

   <a href="www.google.de" onclick="alert('onclick');" >my link with onclick</a>
   

5. switch to wysiwyg mode
6. doubleclick the link
7. in the link dialog, click the OK button

Expected result

onclick attribute is preserved without change.

Actual result

onclick attribute is removed

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

I guess that CKEditor removes the onClick attribute because it might have been generated by CKEditor before via the Target option _<popup window>_. But CKEditors link dialog should remove the onClick only if the target option _<popup window>_ was set when the link dialog was opened.

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

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

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

OS: Windows 7 Professional SP1

Browser: IE

Version: 9

Scenario:

1. Switch to source mode
2. Insert this html:

<form action="/formHandler" class="hp-smartInsertForm" method="post">
	<fieldset>
		<p>
			Here you need to add link <a href="http://www.google.com?v=1" target="_self">http://www.google.com</a></p>
	</fieldset>
</form>

3. Switch back to WYSIWYG mode
4. Double click the link

Defect: Link editing dialog shown, but field for href is blank

When i came across documentation for ACF-Custom mode, I clicked a link for live demonstration of ACF-Custom mode. But, result is Not Found (404).

The link plugin is not registering a selected link when a <br> is inside an <a>, which the editor sometimes creates by itself.

To replicate: ​http://nightly.ckeditor.com/5649/_samples/replacebyclass.html

• press Enter at end of line
• click the Link button
• create a link (e.g. www.google.com)
• click OK
• click link button again, it will work
• click OK
• click link button again, there will be nothing in the URL field
• you also then can't right click the link and edit it.

If that doesn't reproduce the problem, try adding a <br> to the <a> element manually, e.g. using Firebug.

Firefox 3.6.6, Mac OS X 10.6.3

I write a lot of articles in which I comment others website pages (youtube video/news articles, blogs...). In my article, I would like to have a preview of the "commented page".

For the moment I use Facebook link preview feature to generate the link preview by pasting the "commented page" link in the Facebook 'What's in your mind?" field. Then I copy the preview with print screen, upload the image in my article and then I have to move the image in the correct FTP folder... It's quite a big work.

A great open source plugin​http://lab.leocardz.com/facebook-link-preview-php--jquery/ exist for other cms.

That would be awesome if you could implement it your editor.

Background:
It looks that new browsers handle UTF-8 characters in URLs. They show utf-8 characters to user but in background use encoded values to gets right URL.
​http://stackoverflow.com/questions/2742852/unicode-characters-in-urls
​http://stackoverflow.com/questions/6625035/utf-8-characters-in-urls[[BR]] ​http://en.wikipedia.org/wiki/Internationalized_domain_name
It also looks like that old or very old browsers handle encoded values only.

Real-life use case:
It is possible that application has to handle many types of browsers including old ones thus link created in CKEditor e.g. <a href="#első">line1</a> may get transformed to <a href="#els%C5%91">line1</a>. Href value may end up in URL thus it gets encoded on server-side

CKEditor issue: Beacuse of the above, code loaded into editor may look like:

<p><a href="#els%C5%91">line1</a></p>
<p>many lines...</p>
<p><a id="első" name="első">line101</a></p>

If you doble-click on link, link properties dialog will show but value első will not be shown as selected in dropdown.

I think editor should look for both UTF-8 and encoded value (encodeURIComponent perhaps).
The same thing should be done when pressing ok in link properties dialog. It should be checked if current value is első or els%C5%91, next new value should be compared with current one and if they match (probably only if they match) current one should be left. Such check should prevent changing els%C5%91 to első but if application does such transformation on request basis then perhaps this isn't necessary in editor.

Problem can be reproduced from CKEditor 3.0 in both CKE 3.x and CKE 4.x (v4)

Descriptive summary: When editor is initialized in readOnly mode, there is no need to preventDefault() on links, because he doesn't need caret positioning.

Steps to reproduce:

1. Open readOnly editor demo
2. Enable readOnly mode
3. Click on the link

Browser and OS: Chrome and Firefox under both Windows and Linux

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

When I have a link to a file (i.e. tmp.doc), that link becomes clickable in Firefox. I am able to reproduce this using the CKEditor demo page in Firefox only, seems to work in Chrome and IE. I am using Firefox version 22.0. To reproduce:

1. Select text
2. Click Insert Link button
3. Type "/tmp.doc" in the URL field.
4. Click OK.
5. Single click on the newly created link in the editor and the document.location changes to /tmp.doc

If you type "/tmp.php" or "/tmp.html", the link is not clickable. It seems that non-web mime types trigger the link to be clickable (i.e. /tmp.xls also triggers the link to be clickable)

When linking an image tag which is wrapped by span tag(s) the link is placed around the span tag(s) rather than the img tag. Unless the span tag has text inside it as well as the img tag, in this case the img tag will only be linked.

Example html: <a href="​http://www.google.com"><span style="font-size: 11px;"><img alt="wink" src="/ckeditor%202/plugins/smiley/images/wink_smile.gif" title="wink" /></span></a>

Expected HTML: <span style="font-size: 11px;"><a href="​http://www.google.com"><img alt="wink" src="/ckeditor%202/plugins/smiley/images/wink_smile.gif" title="wink" /></a></span>

OS: Mac OS X 10.6.2 Browser: Firefox 3.5.8

This is Chrome@Linux bug only. Ticket for Blink: ​https://code.google.com/p/chromium/issues/detail?id=381177

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html
2. Try to dnd placeholder.
3. After drop you can only see a blank space.

When a style contains a single quote in its title, it will crash the listblock.

Offending code (plugins/listblock/plugin.js):

add : function( value, html, title )
{
	var pendingHtml = this._.pendingHtml,
		id = 'cke_' + CKEDITOR.tools.getNextNumber();

	if ( !this._.started )
	{
		pendingHtml.push( '<ul class=cke_panel_list>' );
		this._.started = 1;
	}

	this._.items[ value ] = id;

	pendingHtml.push(
		'<li id=', id, ' class=cke_panel_listItem>' +
			'<a _cke_focus=1 hidefocus=true' +
				' title="', title || value, '"' +
				' href="javascript:void(\'', value, '\')"' +
				' onclick="CKEDITOR.tools.callFunction(', this._.getClick(), ',\'', value, '\'); return false;">',
				html || value,
			'</a>' +
		'</li>' );
},

As you can see, 'value' is passed verbatim into the pendingHtml array, which doesn't do anything to escape single quotes.

Steps to reproduce

1. Clear editor contents and paste following code in source mode

   <span style="font-family: arial;">Zeile1<br />
   Zeile2<br />
   Zeile3</span>
   

2. Switch to wysiwyg, select all 3 lines and click the list button

Expected result

Whether this is enter-mode br or p, there should be a list with one element where content is separated by BRs.

<ul>
<li><span style="font-family: arial;">Zeile1<br />
 Zeile2<br /> 
 Zeile3</span>
</li>
</ul>

Actual result

Instead of one, three elements are created and BRs are now out of place.

<ul>
	<li><br />
	<span style="font-family:arial">Zeile1</span></li>
	<li><br />
	<span style="font-family:arial">Zeile2</span></li>
	<li><span style="font-family:arial">Zeile3</span></li>
</ul>

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

Three elements instead of one can be observed even in CKEditor 3.0.
Extra out of place BR’s can be reproduced from CKEditor 4.5.0

Problem occurs in every browser.

Browsers: all

1. Load editor with following content:

<ol>

<li><h1>One</h1></li> <li>Two</li>

</ol>

2. Put caret right after "One" word
3. Click "Increase indent" button located in toolbar

Actual result: list item with word "Two" disappear

Go to demo page:

1. Clear content

Create following list :

<ul>
  <li>item
    <ul>
      <li>item
        <ol>
	  <li>&nbsp;</li>
	  <li>item</li>
	</ol>
      </li>
    </ul>
  </li>
</ul>

2. Put cursor in first numbered item.

3. Press enter and observe the outdent behavior.

4. Press enter again and observe that outdenting does not occur.

Is this intentional behavior ?

Tested in Firefox 3.6.13, WinXP, CK version 3.4.2.

​http://ckeditor.com/demo

if content selected contains a table ,then apply list format ,the table will change to be first in content.

1. Insert line of text
2. Insert a table
3. Insert some text below the table.
4. Select all
5. Press "bullet list" button

Please refer to: 12284.

1. Paste below code into editor and switch to source:

   <p>text&nbsp;<strong>bold</strong></p>
   <ol>
   	<li>item</li>
   </ol>
   

2. Put cursor at the end of bold (make sure you are inside bold by looking at element's path)
3. Press delete

Result: List item gets bold.

If there is paragraph instead of list below the bold paragraph, it won't get bolded/styled on delete.

<p>text&nbsp;<strong>bold</strong></p>
<p>text</p>

Problem can be reproduced from CKEditor 3.6.5 rev. [7620]

Test environment, IE8 - Windows Vista (Problem does not occur on Windows 7)

After moving an existing list item down, and deleting that move, the list item does not correctly return to it's original position.

Steps to reproduce:

1. Access ckeditor.com/demo
2. Create three paragraphs, and turn them in to list items.
   • Item 1
   • Item 2
   • Item 3
3. Place your cursor before Item 2, and press the enter key. This will create an empty item between Item 1 and Item 2. You should have four total items, with one empty one.
   • Item 1
   • 
     
   • Item 2
   • Item 3
4. Again place your cursor before Item 2, and press the backspace key 2 times. The bullet for Item 2 is removed, and Item 2 is placed below the empty item.
   • Item 1
   • 
     Item 2
   • Item 3

It seems that this process will orphan the Item 2 text outside of an LI tag. If you look at the editor source, you will see...

<ul>

<li>

Item 1</li>

<li>

&nbsp;</li>

Item 2 <li>

Item 3</li>

</ul>

Ideally this will behave as it does on Windows 7 IE 8. In that environment Item 2 will merge back in to the empty item.

In the old fckeditor I could enter the following (incorrect) HTML code in source mode:

<li>item one</li>
<li>item two</li>

When I toggled / switched back to wysiwyg mode fckeditor would realize I was trying to make a list and automatically append the proper UL tag around my list items like so:

<ul>
   <li>item one</li>
   <li>item two</li>
</ul>

I've noticed that ckeditor 3.3.2 does not automatically detect that I'm trying to create a list and not only does it not add in the ul tags but instead creates new lines (more and more of them) every time I toggle from source to wysiwyg like so: First toggle:

<p>&nbsp;</p>
<p>
<li>
	item one</li>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<li>
	item two</li>
</p>

Second toggle:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<li>
	item one</li>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<li>
	item two</li>
</p>
<p>&nbsp;</p>

Making the problem worse each time.

The problem is more pronounced if I forget to put in wrapping ul/ol AND also forget closing li tags. So for example if I put this into source:

<li>item one
<li>item two

When I toggle out and back into source I now lose my first item completely and see this in source:

Code: Select all

<p>&nbsp;</p>
<p>
<li>
   two</li>
</p>

I realize users shouldn't be putting in bad list HTML code, but it seems unfortunate that the old version of the editor was able to handle this situation and the new editor makes a mess of it

I've posted about this issue in the forums here: ​http://cksource.com/forums/viewtopic.php?f=11&t=20104

1. Open empty editor
   
2. Create order or unorder list
   
3. Any number or bullet don`t show until press any key

Steps to reproduce

1. you can use the demo - type in 5 lines of text. Break the lines with shift+return

2. Select that text and some more and make all that text bold

3. Select 3 of those lines and click on the list control

Expected result

You will see that extra return characters have been added to the list items

Actual result

The list should be clean with no extra CR's.

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

This test was run on 4.5.4 This bug was NOT present in version 3.6.6

Related Issues

• #14256

Version 3.3 added support for preserving heading structure when creating a list item. Would be nice to also preserve structure when creating list items from paragraphs.

This would help in debugging,

• when a user says "Feature X does not work as expected".
• you updated a plugin, but are not sure if it is in the browser yet or still cached somewhere server or locally.

I guess this is also the reason for any software's version string in about-dialogues.

PS: In my initial ​ request in the forum i also asked is there a way to get plugin versions on the JS console of the browser inspector? which is currently unanswered...

Go to demo page:

1. Clear content
2. Add following content:

   <ol>
     <li>item
       <ol>
         <li>item</li>
       </ol>
     </li>
     <li>item</li>
   </ol>
   

3. Place cursor at start of first list item
4. Press the 'up' key twice fast.
5. Observe the cursor is now positioned in front of the list.
6. Now press delete and observe that the first list item collapses.

Tested on Firefox 3.6.13, WinXP, CK version 3.4.2

When you are working in br mode the lists work different than in p mode. To see what i mean:

Set this in your config file: config.enterMode = CKEDITOR.ENTER_BR;

In WYSIWYG mode write something like: testing lists ckeditor

Then highlight: testing lists and the beginning of the line where's 'ckeditor' but not the text from it

Then click on any of the list buttons (numbered/bulleted list). You will get the three lines listed while in p mode you will get only the two highlighted lines listed.

1. Go to demo page
2. Produce following content

3. Hit enter

Observe : an outdent-action occurs. Expected selection to be cleared and cursor to be position on an empty paragraph below the list.

Steps to reproduce

1. Wrap CKEditor in ul tag like this <ul><li><div contenteditable="true" /></li></ul>
2. Add Liststyle plugin to the editor
3. Open the the page with CKEditor , observe context menu

Expected result

No Bulleted List Properties in the menu

Actual result

Bulleted List Properties is in the menu

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

This is a coding error. Liststyle adds Bulleted List Properties to the context menu when the current element has ul or ol ancestors. With current code, the search goes outside of CK editor and finds ul or ol. The search should stop once it reaches the editor element.

Loading a CKEditor instance with the config setting

 readOnly = true

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

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

Tested in IE9 and Chrome13 on Win 7 64bit.

Color names in preset are not localized.

In BR mode, and tab size = 9. To reproduce :

• Write some words.
• Change the font and size of these words.
• After the last word, push tab key. If you enter some text, the font and size are lost

No special setup, can be seen on sample files that come with the download.

• Open one of the demos
• Delete the default demo text
• Type any text
• Hit Return a few times to allow some space
• Type some more text and give it formatting "Heading X"
• Go to the beginning of the line
• Hit backspace
• The line with "Heading X" format is back to normal

Currently we can disable magic line only for descendants of elements which have certain attributes through magicline_tabuList.

I suggest adding a predicate on element to configuration. This would give more flexibility. In my use case magicline should be disabled on the first and last children of an element with given attribute value.

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

Browsers: All

1. Open magic line sample: ​http://presets.ckeditor.dev/4.4.0/full-all/ckeditor/samples/plugins/magicline/magicline.html
2. Set following content into editor

<p></p> <hr /> <hr />

3. Try to insert line between hr tags

Actual result: Magic line is not displayed in proper position

Please note: when add more hr tag, then magic lines are displayed between some of them.

I think this is a Widget issue, but I'm not 100% sure.

I have a CKEditor that is using the magicline, image2, and footnote plugins. The document has an image or footnote box at the bottom.

It seems that when I have one of those selected (an image or footnote box), and I try to move my mouse down to the magic line at the bottom of the document, the magic line disappears on mouseout of the widget.

If I click a piece of text to put my cursor in a text area, then the magic line works correctly.

If I have an image at the top of the page, I don't have this problem with the top magicline, so it's only the magic line at the bottom.

Attached is a 17 second video showing this problem

On triggerEditable, the bottom has an outlook of 1px dotted line while the top line doesn't have.

This's a consistency issue.

Please see commnet:3 for full explanation of the problem.

1. Insert below code into editor (div or table)

   <div style="float:right;">TEST</div>
   
   <div align="right">TEST</div>
   
   <table align="right">
   <tr><td>TEST</td></tr>
   </table>
   
   <table style="float:right;">
   <tr><td>TEST</td></tr>
   </table>
   

2. Hover below/over the element

Result: No magic line is displayed and there is no possibility exit the element.

Reproducible in the current CKEditor demo Steps:

• Remove all editor content
• Insert table

-> Magicline is available before and behind the table

• Open table properties and set horizontal alignment

-> Magicline is not available

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

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

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

Related issues

#11270

Reported on the forum: ​http://ckeditor.com/comment/123583#comment-123583

I noticed my site was becoming slow and less responsive recently and after some profiling I traced it to this plugin. It seems that anywhere the mouse is moved triggers a mouseout event so basically the entire time the user is using a page in my application with this plugin it was causing it to be less responsive.

I traced it to this line of code inside the plugin.js file of magicline. I am using v4 of ckeditor with the div based editor.

Hide the box on mouseout if mouse leaves document.

editable.attachListener( that.inInlineMode ? doc : doc.getWindow().getFrame(), 'mouseout', function( event ) {

See attached profile results. Notice I ran it for just 2.1 seconds and the top 7 calls were running for 1.7 - 1.9s a piece which explains why it was so bogged down. These results are probably slightly misleading as well because as I move my mouse in and out of the page to click the Profiler in Firebug it would stop triggering mouse out events which means realistically as long as the user has their mouse moving on the page cycles are being consumed the entire time for no reason.

This code is executed multiple times when switching between modes. It is hard to predict whether this is safe or not, therefore it should be fixed.

	// Editor commands for accessing difficult focus spaces.
	editor.addCommand( 'accessPreviousSpace', accessFocusSpaceCmd( that ) );
	editor.addCommand( 'accessNextSpace', accessFocusSpaceCmd( that, true ) );

	editor.setKeystroke( [
		[ config.magicline_keystrokePrevious, 'accessPreviousSpace' ],
		[ config.magicline_keystrokeNext, 'accessNextSpace' ]
	] );

	// Revert magicline hot node on undo/redo.
	editor.on( 'loadSnapshot', function( event ) {
		var elements = doc.getElementsByTag( that.enterBehavior ),
			element;

		for ( var i = elements.count(); i--; ) {
			if ( ( element = elements.getItem( i ) ).hasAttribute( 'data-cke-magicline-hot' ) ) {
				// Restore hotNode
				that.hotNode = element;
				// Restore last access direction
				that.lastCmdDirection = element.getAttribute( 'data-cke-magicline-dir' ) === 'true' ? true : false;
				break;
			}
		}
	} );

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>

Descriptive summary :

It seems that it is impossible to leave many flow elements. Magic line simply doesn’t show when you hover cursor below/ above or between them.

This of course makes it impossible to add new content outside of these elements.

These missing flow elements are:

• section elements: nav, section, article, aside, header, footer, hgroup
• Grouping elements: address
• Interactive elements: details (supported only in Chrome).
• Form elements: fieldset
• Interactive elements figure
• Embedded content: audio, video

Menu isn’t supported in any browser so I wasn’t able to check it.

Rest of flow elements from this list ​http://www.w3.org/TR/html-markup/common-models.html either don’t need magic line or is supported by this plugin.

Magic line is a great tool for creating new paragraphs into spaces where normally would be impossible to reach.But we have found an issue associated to it.

Issue: We have been using CKeditor for designing emails. We have seen some red line remain in final email we design. This issue we have seen to be happening from IE 10. Steps to reproduce:

1. Place your cursor such that Magic-Line is visible in ckeditor.
2. Press Ctrl+A then Ctrl+C.
3. Paste the content you will see that Magic-Line is also copied with other content.

Please see attachment.

Any help will be admirable. thanks

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.

​https://www.drupal.org/node/2585173 and ​https://www.drupal.org/node/2598070 show quite severe DX (Developer Experience) problems with CKEditor's ACF (allowedContent + requiredContent).

Some things are subtly broken (#13886).

Some things that you'd reasonably expect to accept data in the same format in fact do not accept data in said format (see ​https://www.drupal.org/node/2585173#comment-10456981: requiredContent does not accept the object format, unlike allowedContent).

Making it more robust by throwing exceptions if the provided data does not comply with one of the known formats would improve DX significantly.

Related: #13886

First: Thank you for all your efforts! You guys are extraordinary.

I would like to suggest that CKBuilder be extended to better support those of us who would prefer to load CKEditor from a CDN, but use a lot of extra plug-ins.

I have read your doc on loading from a CDN: ​http://cdn.ckeditor.com/

I already load jQuery, jQuery UI, and Amplify from CDNs, so it is nothing new to me.

However, I do not want to load CKEditor from a CDN, as of yet.

Here is why: I load a lot of extra plugins that my users like, many of which are not in your available builds from the CDN. Unless I am mistaken, I would end up with a lot of extra HTTP calls to load those plug-ins from our server that would probably offset the benefit from CDN loading.

Although, your CDN doc is helpful, it begs the question to me of why you do not just extend CKBuilder to be able to create a "mega plug-in" (a bunch of concatenated plug-ins w/ setup code, but w/o the core ckeditor) for extra plug-ins that are not part of the standard builds, such as for the CDN builds. That way, I could just load one of the available builds from the CDN, and I could use CKBuilder to put all the extra plug-ins in one "mega plug-in" to be loaded from our server. It keeps the number of HTTP calls low, and enables me to more easily set up a CDN fall-back for my users in China for whom CDNs are sometimes blocked.

And, yes, I could probably set something up to concatenate the various extra plug-ins myself. However, isn't that what CKBuilder basically does, anyway?

To start, let's state that there are so many variables on the editor usage, which makes it impossible to predict every single case. Because of this, the editor fails with js errors from time to time.

We could have a system in place, to protect users from js errors. The basic idea would be based on a simple "job system":

1. A job is started by code.
2. If an error happens during the job life-cycle:
   1. The editor status is reverted to the "before job" state.
   2. The error is reported to the user.
   3. It would be nice to have a way to the user to send the report to us, including their editor configuration, data and selection before job start and details about the job.
3. The job is finished by code.

The system must support asynchronous operations within the job (setTimeout calls, load of external files, etc).

One idea is integrating this system into the undo system transparently, so it would always revert to the previous undo snapshot in case of errors.

To reproduce:

1. For simplicity use CKEditor with CKFinder.
2. In CKEditor click Image button and then Browse Server button
3. With CKFinder upload image with name abc.jpg, select it and click OK to insert it into CKEditor.
4. In CKEditor, click on the image, next right click on it and choose image properties dialog.
5. Click Browse Server button again
6. While in CKFinder - delete edited image and upload different image with the same name abc.jpg
7. Double click on this image and the click OK to insert it into CKEditor.

Problem: In CKFinder images are refreshed but in CKEditor old image is seen in preview and in CKEditor content area.

1. One solution might be using no-cache HTTP headers on server-side
2. Second is adding some random timestamp parameter behind image name in URL filed of image dialog E.g. abc.jpg?t=1234

The second solution is where editor might come in. It would be nice if CKEditor was doing that in background without any user interaction – perhaps new configuration option could be used here.

I'd like there to be another enter key mode which matches people's expectation on how paragraphs and new lines are created, based on how most people use a textarea.

The rule would be:

• Two new lines = P element
• One new line = BR element

This is a followup for #7354.

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

Fake elements are an good idea for elements like anchors or input type=hidden to make them visible. They are also used for elements like flash or iframe to make them clickable and editable. This works good with static sizes, but there are issues in modern homepages with responsive, scalable webdesigns.

Example: There is a responsive video in format 16:9, it has a 100% width on every viewport.

CSS:
.responsivevideo {
    width: 100%;
}
.responsivevideo:before {
    content: "";
    display: block;
    position: absolute;
    padding-bottom: 56.25%;
}
.responsivevideo video {
    width: 100%;
    height: 100%;
}

HTML:
<div class="responsivevideo">
	<video controls="controls">
		<source src="track.mp4" type="video/mp4" />
	</video>
</div>

Everything is working fine, no problem. But what happen in CKEditor? If you open the source in CKEditor, the video tag is replaced by a fake image. But the size of the fake image is not in format 16:9, because it is another element. It has the initial size of the fake element only.

So my idea is, why not cover the real element by an transparent image insteed of replacing it? The produced source could look like this:

<div class="responsivevideo">
	<img src="transparent.gif" data-cke-element="cover-someID" style="position: absolute; width:[ video width ]px; height:[ video height ]px; left:[ video left ]px; right:[ video right ]px;" />
	<video controls="controls" data-cke-element="covered-someID">
		<source src="track.mp4" type="video/mp4" />
	</video>
</div>

Elements like video, audio, flash or iframe would be visible. They are connected by data-cke-element="cover-someID" and data-cke-element="covered-someID", position and size of the video must be read and set to the cover image.

Another use case is the never ending story of uneditable form input fields. Simply covering the fields and everybody will be happy. Elements can have styles defined in CSS, are visible and editable. Fake elements only can have styles defined by the plugin.

Or a path-like contruct that can have multiple components. So a complex project like drupal (yes, that's where I'm coming from) could have template xml-files in multiple places and the editor loads all of them ...

The same could probably be argues for styles ...

I should be possible to set the editing area width, so it can be more precisely controlled to match target website sizes.

Currently, config.width sets the outer size of the editor UI, unlike config.height, which is applied to the editing area instead.

This comes from ticket:4049#comment:12.

Taken from #14853 where user sugests simplification of link and image dialogs.

"For links, there really should be no more than the text, the URL, and whether to open in a new window. People rarely manually type in a URL. They paste URLs into the editor. Realistically it should automatically make into a link if it detects the proper format. The link menu doesn't need a protocol - nobody understands what that is anyway, and when people paste a url, they hardly do so without the protocol. Just have a single string be whatever they want it to be, including the protocol. The tabs in the link menu are cumbersome and most of the options are rarely used by anyone who isn't already technical. At the very least, make an option to simplify the menu with a minimalist version. If the link looks like an email, then it should prepend "mailto:" to the URL when first typing (but not after they remove it again), maybe have a small note saying why. And if the selection looks like any sort of url (whether a link or an email), it should AUTOMATICALLY place that content inside the URL field. Make it easy on the user. "

I've observed strange behaviour when switching between subscript/superscript (concerns situations when both are switched on). Added this to fcknamedcommand (start of execute function):

if (((this.Name=='Subscript') &&
(!FCK.EditorDocument.queryCommandState('Subscript')))
|| ((this.Name=='Superscript') &&
(!FCK.EditorDocument.queryCommandState('Superscript')))) {
FCK.ExecuteNamedCommand('RemoveFormat');
}

and voila - subscript/superscript works fine ...

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

In the "insert hyperlink"-window, if you select to add link to anchor, the "target" option disappears. If you select the "target" before selecting anchor- link (at default, URL is selected), the "target"- attribute is added to the link as supposed.

The reason for wanting to be able to select target, is that we use "<base target="_blank">" on our site and want anchor-links to be opened in "_top".

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

​http://tests.ckeditor.dev:1030/tests/core/selection/manual/selectionafterfocusing

Expected: Selection in editor 1: h1

Actual: Selection in editor 1: p

Tested on iPad Safari, Chorme and Firefox.

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.

1. Open editor with no content
2. Focus editor
3. Click few times "Increase indent"
4. Click "Insert/Remove ordered list"
5. Switch to source mode:

<ul>
	<li style="margin-left: 120px;">Foo</li>
	<li>Bar</li>
</ul>

Expected:

<ul style="margin-left: 120px;">
	<li>Foo</li>
	<li>Bar</li>
</ul>

Reasoning

Paragraph's margin should be moved to ol/li when creating list, because this is where indent/outdent buttons add/remove margin when you have a caret in the first item of a list.

However, I'm not sure what if we're creating list out of few paragraphs when each have different margin. I think that in such case it's best to remove those margins and "normalize" the situation. Otherwise, we'd have to go crazy and e.g. create sublists based on indentation of following paragraphs, but that would be a waste of time and we don't know if user wanted to do that anyway.

Alternatively, we can simply remove all margins when creating list, because none of the solutions seem to be 100% correct. Everyone can have different idea about how that should work.

Any HTML markup inserted before a doctype or <html> tag is clearly invalid, but the way that CKEditor handles it isn't helpful. Given a doc that starts like this (adapted from your ​full-page demo page):

<p>hello</p>
<html>
<head>
	<title>CKEditor Full Page Example</title>
</head>
<body>
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
...

It is transformed into this:

<html>
<head>
</head>
<body>
<p>hello</p>
</body>
</html>
<title>CKEditor Full Page Example</title>
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>

If you pass this into any HTML sanitisation system (such as htmlpurifier), it will probably strip everything after the closing </html> (trashing nearly all of the document, including all of the original head tag), and renderers may ignore anything after the </html>, though I note that CKEditor does not. I understand the reasoning behind this approach, but it is unlikely that is what the user intended, and it would be better to try something a little more sane first, for example, if there is a <body> tag, move the early markup after that, so the output would become:

<html>
<head>
	<title>CKEditor Full Page Example</title>
</head>
<body>
<p>hello</p>
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
...

If that fails, then fall back to wrapping it in an HTML element. As it stands, moving all the content to after the </html> tag is far more destructive than having content before the <html> tag in the first place!

• Open a sample.
• Type 'aaaa'.
• Open the find dialog, check Match whole word.
• Search for 'a'.

A JS error is thrown.

Steps to Reproduce

1. Open the editor full featured demo page
2. Paste in this test text:

   test` test~ test! test@ test# test$ test% test^ test& test* test( test) test- test_ test= test+ test[ test{ test] test} test\ test| test; test: test' test" test, test< test. test> test/ test?
   

3. Open the find dialog
4. Enter test as the search term
5. Check the Match whole word checkbox
6. Click find repeatedly

Expected Behavior

I don't think there is any consensus to exactly which characters should or should not delimit words but the main characters we are concerned with are parentheses (), square brackets [], and the slash / which are used often to enclose or connect words but without making them compound words with the other content around the symbol.

Word 2013 finds every instance of the word in this test with Find whole words only checked, Internet Explorer finds all but the one next to a single quote '

Actual Behavior

Only the instances of test that are adjacent to quotes and common sentence separator characters are found.

​KaTeX seems to be very promising library to create mathematical formulas on the client side. We should make a research if we can use it in the CKEditor.

Noticed when fixing #13612. One think is proposed fix for #13612 which repositions the dialog after rendering mathjax preview so it's always centered (​see detailed description).

The second think is sometimes mathajx preview can be so wide it does not fit inside the viewport even when repositioning dialog. To see how it looks, simply paste this formula inside mathjax dialog:

x = {-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a} x = {-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}

Probably not many people use such long and complicated formulas. However adding a scrollbar inside dialog (to enable mathjax preview scrolling) and restricting its maximum width to a viewport width could solve this issue.

Found on Chrome.

1. Make sure the browser width is like 1000px or so.
2. Enter the following formula in the mathjax dialog:

   x = {-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}{-b \pm \sqrt{b^2-4ac} \over 2a}
   

3. See that the Ok/Cancel buttons are unavailable.

Steps to reproduce

1. Open mathjax dialog
2. Enter the following formula in the mathjax dialog via context menu (right click > paste):

x = 1 + 2

Expected result

Preview should refresh with newly added formula.

Actual result

Preview does not refresh on paste from context menu.

Related to #13612.

Steps to reproduce

The MathJax plugin currently supports two configuration options: config.mathJaxClass and config.mathJaxLib. The options provided by MathJax.Hub.Config are not currently supported. Among others, one can here define macros. Without this option they may be visible in the rest of a web site (if configured elsewhere), but not in CKEditor and its MathJax editor window.

Expected result

One can configure MathJax within the CKEditor in the same way as in the rest of the web site

Actual result

MathJax within the CKEditor is not configurable

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

The MathJax.Hub.Config is set at line 309 of ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/mathjax/plugin.js without possibility to change it outside the source code by means of a configuration option: MathJax configuration, disable messages. 'MathJax.Hub.Config( {' +

'showMathMenu: false,' + 'messageStyle: "none"' +

'} );'

I do use MathJax and ckeditor in my sites. But I do not intend to use the mathjax plugin in its current state. There are two reasons:

• Edit: @jmatos I have extraced this part of your ticcket to #11595.
• The sample in ​http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/mathjax/mathjax.html shows the baseline for text and inline equations as being significantly different.

Steps:

1. instantiate ckeditor with mathjax plugin installed using https protocol.
2. clicking mathjax throws error in console:

Chrome:"[blocked] The page at '[site with https]' was loaded over     HTTPS, but ran insecure content from 'http://cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML': this content should also be loaded over HTTPS."

in Firefox: "[14:41:12.367] Blocked loading mixed active content "http://cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML" @ https://[site]"

os:pc/mac

browser:chrome

according to the Mathjax website: ​http://www.mathjax.org/resources/faqs/#problem-https

their CDN does not offer https support and instead, asks users to use ​https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML as an alternative address. It'd be great if ckeditor can test the protocol of the browser accessing the script and change the path accordingly. even better would be leaving plugin.js in the mathjax plugin folder as it was in version 4.3 beta.

The textarea used to input the Tex code should have spell checking disabled by specifying spellcheck="false" since spell checking makes absolutely no sense there.

This is especially annoying in Internet Explorer 11 which seems to fix words automatically, for example changing "\binom" to "\Binom", thus breaking the code.

Steps to reproduce

1. Configure MathJx
2. Open ckEditor on browser
3. Click Math (sigma) button

Expected result

Demo formula should be render

Actual result

Error on JS

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

Chrome, Ubuntu, CKEditor 4.5.9 (revision a35abfe), jQuery adapter and mathjx

MathJX script => ​https://cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML

a js based mathML editor plugin.

Edit: Please see comment:3[[BR]] Math plugin is disabled when inline editor is created on paragraph.

When using the inline editor on phrased content​https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content the option to add math with the Mathematical Content plugin is disabled.

According to the specs the <math> element is considered valid phrased content. I guess there is some unnecessary content filtering going on that prevents me from using the plugin? If so, is there a list where I can check which elements/plugins are allowed for each content type (flow or phrased)?