Custom Query

When CKEditor is in Inline mode, if you select multiple cells in a table and try to apply a background colour or border colour to the cells, only the top left cell seems to be affected by the change. The only way to change the cells is to go through each cell one by one.

I'm running CKE 4.3 on Firefox (v29), but I've noticed this issue is still unresolved on the latest Nightly Version.

Add the tableresize plugin to the fullPage demo.

Now clear the content, insert a table and move the mouse over it at least once so you see the resizer.

Then switch to source mode and you'll see that the body as a style="cursor:auto" set.

(depending on your speed you might even get the resizer value instead of auto).

Bonus points to fix the demo: the html created lacks a doctype (because the original value is a document fragment, not a full page)

*Can reproduce on IE9, IE 10, IE 11, Firefox 29 *Can't reproduce on Chrome 35, Safari 7

Tested on ​http://dubxpcvm022.mul.ie.ibm.com/ckeditor/4.3.X/4.3.2/20140324-1514/ckeditor/samples/skins.html

===Steps to reproduce===

1. Insert a table

2. Type something in the table

3. Press Ctrl + A to select all contents

4. Check the table

*Please refer the attachment to get more detail

===Expected Result=== The table should be highlighted when user press ctrl + A to select all contents

===Actual Result=== Only the text in the table is highlighted

First of all, big thumbs up for the new image2.plugin and also for the great inline documentation in it!

Currently, the image2 plugin only creates a figure wrapper if there is a caption. Otherwise, the default paragraph wrapper is used.

I have a use case which requires to have a figure wrapper *always*, even if there is no caption. This is mainly because we want consistency and it helps to have better styling options (now, an image can have a paragraph wrapper with or without text which leads to styling problems depending where exactly a person inserts an image).

I looked into the code to see if there is a clean way to do this, maybe through an option, but couldn't find one.

What would be the best way to approach this?

Steps to reproduce

1. Open the nightly demo page: ​http://nightly.ckeditor.com/14-06-03-06-06/standard/samples/replacebyclass.html
2. Load a large document into the editor (I have attached a 30KB sample document)
3. Type at the beginning and end of the document and compare the performance. In the affected browsers characters appear very slowly and the caret is often displayed 1 to 2 characters behind the actual insertion point.

Browser and OS

This issue occurs on Chrome in any Operating System, Internet Explorer 11 on any Operating System, and Internet Explorer 10 on Windows 8.

Firefox performs well in any Operating System. Internet Explorer 9 and 10 on Windows 7 perform well.

1. Open ​http://ckeditor.dev/plugins/widget/dev/nestedwidgets.html.
2. Start selecting from the header and end in simplebox's content.

Expected: It's impossible - entire widget should be selected as soon as you hover it with mouse.

Actual: Webkit and Blinks allow this.

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.

Unable to select input and textarea elements for cut and paste with a mouse.

Elementspath plugin shows correct selection (body p input) but ctrl + x doesn't work. Element can be selected with shift & arrow keys if element has text before or after the element.

Reproducible with Firefox 29, latest Chrome (35.0.1916.114 m) and IE 11

<p><input type="text" value="dsfsdf" /></p>

<p><input name="dsffds" type="radio" /></p>

<p><textarea name="sadasd"></textarea></p>

<p><input type="button" value="sdsa" /></p>

With IE 11 if input has some text before it, problem doesn't exist.

<p>Foo <input type="button" value="bar" /></p>

On 4.0 DEV (revision 0) that I found lying on my computer CKEditor problem does not exist on any of the above browsers.

1. Open image2 sample.
2. Insert two captioned, not aligned images one after another.
3. Use magicline to create a space between them.
4. Try to remove this space now. It's impossible.

Original description

Hi, I tried in your "​http://ckeditor.com/demo#enter" demo page, using the third CKeditor with title "Produce <div> on ENTER", to create 3 divs: the first with contenteditable="false", the second with no setting, the third with contenteditable="false".

So I put the following content as content of the ckeditor body: <div contenteditable="false">This editor produces &lt;div&gt; on ENTER.</div><div>This editor produces &lt;div&gt; on ENTER.</div><div contenteditable="false">This editor produces &lt;div&gt; on ENTER.</div>

The bug I found is that I can't delete the second line. If I clean the row and try pressing backspace or delete button, CKeditor will delete the first and/or the third div.

Many thanks in advance Kind regards Daniele

Support for such editors could be useful:

<div style="display:inline-block" contenteditable=true></div>
<span style="display:inline-block" contenteditable=true></span>

Part of: #11437.

Native drag and drop supports a dragenter event fired when mouse enters drop container. This very useful way to say where user can drop and were not. Though, there's no access to clipboard data at that point so it's impossible to react based on what's dragged.

We can do better inside editor because we'll store dragged content in a global, custom data transfer object. We just need to join all these pieces together.

Plan:

1. On editable's and nested editable's dragenter we should fire editor#dragenter with a reference to container (editable) and our data transfer if exists for this drag.
2. When editor#dragenter is cancelled the native dragenter should be prevented so user is visually notified that content is rejected. This includes general dnd as well block widgets dnd.

In CkE4 the advanced content filter will convert a span with a style that includes 'font-weight:bold' to a <strong> element.

Before Html:

<span style="color:#ffffff;   font-weight:bold">First row</span>

After Html:

<strong>First row</strong>

The expected result:

<span style="color:#ffffff"><strong>First row</strong></span>

While using Chrome in Mac OSX (10.8.5), any time you select a cell in a table and set a property(ies), the same property(ies) get cloned to the next cell in the same row. This does not happen using firefox. A way around it is to highlight the content of the cell instead of the cell itself before setting the properties.

We tested this on the live demo to make sure it wasn't already fixed.

I found following bug:

1. go to ​http://ckeditor.com/demo#widgets, "Enhanced Image" ckeditor
2. remove all the content in the editor (ctrl+a => del)
3. click on image2 plugin button in the toolbar
4. choose an image from server, click on align left (or center or right) and then insert the image in the editor
5. click outside the image in the editor => widget does not lose focus, so user can't start writing (in order to write, you have to press the right arrow in the keyboard)

Thanks Daniele

1. Switch Windows to the High Contrast Mode (LALT+LSHIFT+PTSCREEN).
2. Open Image2 sample.

Drag handler is black on the black background so it is not visible. In this mode it is important to make elements as visible as possible.

In fact you do not need High Contrast Mode to meet this issue: in any case when background is black or dark drag handler is not visible. For example if you have dark image with caption and a widget in this caption then drag handler will be hardly visible too.

Tested on IE8 and Windows 7.

At the moment AutoGrow plugin supports ​config.autoGrow_minHeight and ​config.autoGrow_maxHeight along with ​editor#autoGrow event, which can be used to force a custom height on every editor resize, i.e.

CKEDITOR.replace( 'editor2', {
	extraPlugins: 'autogrow',
	autoGrow_maxHeight: 400,
	removePlugins: 'resize',
	on: {
		autoGrow: function( evt ) {
			evt.data.newHeight = 42;
		}
	}
} );

Such behaviour is desired when the space around the editor is changing, i.e. window is resized, other page elements collapse or expand.

The event, however, controls height only, while overflow-y of editable area remains relative to config.autoGrow_maxHeight. The result is that even though it is possible to customise the main behaviour of the plugin, the scrollbar of editable area might be missing, making editor contents unreachable, which is a serious UX flaw.

Possible solutions:

1. Implement editor.plugins.autoGrow.setMaxHeight, which would override config.autoGrow_maxHeight on demand.
   1. + Solves the problem.
   2. - Change is permanent. Some devs may want to override autoGrow_maxHeight on demand, while in other cases they would expect default configuration to be preserved and respected.
2. Re-implement editor#autoGrow event, so autoGrow_maxHeight can be changed for every single event.
   1. + Solves the problem.
   2. + The impact of config.autoGrow_maxHeight remains.
   3. - Makes the code less obvious.
   4. - It's not straightforward. Hard to reach in documentation.

1. On IEs empty cells' selection is invisible. IE renders only text selection.
2. On FF there's a similar problem like on IE, with a difference that cells can be selected as a whole but only by mouse.
3. Column selection is impossible on all browsers except Firefox.
4. It's hard to select a row.
5. [IE9+] No visual indication that a table is selected (#10897).

The full solution would be a fake table selection - similar to fake element selection which we have for non-editable elements. Partial solutions may also be possible.

Sub tickets: #8830, #12043.

1. Go to ​http://ckeditor.com/latest/samples/replacebycode.html
2. Press "New Page" button
3. Insert a table
4. Apply "Borderless Table" style

Result

Width definition is removed (a side effect i that now it is hard to insert content into cells).

Expected result

The following style definition should only add and/or override styles that are defined in the styles object. Other styles that were applied already to a table shouldn't be lost.

{
    name: 'Borderless Table',
    element: 'table',
    styles: {
        'border-style': 'hidden',
        'background-color': '#E6E6FA' 
    } 
},

If my intention is to remove 'width' when applying this style, I should be able to define it as width: '' or width: null etc.

Something I've noticed is that if you start typing a paragraph with a large font (tested with 48px) and mid-paragraph switch to a smaller font (tested with 16px), as the paragraph line wraps, the line heights are enormous as they they are formatted for the initial 48px content.

We use your product here daily. Looking into the HTML code that it produces, I can see that it creates a span element with a font-size of 48px as a "wrapper". Then, when I switch font-size to 16px, the editor creates a new span element with this new font-size and places it into the 48px wrapper. Thus, the entire paragraph inherits the line-height initially created by the 48px font size.

A current workaround is to create the entire paragraph with the 16px font size first. Then, after the paragraph is finished, select the word(s) that you want to be 48px and apply it. Doing it this way will create the wrapper with the 16px font size and an internal span of 48px font size where the overall paragraph line-height will be created from the wrapper 16px font size span.

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

Features that needs to be disabled in readOnly mode:

• widget hover,
• widget focus on click,
• nested editables must not be editable,
• drag handler must not be visible and widget must not be draggable
• #14558 - it is possible to delete widget in read only mode

Related: #11825.

1. Load replacebycode sample.
2. Clear editor contents with new page button.
3. Press Bold and type few characters.
4. Press Ctrl+A and then hit Backspsce or Delete.

Result: Bold text is not deleted and cursor is moved to the beginning.

Problem can be reproduced in Blink and Safari 6+ (works fine in Safari 5)

Tried this against the nightly build.

Editor does not autocapitalize correctly upon pressing return (new line). For it to autocapitalize, one has to enter a dot (.) (i.e. close the previous sentence).

To Reproduce: Go to nightly build from iOS Safari (mobile Safari) Enter a word 'Hello' Tap on Return to go to a new line Type something. Text will not be capitalized.

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.

Currently, if any finder's lookup returned >0 for specific element it's not possible to override this. There has to be another CKEDITOR.LINEUTILS_* flag (e.g. CKEDITOR.LINEUTILS_NONE) which when returned will block line around given element regardless of what has been returned from other lookups.

The href value replaces the text value of the anchor under certain circumstances in IE11.

Steps to reproduce:

1. Either click the 'Link' icon in CKEditor and enter a url or enter an anchor tag directly in the Source of CKEditor (ex: ​http://www.yahoo.com)
2. Click the Source button in CKEditor
3. Change the text of the <a> but not the href value to something with http (ex: ​http://www.google.com)
4. Click the Source button again, you should see the WYSIWYG editor. (it should say ​http://www.google.com)
5. Double click the link you created from step 1.
6. Click OK

The link text changes from what was set in step 3 to the original href value in step 1.

Expected Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.google.com</a>

Actual Result (HTML Source): <a href="​http://www.yahoo.com">​http://www.yahoo.com</a>

I have noticed this issue on the version of CKEditor my platform uses - 4.3.3. However, I have also noticed this issue on the demo CKEditor (​http://ckeditor.com/demo), which I believe uses version 4.4.2

Browser: IE 11.0.9600.17126 OS: Windows 7

On the default Twitter App on Mac OS X, copy a link to a tweet (right-click > Copy Link To Tweet) and try to paste it into CKEditor - nothing appears.

Reproducible only on Safari.

1. Open Chrome and browse to a URL, copy the URL from the address bar to the clipboard
2. Switch to Safari and open CKEditor
3. Attempt to paste the URL into CKEditor

Results: It is not possible to paste URL from Chrome to Safari. It works however with Chrome/Chrome or Safari/Chrome or even Firefox/Safari but not Chrome/Safari.

To reproduce the defect:

1. Enable Code Snippet widget and click on Insert Code Snippet icon in toolbar to open Code Snippet widget.

2. Code Snippet dialog opens, focus goes to Language combo and JAWS reads Language combo, not set

3. Use the down arrow key

Issue: JAWS reads not set option again, This should be fixed, we should set not set as default option when Code Snippet dialog opens

It looks like the save plugin has been left in a state which is pretty much hard to explain and where this plugin isn't useful at all.

1. The Save button is only available when editor.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE, which means that it is not available for example in "Replace Textarea with Inline Editor" where editor mode is ELEMENT_MODE_INLINE.

2. "Replace Textarea with Inline Editor" is not the only case where the Save buton would be useful. After all thanks to the "save" event each CKEditor instance can benefit from this button to save data using AJAX.

3. The requirement of having a parent <form> element is invalid. Again, thanks to the save element a developer may want to have such button even inside an instance that is not wrapped inside a form. Actually, if there is a need for the Save button and a listener for "save" event used, it's even more probable that CKEditor is not a part of a form element.

What we should do is:

1. Keep the Save button always enabled.
2. If parent <form> element is detected, submit the form.
3. Always fire the save event when Save button is used: (i) to make it possible to save data through ajax and (ii) to prevent from submitting the form if the developer doesn't want it.

Warning: (1) is tricky as it will enable Save button for any existing instances. On the other side we can simply warn about this in changelog and blog just like we did with ACF.

Based on ​http://ckeditor.com/forums/CKEditor/Provide-Details-about-CKEditor-in-machine-readable-form

Relying on parsing minified JavaScript code of ckeditor.js with regular expression to get CKEditor version number has a risk of stopping working at any moment, due to code refactoring, improved minification method etc.

Although the version number of CKEditor doesn't say a lot about the CKEditor itself anyway (various custom builds exist etc.), it still can say something regarding e.g. available configuration options, that can be later displayed in the administration backend.

Separate file?

By adding a separate file with information about CKEditor build, we'd start confusing users with too many irrelevant files in the main folder.

build-config.js?

Including version number and revision in this file would be confusing again, as it may suggest that uoploading it to the online builder would result in building the same version again (e.g. 4.3.2 while 4.4.3 already exists).

ckeditor.js

My suggestion is to use the very first comment at the top of ckeditor.js (with copyrights), where such information could be added by both command line and online builder:

/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
Ver:4.4.2 Rev:1567b48
*/

Now there is no way to create paragraph inside of a list item. When a user hits either enter or shift-enter, the <li> is split.

I suggest using shift-enter for changing contents within the same list element. It would insert br, split paragraph or division depending on the enter mode.

1) use ​http://ckeditor.com/demo#full, clear all (I used Gecko - last version of PaleMoon)
2) change contents.css or use different way do add style: .cke_editable span:after {content: ' [' attr(class) ']'}
3) write "blah blah".
4) select line and change Style to marker (now you will see yellow line: blah blah [marker]).
5) go to the end of this line.
6) press left arrow and obtain twice this error:

Error: Permission denied to access property 'nodeType'
Source File: http://cdn.ckeditor.com/4.4.2/standard-all/ckeditor.js
Line: 364

FF's bug on Bugzilla: ​https://bugzilla.mozilla.org/show_bug.cgi?id=1035749

Some part of our dropdown markers (an arrow) is not grayed out when readonly mode is set.

It would be good idea to keep behaviour consistent.

1. open CKEditor Read-Only sample (i.e. samples/readonly.html)
2. click "Make it read-only" button

Expected result:
Arrows in buttons for plugin like Text Color, Background Color, Set Language, SCAYT are not grayed out.

Current result:
Arrows should be grayed out the same way as icons are.

additional info:

1. Note that arrows for Styles/Format combo are grayed as expected.

After resizable element being drag and droped in editor you're able to resize it.

1. Make sure you have config.disableObjectResizing = true; ( use config or editor init function ).
2. Open any sample with CKEditor (i.e. samples/replacebyclass.html).
3. Select dragable element (image, anchor, hr).
4. Drag and drop it anywhere.
5. Use resizer grid.

Expected result:
Element should not change its size.

Current result:
You're able to resize an element.

additional info:

1. Source of the issue is in ckeditor-dev/plugins/wysiwygarea/plugin.js. selectedElement is assigned only after selectionChange event, and it should be also executed after drop event on drop target.

TinyMCE has HTML5 sections and articles editing with wrapping elements. IMHO worth checking it out.

​http://www.tinymce.com/tryit/html5_formats.php

CMD+L always moves focus to Safari's URL bar, so it's impossible to create a link using keystroke.

Linking is often available under CMD+K. Maybe we can set both keystrokes?

Hi all, I found this tricky bug (I attached a video on this) regarding placeholder plugin, but I guess it is related to all plugin based on widgets.

1. open placeholder plugin sample page
2. create many placeholders on many rows
3. move a placeholder just before another one (repeat this step many times) => randomly moved placeholder (or maybe the destination one) disappear! it gets deleted (nothing can anymore found in html)

I attached a video on this (check firsts 2 minutes of the video)

Thanks a lot again Kind Regards Daniele

We have a situation when our webpages name (this is actually the <title> tag) are tested with special character sets. As a result (loading this page into CK) the title tag completely messed up and its content is moved under the body. The title we applied is this:

ÑÇôìë<?:"';.!@#$%^&*\)/

I could narrow down what character sequence causes the issue. So this is it:

<?

So, whenever we apply this <? as a title it will be encoded and saved as

<title>&lt;?</title>

. That is fine but during the load process this title is messed up and we get the following weird title tag:

><title data-cke-title="Rich Text Editor, Textarea1, Press ALT 0 for help

Here, there is no normal opening <title> tag and the closing </title> is missing.

Fortunately I can reproduce this kind of behavior in the DEMO. STR:

1. Go to DEMO page (I used IE11) and launch full featured page.
2. clear the content and switch to source view
3. paste the following string into it: (note, the <title> contains the encoded <? characters and browsers can display this title with no issue at all)

<html>
<head>
<title>&lt;?</title>
</head>
<body>
</body>
</html>

4. switch back to wysiwyg mode and the page is not empty (it should be). It contains the <? characters. This is because the <title> tag was broke up and its content moved to the body. So, something odd happens during the setData().

ATAG is of course the Authoring Tool Accessibility Guidelines (ATAG) 2.0.

​http://www.w3.org/WAI/AU/CR20/ATAGintro.html

How close any system can come to meeting ATAG will very much depend on the WYSIWYG that they use.

CKEditor has been good with WCAG, but would like to have a review for how it handles some of the elements of the W3C's ATAG.

I want to specify a background image on a table with a full URL. With the dialogadvtab plugin I have the possibility to set it in the style attribute directly. But the validation function of the field does not allow a ":" sign in the style property value.

Steps to reproduce:

• Go to full demo er nightly Bild ckeditor.
• Select the table in the demo content.
• Call table properties Dialog and click on "advanced" tab.
• In the style input field enter "background-image:url('http://c.cksource.com/a/1/img/sample.jpg')"
• Click on OK.
• Validation failure message appears.

i've configured ckeditor inside jquery ui dialogue box text area. My aim is to get the whatever data entered by the user. Including spaces as many as entred by the user. When user enters a space after some text it returning same as mean text+space in chrome. But in FF and IE(IE9,IE11) the space is getting omitted and it is returning only text but not the space which entered at end. If user enters more than one space then the spaces are returning along with text mean text+space(if space are more than one). This behaviour is in FF and IE9,IE11 but not in GChrome. In GChrome it's working as expectdly. Below link may help you ​http://jsfiddle.net/Ravi_SPS/pBL5G/2/

1. Use standard editor but add indentblock plugin to it.
2. Set below configuration:

   CKEDITOR.replace( 'editor1', {
     removePlugins : 'format',
     extraPlugins : 'indentblock',
     enterMode : CKEDITOR.ENTER_DIV
   } );
   

3. Go to test page and try to indent any div block. It is impossible.

Problem can be reproduced on all browsers from CKEditor 4.3

With #12164 we now have a complete set of "justify/align" language strings duplicated in two places:

• The ​justify plugin,
• The ​core language file, to use in the Table Cell Properties dialog window.

We should just use the common language strings in both contexts.

Another issue is that the language strings from the Justify plugin already ​have lots of translations, so when clearing the mess, we should make sure we do not lose them.

1. Use enter mode sample with allowedContent:true.
2. Paste below code into editor in Enter P or Div mode (in BR more some BR's are removed: #10497, #11392)

   <span>
   Some Text
   <br />
   <br />
   <br />
   </span>
   

3. Switch to WYSIWYG.

Results: BRs get extracted out side of span and changed into divs or paragraphs.

Problem can be reproduced from CKEditor 3.5.4 rev. [6740].

steps to reproduce:

1. in mac Chrome 35.0.1916.153 open ​http://ckeditor.com/demo
2. view source
3. delete all the source code
4. paste in the following source code:

   <p>line 1</p>
   <p>example 1<br />
   <a href="/node/1256">General Pathology</a></p>
   

5. exit source view
6. place the cursor at the end of the example 1 line
7. press Enter

actual: a new paragraph is created and the cursor moves unexpectedly to the beginning of the first line in the Body field.

expected: a new paragraph is created but the cursor stays in the expected position

problem DOES NOT happen in firefox 30.0 on mac os 10.9.3.

In CKEDITOR.dialog we have ​iframeAdded listener, and I see no such event fired in full package. I guess that it might been too hastily removed from the code.

I noticed that issue when I was checking #9611 issue.

Event is not docummented, but I think it should be fired by the iframedialog plugin, so keyboard handler can be attached to the frame.

To reproduce the defect:

1. Open Sample widgets page ​http://ckeditor.com/demo#widgets

2. Try to select any of widgets( Simple Box, Code Snippet, Enhanced Image, Mathematical Formulas) using keyboard

Issue: It's not possible, It's possible to select them using only with mouse not with keyboard, as a result we can not open widget properties dialog using keyboard. This is a failure of Accessibility Checkpoint 2.1a Keyboard.

Check comment:4 for more details.

To reproduce the defect:

1. Open Sample widgets page ​http://ckeditor.com/demo#widgets

2. Press tab after Widget Tutorial link(above Simple Box Template)

Expected Result: Focus goes in to editor body & cursor at start of first paragraph & user use up/down arrow keys to navigate through whole content in editor body including widget.

Issue 1: Focus goes to heading in Simple Box widget & JAWS reads Bullet even though there was no list

Issue 2: when user press down arrow key, focus stays in heading and when he press Tab focus goes to second div

Issue 3: when user press down arrow key, focus stays in second div and when he press Tab focus goes out of editor body

Issue 4: There is no way that user navigate through text in editor body.

We ran into this with Drupal 8 - ​https://www.drupal.org/node/843708

There are a great list of examples - ​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attr-summary

But using:

<table summary="descriptive text">

No longer fits with the HTML5 specs.

Using details/summary works fine: ​http://www.developerfusion.com/article/136530/making-tables-more-accessible-with-html5/ ​http://www.pdprogrammeur.com/tables-and-html5-table/

The UI shouldn't need to change, just the placement of the summary text.

Reported through support channel. Original request is pasted below. Note that the default value should be probably highlighted using a different style than a value that was manually selected by a user.

This is because:

• it should be impossible to unselect the default font, which means that we should differentiate it visually
• the default font should be unselected "automatically" only when user selects different value
• the current behavior of richcombo should rather change as well - clicking on a default value should not result in the default value being applied to the content once again as it is done right now:

CKEditor with font_defaultLabel : 'Arial', after selecting Arial in Font Name combo:

<p>This is <span style="font-family:arial,helvetica,sans-serif">some sample
</span> text.</p>

The "default" style should be applied to the content only, if the style of the content has been already modified by the user, e.g. set the style back to Arial in the middle of the sentence in "Comic Sans":

<p><span style="font-family:comic sans ms,cursive">This is <span style=
"font-family:arial,helvetica,sans-serif">some sample</span> text.</span></p>

(now repeating Arial make sense)

We found a small issue with font_defaultLabel and fontSize_defaultLabel. When these are set, the CKEditor does properly show them selected. But if you open the associated dropdown, they are not highlighted to indicate they are selected.

Screen capture 1: font and font size are properly displayed when using font_defaultLabel and fontSize_defaultLabel

Screen capture 2: font is not highlighted. Same thing for font size.

Screen capture 3: this is what we would expect when setting the font_defaultLabel setting

Markup

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1)</li>
        </ul>
    </li>
    <li>3</li>
</ul>

Selecting bullets '2.1' and '3' (in wysiwyg mode) followed by hitting 'backspace' or 'delete' will remove the entire list. It seems as if such a selection causes the editor to select the outer 'ul' as well. The same selection can be deleted safely by adding another list element at the end of the list.

Reproducible: always (Firefox, Chrome and IE)

If the 'Browse server' button in the image or link dialog is clicked, resulting in the popup window opening, and that popup is then closed, the original dialog no longer has keyboard focus. Accordingly, the escape key does not work.

Reproduce case, using 4.4.3 (revision fd4f17c):

1) Go to ​http://ckeditor.com/demo 2) Click 'Image' button. The image dialog opens. 3) Click 'Browse Server' button. The browse server popup opens. 4) Either choose an image or cancel. The browser server popup closes. 5) There is no keyboard focus any more, and the escape key on the keyboard does not work.

Comparison case:

1) Go to ​http://ckeditor.com/demo 2) Click 'Image' button. The image dialog opens. 3) Press escape, and the image dialog closes.

1. Open ​http://ckeditor.dev/samples/replacebycode.html
2. Click "Checkbox".
3. CTRL+S to see that focus is moved and "Selected" checkbox is checked.
4. Click OK to close the dialog.
5. Re-open the same dialog.
6. Press CTRL+S.

Expected:

"Selected" checkbox is toggled.

Actual:

AccessKey feature is broken is completely broken in that dialog. Other accessKeystrokes does not work either.

Since there are many questions about block MathJax some, helpers to create generic block-inline widgets would be useful.

It might be a pair of methods to transform inline widget into block and back. Of course every widget have to make some addition transformation but the common part could be handled by the widget system.

1. Use source (remember about ACF):

<dl><dt>Foo</dt><dd>bar</dd></dl>

2. Make selection in "Foo".
3. Apply bulleted list.

Expected:

<ul><li>Foo</li></ul><dl><dd>bar</dd></dl>

Actual:

<dl><ul><li>Foo</li></ul><dd>bar</dd></dl>

Use this source:

<table border="1" style="border-collapse:collapse; width:469px">
	<tbody>
		<tr>
			<td style="width: 142px;">&nbsp;</td>
			<td style="width: 320px;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 142px;">&nbsp;</td>
			<td style="width: 320px;">&nbsp;</td>
		</tr>
	</tbody>
</table>

I can't change last column's with by dragging the 3rd border from the left. Confirmed on IE8 at least

Hello,

For various reasons I need to use the CKEditor inside an iFrame that is populated with content via JavaScript. This seems to cause a bug in the isInline() function within Core.Editable, where the document of the editor is compared with the CKEDITOR.document to conclude if the editor is inline or not. Because the editor is located inside the iFrame, and the iFrame document does not match the CKEDITOR.document, the result is always false. This causes an issue with the magicline plugin that relies on this to calculate the position of the line. Its very likely that other plugins are also affected that use the isInline() function.

I made a JSFiddle to demonstrate the issue: ​http://jsfiddle.net/wschwarz/ktw9utcm/

The solution I applied is also included there as a comment, which checks if the 'cke_editable_inline' class is applied onthe editor to decide if it is inline or not. Un-comment it to see how the isInline() function returns the correct value and the magicline is positioned correctly. This might not be the ideal solution but it worked for me. If a better fix is available please let me know.

Problem is similar to #9611.

It isn't possible to jump (with tabIndex) through elements that are inside iframedialog plugin.
Problem can be reproduced in all browsers.

NOTES:
Firefox, Webkit and Blink - When you click on page inside iframe you can jump through elements but when you reach Cancel button there is no coming back.
IE - Result is the same (buttons grab focus) but there is one note to make.
Focus works a little different here even on native HTML page. Most of the time, you need to click inside input area so that you can tab through elements. When you click on page then (most of the time and it depends where you click) you will focus select element or nothing.

Steps to reproduce:

1.Insert a table inside the Ckeditor text area. 2.Click on the corner of the table. 3.Resizable border of the table will appear. 4.Drag the border out of the editor.

Issue 1:The dotted resizable corners of the table is displayed out of the CK editor. Issue 2:Now when we try to use the scroll of editor, the editor becomes unresponsive.

This occurs only in IE8 and IE9 and not in Firefox. I have attached a video to this, having the recording of the issue for your reference.

Unable to create link when certain fields are removed from the dialog. In other words, some default values are missing.

Before I was usign the following code to remove the linktype and protocol fields in the link dialog I don't need...

if ( dialogName == 'link' ) {
        var infoTab = dialogDefinition.getContents( 'info' );
        infoTab.remove( 'linkType' );
        infoTab.remove( 'protocol' );
    }

This will still remove the items, but when trying to hit enter or ok the dialog just fails.

From here:http://ckeditor.com/forums/Plugins/Problems-removing-dialog-fields-of-link-plugin-in-4.4.3

We need to bring a better support for the tables.

I've tested JAWS and Narrator and none of them is doing a good job with our tables.

Screen reader notes:

• JAWS - reads each char inside the table as line ending mark, therefore tables content is not available which makes this useless.
• Narrator - it reads the content correctly, but (at least in default configuration) does not notify that user is in the table.

Possible solution:

I belive we should give a try to role=grid for the table.

We should review language entries inside plugins and move them to lang.common when there is a high probability that they will be reused by different plugins.

Related tickets:

• #12205

Open full featured demo ​http://ckeditor.com/demo#full Paste the dummy "Lorem Ipsum..." text several times in order to have scrollbar in the editor. Open "Find" window and try to search "Lorem" word. The scrolling to the word is not correct in all matches. Sometimes the whole page is scrolled.

Generally, in CKEditor, highlighting a selection with an image and executing a removeFormat command will remove any styling on the image, which is usually OK. However, any integration of large images with custom cropping and high-resolution images will, upon doing this, result in very large images being placed into the document.

I'd love for there to be a configuration option to say, for example, when executing removeFormat, do not touch the "img" tag.

1. Open sample 'replacebycode.html'.
2. make heap snapshot.
3. run in console: CKEDITOR.instances.editor1.destroy();.
4. run in console: CKEDITOR.replace('editor1');.
5. make heap snaphost and switch to Comparison view in console.

Actual result: instance of Editor is not released from memory.

When we'll make a selection of an "end of line" (ofc it's not really an EOL) elements path will report an extra BR, which is not a part of end-user content, but seems to be a part of our internals.

1. open any sample with CKEditor (i.e. samples/replacebyclass.html)
2. use following source

   <p>foo</p>
   <p>bar</p>
   <p>baz</p>
   

3. switch back to wysiwyg mode
4. place caret at the begining of second line ^bar
5. expand selection to one character left ( shift + left arrow )

Expected result:
Elements path should have following members: body p

Current result:
Elements path contains an extra br: body p br

[IE10] For ages.

1. Open editor with following content:

   <ul>
     <li>one</li>
     <li>two</li>
   </ul>
   <p>hello</p>
   

2. Select whole list.
3. Delete list by pressing backspace.

Actual result: text hello jump to first line. Expected result: text hello stay in the second line.

4. Start typing.

Actual result: text hello jump to next line. Expected result: text hello stay in the same line.

Browser: [IE 10...11]

Since: 4.2.1

1. Open sample: 4.4.4/standard/ckeditor/samples/uilanguages.html
2. Make some selection.
3. Go to Source mode.
4. Switch back to Edit mode.
5. Click on Styles button.

Actual result: Error is thrown in console.

Could not get „blockLimit” property of null or undefined. core/style.js:373

1. Use samples/replacebyclass.html and standard-all build of the editor.
2. Set the following HTML and selection

   <h1>x^</h1>
   

3. Apply "Special Container" style from styles drop-down.
4. Switch WYSIWYG->SOURCE->WYSIWYG

Expected: Contents hold the style.

<div style="background:#eee; border:1px solid #ccc; padding:5px 10px">x</div>

Actual:

<p>x</p>

Notes:

• It works in dev code.
• It works in other browsers.

1. Open replacebycode sample.
2. Click image.
3. Press backspaces few times.
4. Error thrown from ​https://github.com/ckeditor/ckeditor-dev/tree/1ba5105c1e43c3faae06ee98f7ca6f6b2384b5a2/core/selection.js#L1372

Reproduced at least from 4.4.3. Most likely much earlier.

1. Start CKEditor with:

CKEDITOR.replace( 'editor1', {
    allowedContent : 'u i b'
} );

2. Enter "foo bar", select it and press "B", "I" buttons.
3. Result in CKEditor:

   <em><strong>foo bar</strong></em>
   

   (it can be easily noticed in the elements path).

Although getData() returns properly <i><b>foo bar</b></i>, such behavior is buggy. When CSS styles are defined for <b>/<i> they will not be applied for <strong>/<em>. Besides it is misleading for anyone configuring ACF.

Moved from: #12341.

• open any sample
• set data to: <p>foo <a href="foo">foo</a></p>
• copy text from some textarea
• paste it... it's underlined :D
• it happens only when pasting into the framed editor and it happens also when pasting using button in the toolbar (and allowing clipboard access)

1. Find dialog: Enter key when focus is in "Find what" field should find the text.

2. Replace dialog: (tabindex) Tab key when cursor is in "Find what" field should move focus to "Replace with" field.

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!

1. Add resize event listener to editor instance.
2. Click maximize button or exec command by code.

Actucal result: resize event has been called twice.

Probably reason: As far as I see, getting dimension properties like clientWidth fire resize event.

Commented tests: ​https://github.com/cksource/ckeditor-dev/commit/95680bc261861a30a3b6ef65c7a9fe016ac86f85

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!

However, it cannot add timestamp so we need a parameter in getUrl().

Extracted from #10804.

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

While working on a test widget I found it quite hard to get a reference to a widget instance for which a dialog is launched.

Take the code snippet dialog (dialogs/codesnippet.js) and add there:

onOk: function( evt ) {
	console.log(evt);
	console.log(this);
},
onShow: function( evt ) {
	console.log(evt);
	console.log(this);
},

See that there is no access to a widget object which is created on the fly by the widget system, in case of a new widget. As a result the usage of onOk / onShow as a replacement for commit/setup functions in each UI element is quite troublesome.

There is a workaround for it:

onShow

onShow: function() {
	var widget = editor.widgets.focused;
}

onOk

1. We need to add event handler in an init method executed while initializing a widget:

editor.widgets.add( 'xyz', {
	// ...
	init : function() {
		// ...
		// Pass the reference to this widget to the dialog. See "onOk" in the dialog definition, we needed widget there.
		this.on( 'dialog', function( evt ) {
			evt.data.widget = this;
		}, this );
	},
	// ...
}

2. Then this will work:

onOk: function() {
	var widget = this.widget;
}

In ideal world this could be simpler though.

Hi guys, may I suggest changing the loading order of custom config files (using the customConfig parameter) to what would make more sense and follow the concept of inheritance from generic to more specific.

At present the config defined in any config js file is overridden by config defined in any config js file imported using the customConfig parameter. All of this is then overridden with in-page config.

It would be much more logical and practical to slightly modify the config loading order so that config defined in any config js file referenced from the current config is loaded first and then overridden by the config in the current context.

This would allow chaining config files with more specific config overriding more generic config defined in imported files.

For example consider the following scenario: In-Page Config customConfig: 'product_description_editor_config.js' ...

product_description_editor_config.js customConfig: 'generic_description_editor_config.js' ...

generic_description_editor_config.js customConfig: 'common_editor_config.js' ...

product_summary_editor_config.js customConfig: 'generic_summary_editor_config.js' ...

generic_summary_editor_config.js customConfig: 'common_editor_config.js' ...

common_editor_config.js customConfig: ...

As it stands the configuration defined in common_editor_config.js would override any config defined in generic_description_editor_config.js which would in turn override config defined in product_description_editor_config.js.

All of this would then be overridden with what's defined in in-page config.

This limits a developers ability to chain and override configuration in much the same way as they would in CSS or object inheritance. This basically means you can only define configuration in common_editor_config.js that's not going to override any other config in the the config js files that reference it, which significantly limits the use of being able to chain config files.

May I suggest that the loading order is reversed so that config defined in files referenced using customConfig parameter is loaded first and then overridden by config in the file that has the customConfig parameter.

I understand that this may be a breaking change for some people who upgrade, but given the current limited use of overriding, I think the impact will be minimal.

When I enter the source mode, and exit, all the buttons of the editor are disabled, for some contents.

See comment:5 for steps to reproduce.

On dragstart widget's downcasted version should be passed to dataTransfer, not its id.

Copying plain text, say from notepad, and pasting into editor in Chrome is causing the text format to be messed up.

Steps to reproduce:

1. use the attached sample html file
2. copy some text from notepad.
3. paste into editor

Browser and OS:

1. Google Chrome
2. Windows 8

Edit:

1. Use Blink or Webkit browser
2. Load any sample and switch to source mode
3. Paste below code and switch to wysiwyg

   <table >
   	<tbody>
   	<tr>
   		<td>
   			<span style="font-size:23pt">explorer deliver</span>		
   		</td>
   	</tr>
   	</tbody>
   </table>
   

4. Type "some text" in notepad and copy this text with ctrl+C
5. Paste this text in explorer del^iver

Result: Span is removed.

This problem can be reproduced in Blink and Webkit brwosers from CKEditor 4.0. I was able to reproduce this in Windows and Linux but not Mac.

To reproduce the defect:

1. Open any CK Sample, open Templates dialog and select Text and Table Template.

2. Right click inside table cell, open Table Properties dialog by clicking on Table Properties option in context menu.

3. Try to change Table Caption

Issue: Caption field is disabled, we should allow the user to change Table Caption

Edit:

As mentioned in comment:5, the fix for #6663 which is "enabled field for text only caption" might not have been correct because as @satya has mentioned it this is AVT violation because keyboard user cannot modify Table Caption.

Field should be enabled but it is not yet clear how HTML in dialog should be presented.

Browsers: Chrome

1. Open editor with empty content or just remove existing one.
2. Set some font size by clicking propper dropdown.
3. Type some text.
4. Try to make selection in the middle for created text.

Actual result: Making selection is impossible.

Note 1: It's possible to make selection from middle to very beginning.

Note 2: After making selection using method from Note 1 and pressing Ctrl key selection is also gone. It might be related.

In Lotus Notes, there's a featured called the Permanent Pen. You can set the style of the pen and when it's selected, you can write with that style anywhere in any document regardless of the document's formatting, where it came from, etc.

​http://www-12.lotus.com/ldd/doc/domino_notes/rnext/help6_client.nsf/b3266a3c17f9bb7085256b870069c0a9/0878ce791468b5b185256c1c0037f06d?OpenDocument

One of our customers find creating a table difficult in CKEditor, and finds the look and feel for the table and the dialog a little bit dated.

We would like a way to make the table look more modern in the editor if possible, and have an alternative to creating table For example, having a new plugin allowing to graphically select how many rows and columns is needed.

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.

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.

1. Open replacebycode sample in IE11.
2. Insert 300x300 table.

Result: page hangs after a while. The table is not inserted.

Problem can be reproduced only in IE11 from CKEditor 4.3

I am developing an iOS app which integrates ckeditor 4.4.4. I just started testing on iOS 8, seems like ckeditor does not work at all. Whenever i have more than 500 words in a document,the following issues occur:

1. Focus keeps on switching between caret current position and top of page. Sometimes caret is also moved to the top of page while i am typing.
2. Touch event does not work when document is long, so i cannot start typing.
3. Cannot scroll my content -- happens randomly.

I have tested on nightly build 4.4.5 also. Issues can be reproduced in that build also. Seems like these are due to toolbar validation because if open my document in read only mode, none of the issues. occur. Any ideas on the fix? In the mean time any way i can disable the toolbar and still work in wysiwyg mode?

When pasting this source code into CKEditor (tested with 4.4.4) in Internet Explorer (tested with IE11):

<div style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==')">Foo</div>

It is changed into the following code when switching back to the WYSIWYG view:

<div style="background-image: url(&quot;data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg==&quot;);">Foo</div>

Because data URIs are case-sensitive, the image becomes invalid.

The cause is the semicolon before base64. This part of htmldataprocessor.js contains the bug:

if ( CKEDITOR.env.ie ) {
	// IE outputs style attribute in capital letters. We should convert
	// them back to lower case, while not hurting the values (#5930)
	defaultHtmlFilterRulesForAll.attributes.style = function( value, element ) {
		return value.replace( /(^|;)([^\:]+)/g, function( match ) {
			alert(match);
			return match.toLowerCase();
		} );
	};
}

System hangs when using Image upload on IOS 8 (iPhone, iPad):

Image Uoload Chose File "selected file" Send it to the Server

SYSTEM HANGS !!!!!!

This wad detected in version CKEditor 3.6.2 (revision 7275) used by my application, and HAS BEEN REPRODUCED ON YOUR DEMO KEditor 4.4.4 (Standard) (revision 1ba5105)

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

1. Open languages samples.
2. Change language to Arabic.
3. Hover over one of the items in the elements path.

There will be "%1 sth".

I looked into the code and lang/ar.js and everything seems to be fine there, so it's worth checking what's going on.

The bug happen with CKEDITOR.ENTER_BR when you enter some words and then add MathJax waiting for the math created and then go to the start of Math press Enter and then press backspace the math is not return back.

1. Open document properties sample
2. Insert below meta tag into page (under title :)). You can also insert doctype but this has no effect on result.

   <meta charset="utf-8" />
   

3. Open document properties dialog and notice that charset it not set in dialog.
4. When you set charset to UTF-8 in dialog, below meta tag is inserted:

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   

This problem can be reproduced from CKEditor 4.0 beta.

In current version the problem gets worse.

1. Let's say that you have removed HTML5 charset and decided to use HTML4 charset.
2. In current version (latest master) this charset is also not recognized. What is more every time you set utf-8 charset in dialog, new tag gets inserted so you can end up with multiple meta tags inserted into page.

Shouldn't charset meta tag be somehow dependent on doctype or this is something developer/user should know when creating page?

To reproduce the defect:

1. Open any CK Editor sample, switch to High Contrast mode.

2. Enter some text inside editor.

3. Click on Show Blocks button in toolbar

Expected Result: Dotted lines shows around each block level elements like(p, div etc) and corresponding html tag(p, div) displays inside them.

Actual Result: Dotted lines shows around each block level elements like(p, div etc) but corresponding html tag(p, div) is missing in HC mode.

Steps to replicate:
copy below snippet in 'source' mode

<p>Heading:</p> 
 <ol> 
    <li> 
	<ul>
	<li>List 1 Item 1</li>
	<li>List 1 Item 2</li>
	</ul> 
	<div>&nbsp;Sub heading</div>
	<ul>
	<li>List 2 Item 1</li>
	<li>List 2 Item 2</li>
	</ul> 
    </li> 
</ol> 

Repeat the steps below with Firefox, Chrome and IE8:

1. 1st scenario: Select the complete "List 1 Item 1" bullet line and then delete it.
   It works fine with Firefox and Chrome browser, the order of the list get mess up(re-ordered) with IE8 browser.

2. 2nd scenario: Now place the cursor at the very beginning of the "List 1 Item 1" bullet line and then backspace delete
   All Firefox/Chrome/IE8 browsers has this issue where the order of the list get mess up(re-ordered).

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.