CKEditor converts/replaces the word "style" to "class"

[Jeff Shain]

I am using CKEDITOR 4.4.6

I am submitting the following content:

<span style="font-size:14px;"><span style="color:#EE82EE;">iuhoiuhoiuh</span></span>

The editor is stripping out the word "style" and replacing it with "class" resulting in:

<span class="font-size:14px;"><span class="color:#EE82EE;">iuhoiuhoiuh</span></span>

I have checked my code and I am not doing any replacing server side on that submission.

This is the script for the above textarea.

var config = {

height: 75, width: 515, linkShowAdvancedTab: true, scayt_autoStartup: true, enterMode: Number(2), extraPlugins : 'autogrow', extraAllowedContent: '*(*)', allowedContent: true, plugins: 'about,a11yhelp,basicstyles,bidi,blockquote,clipboard,colorbutton,colordialog,contextmenu,div,elementspath,enterkey,entities,filebrowser,find,flash,floatingspace,font,format,forms,horizontalrule,htmlwriter,image,iframe,indent,justify,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastefromword,pastetext,preview,print,removeformat,resize,save,scayt,selectall,showblocks,showborders,smiley,sourcearea,specialchar,stylescombo,tab,table,tabletools,templates,toolbar,undo,wsc,wysiwygarea', autoGrow_maxHeight : 800, autoGrow_minHeight : 75, Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin. removePlugins : 'resize', toolbar:

[

{ name: 'editing', items : ['Source','SpellChecker', 'Scayt' ] }, { name: 'tools', items : [ 'Maximize'] }, { name: 'colors', items : [ 'TextColor','BGColor' ] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar'] }, { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript'] }, { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }, { name: 'styles', items : ['Format','Font','FontSize' ] }

]

};

if($(".general_text_area").length > 0){

$(".general_text_area").ckeditor(config);

}

Anyone have any idea why it would do such a thing?

[Jakub Ś]

I have tried your configuration with default editor but seen no such behaviour. I have tried copy/paste from/into editor and from web page into editor. The only weird result I got was in Chrome when copying from web page but as turned out Chrome does this natively and changes your spans into something like {{{ <span style="font-size:14px;"><span style="color:#EE82EE;">iuhoiuhoiuh</span></span> }}} Besides that I have not observer behaviour you talk about.

Normally I would ask for some extra details but in this case I will just close this ticket because there is no way for editor to do it by default. Please check your server-side and custom JavaScript code. Perhaps there is something after all that does this change?

NOTE: wehn you disable ACF with allowedContent : true there is no need to use extraAllowedContent as it will not have any effect. You can't customize something that is disabled.