We Keep Coding

CKEditor is stripping a tags when copying and pasting from microsoft word. How can I diagnose why this is happening?

I am tasked with fixing a problem with my company's CMS. We use CKEditor. When users cut from microsoft word and paste into the editor, tags are removed. This was done intentionally by someone who no longer works at the company, and now we want to allow a tags.
I am able to find the editor by going into the javascript console. When I inspect the object, I find that editor.config.allowedContent is set to "p[*](*){*}; h1[*](*){*}; h2[*](*){*}; em; b; u; ul[*](*){*}; ol[*](*){*}; li[*](*){*}; img[*](*){*}; iframe[*](*){*}; a[*](*){*}; object[*](*){*}; param[*](*){*}; embed[*](*){*}; video[*](*){*}; i; table[*](*){*}; tr[*](*){*}; td[*](*){*}; script[*](*){*}; h3[*](*){*}; span[*](*){*}; br[*](*){*}; div[*](*){*}; strong; blockquote[*](*){*} which contains an a tag.
What other possible causes could their be for the link tags being stripped on copy + paste?
Thanks!
Edit:
Here is config.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.fillEmptyBlocks = false;
config.baseFloatZIndex = 100001;
config.extraAllowedContent = 'a';
};
CKEDITOR.config.fillEmptyBlocks = false;
Furthermore it seems some config options are set dynamically:
this.editorObject = CKEDITOR.inline(this.$editable[0],{
forcePasteAsPlainText: true,
title: this.label,
customConfig: '',
removePlugins: 'autocorrect,format,stylescombo',
removeButtons: 'PasteText,Flash,Anchor,ShowBlocks,About',
extraPlugins: extraPlugins,
linkShowAdvancedTab: false,
linkShowTargetTab: true,
youtube_responsive: true,
youtube_related: false,
scayt_autoStartup: true,
readOnly: this.disabled,
floatSpacePinnedOffsetY: 100,
floatSpaceDockedOffsetY: 25,
toolbar: this.toolbarDefinitions[this.variant],
allowedContent: allowedContent,
blockedKeystrokes: blockedKeystrokes,
keystrokes: keystrokes,
on: {
instanceReady: _.bind(function(e) {
if (this.fieldname == 'inc_clean_text' && this.area) {
this.area.generateInlineVideoPlayers();
var area = this.area;
async.nextTick(function() {
_.each(area.inlineVideoPlayers, function(player) {
player.menu && player.menu.show();
});
});
}
this.$editable.focus();
// When triggerred will focus on the editor.
this.$editable.on('focusCursor', (function() {
var range = this.editorObject.createRange();
range.moveToElementEditablePosition(this.editorObject.editable(), true);
this.editorObject.getSelection().selectRanges([range]);
}).bind(this));
if (this.editorObject.document.$.getElementById('caret-position-placeholder')) {
// When there is a caret placeholer present will put the cursor there and
// remove the placeholder element.
var node = new CKEDITOR.dom.element(this.editorObject.document.$.getElementById('caret-position-placeholder'));
var range = new CKEDITOR.dom.range(this.editorObject.document);
range.selectNodeContents(node);
this.editorObject.getSelection().selectRanges([range]);
$(this.editorObject.document.$.getElementById('caret-position-placeholder')).remove();
}
if (this.$editable.hasClass('pancaption_override')) {
// ! TODO Move elsewhere.
// Code specific to the main feature image caption editor.
if (this.$editable.data('reshow')) {
this.$editable.data('reshow', false);
$('.pancaption_default').hide();
this.$editable.attr('contenteditable', true);
this.$editable.show().focus().trigger('click');
this.editorObject.setReadOnly(this.disabled);
}
if (this.$editable.html() == '') this.$editable.trigger('focusCursor');
}
// When on the new article page and clicking on a field with default text then empty
// the editable text.
//this.editorObject.setData('');
//this.$editable.trigger('focusCursor');
//this.$editable.toggleClass('empty', true);
}, this),
change: _.bind(this.contentChanged, this)
}
});
Let me know if I should trace any of these variables.

Controlling which tags are allowed or disallowed is done through the config.js file usually located in the root of the CKEditor directory. http://docs.ckeditor.com/#!/guide/dev_configuration
As you've discovered through the console you can either allow or disallow certain tags through config.allowContent or config.disallowedContent respectively. http://docs.ckeditor.com/#!/guide/dev_acf

ckeditor do not work when i add extraPlugins

i have uploaded codesnippet plugin inside /ckeditor/plugins/ directory.
My config.js file codes are:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basic', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'font', items: [ 'Font' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
{ name: 'last', items: [ 'Maximize' ] }
];
config.extraPlugins = 'codesnippet';
config.format_tags = 'p;h1;h2;h3;pre';
config.entities = false;
config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';
config.disableNativeSpellChecker = false;
};
But when i add config.extraPlugins = 'codesnippet'; line then editor do not work even i can't see textarea field.
And when i remove config.extraPlugins = 'codesnippet'; line then editor works perfectly.

Use the online builder to add the codesnippet plugin to your editor. Most probably your editor is missing dependencies.
Most plugins in CKEditor require some additional plugins to operate. If you download manually plugin A, there is a chance that you need to download dependencies for plugin A... and plugin B, which is required by plugin A. And sometimes you will need to download dependencies for plugin C, which was required by plugin B. Sounds like a nightmare, this is why we created online builder and why package managers exist.

ExtJS xtype menu times out in Chrome

I have a an ExtJS app that uses xtype menu to create a dropdown menu with two options. One of those options, on mouseover, brings up two additional sub options. When attempting to mouseover one of the sub options, the menu immediately times out and disappears.
This only happens in Chrome. Safari is fine. Also if I use the keyboard arrows to make the selection it works fine.
Ext.define('App.view.deposit.ReportButton', {
extend: 'Ext.button.Button',
alias: 'widget.depositreporbutton',
requires: [
'Ext.menu.Menu',
'Ext.menu.Separator'
],
text: 'Reports',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
menu: {
xtype: 'menu',
minWidth: 200,
items: [
{
text: 'Deposit Report',
menu: {
items: [
{
xtype: 'menuitem',
itemId: 'deposit-report-media-button',
text: 'By Media Type'
},
{
xtype: 'menuitem',
itemId: 'deposit-report-fund-button',
text: 'By Income Fund'
}
]
}
},
{
xtype: 'menuitem',
itemId: 'receipt-report-button',
text: 'Contribution Receipts'
}
]
}
});
me.callParent(arguments);
}
});

If you're using extjs 4.x there is an issue with the Chrome 43 updates and the 4.x series.
Here's the bug thread: https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta
Here is an announcement with a fix here: https://www.sencha.com/forum/announcement.php?a=58
Here's the official fix:
Ext.define('Override.menu.Menu', {
override: 'Ext.menu.Menu',
compatibility : '4',
onMouseLeave: function(e) {
var me = this;
// If the mouseleave was into the active submenu, do not dismiss
if (me.activeChild) {
if (e.within(me.activeChild.el, true)) {
return;
}
}
me.deactivateActiveItem();
if (me.disabled) {
return;
}
me.fireEvent('mouseleave', me, e);
}
});
You can try it out here: https://fiddle.sencha.com/#fiddle/ndn
To use the override in your application:
Put the override file in the overrides directory off the root folder
Add this to the app.js file:
Ext.Loader.setConfig({
paths: {
'Overrides': 'overrides'
}
});
Add the requires statement in the Application.js file under the Ext.Define section:
Ext.define('Your.Application', {
name: 'App',
extend: 'Ext.app.Application',
...
requires: [
'overrides.Menu'
]
});

Can't place extraPlugin to right place in toolbar of CKEDITOR

After adding extra plugin in CKEditor: config.extraPlugins = 'syntaxhighlight'; I can't put it on navigation bar at place I wanted.
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'spellchecker' },
];
config.extraPlugins = 'syntaxhighlight';
When I load CKEditor my syntax plugin is placed in insert group, and I don't know how to get it out of there or how to place it any where else.
I'm using version 4.3

You need to locate place where button is defined within plugin.js file, so in your case that will be:
ckeditor/plugins/syntaxhighlight/plugin.js
Usually button definitions are passed to editor.ui.addX method, i.e.
editor.ui.addButton( 'MyButton',
{
label : 'My button label',
toolbar : 'insert,100'
} );
You need to adjust toolbar property:
- string part insert tells which group will receive button.
- number 100 stands for its position. The lower number is, the higher priority your button will have.
You may update property into following value:
toolbar : 'insert,5'

CKEditor appears gray in internet explorer

I visited a lot of websites to find a solution.
My editor works in almost every browser except internet explorer.
In internet explorer the space(textarea) to change the content isnt showing up, the rest of the editor is visible. Does anyone knows a solution? I didn't find it on the internet.
Updating the editor maybe is a solution, but it took me a while to configure it together with ckfinder, so I'm afraid that it ckfinder isn't working after an update.
The editor worked a few months ago, but I didn't work on the website for a few months.
<textarea id="textarea" name='text' class='editor'></textarea>
To show my editor.
<script>
$(document).ready(function(){
$('textarea.editor').ckeditor(
function() {
/* callback code */
},
{
language : 'nl',
uiColor : '#e9eaee',
toolbarStartupExpanded : false,
toolbar :
[
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks', 'Source'] },{ name: 'document', items : ['DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] }
],
height: '225',
extraPlugins : 'tableresize'
} );
});
</script>

Try to disable your add-ons, and if the problem was solved, enable add-ons one by one to find the one which cause the problem.

Based on the comments on the previous answer, the problem is with IE10, right? Sounds like a version issue. IE10 is not supported for CKFinder 2.2.2, so you could try updating CKF.
It would help if you include the CKFinder, CKEditor and Browser versions in the question :).
It could be a config or general JS issue too - do you have a JSfiddle or other link we could check out? Also, have you checked what the Developer tools for IE10 reports, there could very well be informative errors there.