IE11: span witch css-class turns into em-tag

[AndreasT]

Hi,

i have a problem with automatic replacing of Span-tags with em-Tags.

Online test: ​http://jsfiddle.net/zsfwshun/

Steps to reproduce

0. Only in IE11!! (IE10 not tested)
1. As you can see on JSFiddle the defined css-class is applied to my span and we see the "italic" formatting
2. Select the text with your mouse (not CTRL+A)
3. Start typing over the selected text
4. Click on Source-Mode button and the result is <em>Lorem Ipsum</em>

If JSFiddle is down:

1. Define your textarea as following:

<textarea id="editor1">
	<p><span class="myItalic">Lorem Ipsum</span></p>
</textarea>

2. Init CKEditor:

CKEDITOR.addCss('.myItalic {font-style: italic;}');
CKEDITOR.replace( 'editor1', {
  allowContent: true,
  extraAllowedContent : 'span(*)'
} );

Expected result

<p><span class="myItalic">My new Lorem Ipsum</span></p>

Span tags should not be replaced with em-Tags like in other Browsers (FF, Chrome, ...)

Google Chrome (46.0.2490.80) Mozilla Firefox (41)

Actual result

The output in Source-Mode is:

<p><em>my new text</em></p>

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

CKEditor version: 4.5.4

Thank you in advance!

[kkrzton]

Happens only in IE11 and Edge (20.10240.16384.0).

[Jakub Ś]

This is a very similar issue to #14302 and probably a port of bigger one #13830.

[Jakub Ś]

This issue happens only in CKEditor in IE. It doesn't happen in native contenteditable element.

The problem is not as critical as I have first assumed. There are errors in editor configuration which cause some problems. First off the entire configuration from the initial example is invalid - you can't disable ACF and then extend it with new elements (everything is allowed at this point). Second thing which was omitted are core styles which default to em: ​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-coreStyles_italic.

Taking the above into account, the proper configuration should look like:

CKEDITOR.addCss('.myItalic {font-style: italic;}');			
var editor = CKEDITOR.replace( 'editor1', {
	extraAllowedContent : 'span(*)',
	coreStyles_italic : {
		element: 'span',
		attributes: { 'class': 'myItalic' }
		overrides : 'em'
	}
});

Now, while still the span element is converted to em (this is tha actual error), it get re-converted back to span when user switches to source mode or uses getData() method to get editor contents.

[AndreasT]

Thanks for response!

My problem is, that a "myItalic" class is not a static name in my Application (class name is generated randomly(hash) on server side), i am not able to retrieve that generated italic class name for CKEditor settings. And i have to allowContent for several reasons in my App...

However i already solved the problem by myself with use of dataProcessor, unfortunately the defined class on my initial span gets lost but for my App it is not critical, but converting span to em is!

CKEDITOR.addCss('.myItalic {font-style: italic;}');
var editor = CKEDITOR.replace( 'editor1', {
    allowedContent : true
  }
);
    
editor.on('instanceReady', function(){
  var ckRules = {
    elements: {
      em : function(element) { element.name = 'span'; }
    }
  };

  this.dataProcessor.htmlFilter.addRules( ckRules );
  this.dataProcessor.dataFilter.addRules( ckRules );

  console.log(this.getData());
});
      
editor.on('contentDom', function(){
  console.log(this.getData());
});
   

For my App "em" Tags are not allowed, so i replace them with spans always (also for api.getData() calls) The real question why is this missbehavoir only in IE11-Edge and if it a CKEditor core issue with IE.

Anyway, thank you guys for response! And thank you guys for all the work you are doing with CKEditor it is a great product!!

Greetz