We're using Redactor(https://imperavi.com/redactor/) version 10.1.1 and not migrated to Redactor II due to lot of dependencies on project.
Recently We're facing a very weird issue with Chrome version 58. Issues are:
-- Not able to format bold, italic, underline, sup, sub etc. for selected text
Kindly let us know is there any fix for this. Any kind of help would be greatly appreciated.
Update as per accepted work around solution:
// Provided solution is tested for Redactor version 10.1.1
createMarkers: function()
{
this.selection.get();
var node1 = this.selection.getMarker(1);
this.selection.setMarker(this.range, node1, true);
if (this.range.collapsed === false) {
var node2 = this.selection.getMarker(2);
this.selection.setMarker(this.range, node2, false);
// Fix for Chrome58 Issues
if (this.utils.browser('chrome')) {
this.caret.set(node1, 0, node2, 0);
}
// End Chrome58 Issues
}
this.savedSel = this.$editor.html();
},
I think I may have found the solution: It seems that Chrome 58 (sometimes) resets the selection when we call Range.insertNode.
The solution I suggest is to restore the selection when the Redactor adds the selection markers: In the createMarkers function, right after setting the node2 marker, you can add this function call:
this.caret.set(node1, 0, node2, 0);
Here's the solution that should fix Redactor for concrete5 (but it should also work for other projects too).
instead of this in 10.2.5 version
Overall you can do like that:
rewrite setMarker function:
setMarker: function (range, node, type) {
var nclone = window.getSelection().getRangeAt(0).cloneRange();
range = range.cloneRange();
try {
var selection = window.getSelection();
range.collapse(type);
range.insertNode(node);
selection.removeAllRanges();
selection.addRange(nclone);
}
catch (e)
{
this.focus.setStart();
}
},
or add fix in createMarkers function:
// Provided solution is tested for Redactor version 10.1.1
createMarkers: function()
{
this.selection.get();
var node1 = this.selection.getMarker(1);
this.selection.setMarker(this.range, node1, true);
if (this.range.collapsed === false)
{
var node2 = this.selection.getMarker(2);
this.selection.setMarker(this.range, node2, false);
// Fix for Chrome58 Issues
if (this.utils.browser('chrome')) {
this.caret.set(node1, 0, node2, 0);
}
// End Chrome58 Issues
}
this.savedSel = this.$editor.html();
},
this is working and tested on chrome 60.
original code is like this in both 10.2.2 and 10.2.5
getNodes: function()
{
this.selection.get();
var startNode = this.selection.getNodesMarker(1);
var endNode = this.selection.getNodesMarker(2);
if (this.range.collapsed === false)
{
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
var startPointNode = range.startContainer, startOffset = range.startOffset;
var boundaryRange = range.cloneRange();
boundaryRange.collapse(false);
boundaryRange.insertNode(endNode);
boundaryRange.setStart(startPointNode, startOffset);
boundaryRange.collapse(true);
boundaryRange.insertNode(startNode);
// Reselect the original text
range.setStartAfter(startNode);
range.setEndBefore(endNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
else
{
this.selection.setNodesMarker(this.range, startNode, true);
endNode = startNode;
}
how to change it?
Related
I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header works well, but when scrolling up, it start jumping, the faster scroll, the bigger jump. Does anyone has any solution for this?
This issue and its pull request is added to version 13 future milestone which has no due date.
https://github.com/primefaces/primeng/milestone/175
For now you can do this solution:
If you slow down the wheel speed of the cdk-virtual-scroll-viewport, even slightly,
The thead works as it should without any jumping.
changeWheelSpeed(container, speedY) {
var scrollY = 0;
var handleScrollReset = function() {
scrollY = container.scrollTop;
};
var handleMouseWheel = function(e) {
e.preventDefault();
scrollY += speedY * e.deltaY
if (scrollY < 0) {
scrollY = 0;
} else {
var limitY = container.scrollHeight - container.clientHeight;
if (scrollY > limitY) {
scrollY = limitY;
}
}
container.scrollTop = scrollY;
};
var removed = false;
container.addEventListener('mouseup', handleScrollReset, false);
container.addEventListener('mousedown', handleScrollReset, false);
container.addEventListener('mousewheel', handleMouseWheel, false);
return function() {
if (removed) {
return;
}
container.removeEventListener('mouseup', handleScrollReset, false);
container.removeEventListener('mousedown', handleScrollReset, false);
container.removeEventListener('mousewheel', handleMouseWheel, false);
removed = true;
};
}
implement it in the ngAfterViewInit function:
ngAfterViewInit(): void {
const el = document.querySelector<HTMLElement>('.cdk-virtual-scroll-viewport');
this.changeWheelSpeed(el, 0.99);
}
I have a treepanel which is loaded on demand from a web rest api. The rest api will return an array with the data according to the id of the selected node. Here is the code:
itemdblclick: function(item, record, eOpts) {
var store = Ext.getStore('mystore');
var newStore = Ext.create('mystore', {
autoDestroy: true,
storeId: 'otherId'
});
var parentid = record.data.id;
var that = this;
newStore.proxy.extraParams = {...};
newStore.autoDestroy = true;
newStore.storeId = 'otherId';
newStore.load({
callback: function(items) {
var node = store.getRootNode().findChild('id', record.data.idelement, true);
for (var i = 0, l = items.length; i < l; i++) {
var item = items[i].data;
var child = {..., idparent: parentid};
var newnode = node.createNode(child);
node.appendChild(newnode, true);
}
node.expand();
}
});
}
Thanks to norbeq who gave me the light to change the id of the second store. The thing is the tree is nicely populated and the node is expanded, but (why there is always a but?) next the expanded node there is no a -, the + remains the same.
This is what I mean:
I've sourrounded in red that the + mark remains and that the folder is still closed.
Also, if I click the + symbol this is what happend:
How can I solve this?
Well, finally I have to say that the official extjs documentation is quite poor for me. I found a solution by test and reading a lot of posts in several foros. I found a solution that might be helpful to others:
var rootNode = store.getRootNode();
for (var i = 0, l = records.length; i < l; i++) {
var x = records[i].data;
var child = { ... };
if (!child.idparent) {
rootNode.appendChild(child);
} else {
var parent = rootNode.findChild('idelement', child.idparent, true);
parent.appendChild(child);
}
if (!child.leaf) {
var node = store.findNode('idelement', child.idelement);
node.set('expanded', true);
}
}
rootNode.set('expanded', true);
That's it
I have made a custom filter to filter a list with multiple criteria on one column.
I have made this plunk
var app = angular.module('main', ['angular.filter'])
.filter('filterIns', function() {
var obj = {};
return function(list, ins) {
var out = [];
for (var i = 0; i < list.length; i++) {
if (ins.indexOf(list[i].instrument) > -1) {
obj = list[i];
out.push(obj);
}
}
if (ins.length === 0) {
out = list;
}
return out;
};
})
[...]
Everything is working as expected. However when I copy this code to my localhost environment I get this nasty, (general?) error: 'undefined is not an object (evaluating 'list.length')' referring to line 11.
Why is it working perfectly in Plunkr but not on localhost?
Can anybody tell me?
Is your list loaded async or something? Clearly it is undefined when the filter runs for the first time. So just place a condition before line 11, like:
if (!list) { return []; }
// or
if (!list) { return undefined; }
// or even better
if (!list) { return list; } // this keeps things like 0, undefined or null intact
and you should be safe.
How do I restrict the drag operation not exceeding certain boundary. Is there any config in extjs (version 3), I saw that, Ext.dd.DragZone class is used. But Im not sure what is the usability. I saw a method dropNotAllowed. Is that the method, that has to be used? if so, how should I use that? Please provide some examples.
Im looking for something similar to (jquery UI's draggable containment property)
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.dd.DragZone-cfg-dropNotAllowed
I tried using the set X and Y constraints, but it did not work-out:
abc.prototype.initDrag = function(v) {
v.dragZoneobj = new Ext.dd.DragZone(v.getEl(), {
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
// sourceEl.setXConstraint( 0, 10 );
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
abc.scriptGrid.isDraggableForObject = false;
abc.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = sourceEl.innerHTML;
// d.setXConstraint( 0, 10 );
// d.setYConstraint( 0, 10 );
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
Both are commented in the above code. The above code is initiated when the panel is rendered.
edit:
How these setX and setYcontraints have to be used?
By default, the element can be dragged any place on the screen. In the doc there are two methods setXConstraint( iLeft, iRight, iTickSize) and setYConstraint( iUp, iDown, iTickSize )
These two methods is used to set to limit the vertical travel and horizental travel of the element.
I am using the WMD editor's original code (not the Stack Overflow version) since I need multiple of them on the same page and Stack Overflow's version makes heavy use of element IDs internally since they aren't going to be having more than one editor instance per page.
The code runs fine in Firefox 3.5, etc. However, when I run it in Internet Explorer 8 (in Internet Explorer 7 compatibility mode), it freezes the whole browser for about 3 sec. before a new instance shows up. I tried profiling it with Internet Explorer's development tools, and it seems that the getWidth() function on line 520 of the minified version of the code is taking up all the time. However, when I tried to hard-code the return (since it was always returning the same thing), the bottleneck shifted to the getHeight() function.
I am attaching the code I am using to convert it to a jQuery plugin.
jQuery.fn.wmd = function(params) {
function createInstance(container, params) {
/* Make sure WMD has finished loading */
if (!Attacklab || !Attacklab.wmd) {
alert("WMD hasn't finished loading!");
return;
}
var defaultParams = {
width : "600px",
rows : 6,
autogrow : false,
preview : false,
previewDivClassName: "wmd-preview-div"
};
if (typeof(params) == "undefined") {
var params = defaultParams;
}
else {
var params = jQuery.extend({}, defaultParams, params);
}
/* Build the DOM elements */
var textarea = document.createElement("textarea");
textarea.style.width = params.width;
textarea.rows = params.rows;
jQuery(container).append(textarea);
var previewDiv = document.createElement("div");
if (params.preview) {
jQuery(previewDiv).addClass(params.previewDivClassName);
jQuery(container).append(previewDiv);
}
/* Build the preview manager */
var panes = {input:textarea, preview:previewDiv, output:null};
var previewManager = new Attacklab.wmd.previewManager(panes);
/* Build the editor and tell it to refresh the preview after commands */
var editor = new Attacklab.wmd.editor(textarea,previewManager.refresh);
/* Save everything so we can destroy it all later */
var wmdInstance = {ta:textarea, div:previewDiv, ed:editor, pm:previewManager};
var wmdInstanceId = $(container).attr('postID');
wmdInstanceProcs.add(wmdInstanceId, wmdInstance);
if (params.autogrow) {
// $(textarea).autogrow();
}
};
if (jQuery(this).html().length > 0) {
var wmdInstanceId = jQuery(this).attr('postID');
var inst = wmdInstanceProcs.get(wmdInstanceId);
jQuery(inst.ta).show();
}
else {
createInstance(this, params);
}
}
jQuery.fn.unwmd = function(params) {
var wmdInstanceId = $(this).attr('postID');
var inst = wmdInstanceProcs.get(wmdInstanceId);
if (inst != null) {
jQuery(inst.ta).hide();
}
}
wmdInstanceProcs = function() {
var wmdInstances = { };
var getProc = function(wmdInstanceId) {
var inst = wmdInstances[wmdInstanceId];
if (typeof(inst) != "undefined") {
return inst;
}
else {
return null;
}
};
var addProc = function(wmdInstanceId, wmdInstance) {
wmdInstances[wmdInstanceId] = wmdInstance;
};
return {
add: addProc,
get: getProc
};
}();
Any help would be much appreciated.
Maybe the freeze in load time is due to IE 7 rendering the JavaScript. Firefox may be faster at rendering and so it makes IE appear to freeze.