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

How to add a item in current record of grid editor combo in ExtJS5

ExtJS 5
I have a grid and it has 3 columns (Id, Students,Selected Students). In column2 (Students), I have bind static data. When i click on any item of second column then this record should be added in column3 (Selected Students) in current record or row. I have one button also called (Add new item) used for creating new row dynamically.
Note - When i add a new row by clicking on Add new item button, then new row will be added and 3 column(Selected Students) value should be blank.
I have tried so much but didn't get solution. The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
Ext.onReady(function () {
var comboStore1 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id'],
data:
[
{ "text": "Value1", "id" :1 },
{ "text": "Value2", "id": 2 },
{ "text": "Value3", "id": 3 }
]
});
var comboStore2 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id']
});
var gridStore = Ext.create('Ext.data.Store',
{
fields: ['id', 'students', 'selectedStudents'],
data:
[
{ "id" : 1},
]
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
height: 200,
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Add New Item',
handler: function () {
var store = Ext.getCmp('grdSample').store;
var rec = {
id: 1,
students: '',
selectedStudents: ''
}
store.insert(store.length + 1, rec);
}
},
{
xtype: 'grid',
id: 'grdSample',
store: gridStore,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [
{
header: 'id',
dataIndex: 'id'
},
{
header: 'Students',
dataIndex: 'students',
editor: {
xtype: 'combobox',
store: comboStore1,
displayField: 'text',
valueField: 'text',
queryMode: 'local',
listeners: {
select: function (combo, records) {
var rec = records[0].data;
}
}
}
},
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: comboStore2,
displayField: 'text',
valueField: 'id'
}
}
]
}
]
}]
}).show();
});
I have tried almost everything but still i didn't get any solution. In another way - How to insert a value in grid editor combo only in current row. (Another row should not be reflected). If another row is being reflected, then how to remove value before rendering from another row without reflecting other rows.

Well, I guess main problem is that you trying to change certain grid row editor component while it suppose to be same for all grid rows.
The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
It happens because all grid row editors use same store instance, comboStore2, and when you change its data you change it for all editors.
To create separate store for each editor you have to do something like this:
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: Ext.create('Ext.data.Store', {
fields: ['text', 'id']
}),
displayField: 'text',
valueField: 'id'
}
}
But than its become not trivial to select specific row editor component and its store.
I recommend you to take a look at Ext.grid.column.Widget as you can bind certain row (its record actually) to widget with its onWidgetAttach property.

Your second column is dummy.
You could directly use a tagfield component as the editor for your third column, which lets you select multiple values.
And you'll need a single store for the list of all students.

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'
]
});

Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager

I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}

If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();

This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}

Adding items dynamically from javascript array in Sencha Touch

I have this code
var filter = {
items: [{
xtype: 'fieldset',
title: 'Choose',
items: [
// I need to put checkboxes here
]
}]
};
I need to dynamically add checkbox items:
{
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
The data that I need to add is stored in JS array, and checkbox can be checked or unchecked
Please help,
Thank you in advance

What is your issue? When do you add? What is the event?
filter.items[0].items[filter.items[0].items.length] = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
or
var checkbox = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
var itemArr = filter.items[0].items;
itemArr[itemArr.length]=checkbox;

What is filter, is it a Container or does it extend from it (Panel, FormPanel, etc.)?
If so, you can use the add() method to dynamically add to it.
It's also good to note, that posting in the Sencha Forums will get your a much faster response.