I have been looking into this issue for a few hours now and I can't find a way to fix it. I am using ckeditor 4.3(also try 4.5) with a custom colour picker to change font colour.
All work well in chrome, firefox, opera and safari yet not in IE. The problem come from
editor.getSelection().getRanges()[0].startContainer
which gave me a span in chrome which is what I want and p in IE which is one level high.
Here a litle exemple :
_me.editor.focus();
var range = _me.editor.getSelection().getRanges()[0];
AddLinkColor(range.startContainer, value.Value);
var AddLinkColor = function (element, color)
{
var selectedChild = null;
if (element.getChildren) { selectedChild = element.getChildren(); }
if (selectedChild)
{
if (selectedChild.count)
{
for (var i = 0; i < selectedChild.count() ; i++)
{
var childElement = selectedChild.getItem(i);
if (childElement.getStyle && childElement.getStyle('color') != '' && childElement.getStyle('color') != color) childElement.setStyle('color',` color);
if (childElement.getChildCount && childElement.getChildCount() > 0) AddLinkColor(childElement, color);
if (element.$.tagName == 'A') element.setStyle('color', color);
}
}
}
};
Any other face the same issue?
I have tried all the variant of startContainer that gave a dom element, like commonAncestor and such still same problem.
Selection behaves differently in different browsers, because there's no specification as well as the platforms behave differently in general. As long as the results reflect the real position of the selection everything is fine. That's nothing surprising and nothing to worry about. The only problem is that you need to handle all those different selections and this makes creating an editor so hard. Therefore, CKEditor API contains many tools to simplify this job.
Yea I was afraid so, thanks, made a litle fix not quite sexy but it work
if(element.getName() != "span") { selectedChild = element.getChildren().getItem(0).getChildren(); }
else { selectedChild = element.getChildren(); }
Related
I personally don't know how much help I can get in this situation. I was trying to make a Flappy bird sketch off of Daniel Shiffman's videos using the p5.js web editor, however when the keyPressed() function was used (which I am familiar with because I did a bunch with Processing), I would get no response. Now originally, it was if(key === ' ') { that was being used, and when the space bar was pressed, the sketch would reset. However, when I tried with other letters, then eventually to just the keyPressed example from the reference, it still wouldn't do anything. It even worked on the website's example, however it wouldn't work in the web editor. What is happening?
Example code:
let value = 0;
function draw() {
fill(value);
rect(25, 25, 50, 50);
}
function keyPressed() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
Try this:
//in the draw function
if (keyIsDown(LEFT_ARROW /*or what ever*/)) {
//action
}
I'm trying to determine with Javascript if anything is selected within the CKEditor. I wish there was a bool like editor.hasSelection(). I started out using editor.getSelection().getSelectedText() === "", but if an element with no "text" is selected (like an img) then that will be a blank string, giving me a false negative. I also looked into editor.getSelection().getSelectedElement(), but that gives null if more than one element is selected.
Is there anything that does this that I'm not seeing in the API?
Looks to me as though there is nothing in the CKEditor selection API to do this directly. However, I think the following will do it, although I agree that it's a shame (and surprising) there is no equivalent of the isCollapsed property of the native browser Selection object.
This is untested but looks as though it will work:
function hasSelection(editor) {
var sel = editor.getSelection();
var ranges = sel.getRanges();
for (var i = 0, len = ranges.length; i < len; ++i) {
if (!ranges[i].collapsed) {
return true;
}
}
return false;
}
// Example:
alert( hasSelection(editor) );
right now I have totally no idea what could cause this strange bug and I hope to able to describe it as good as possible, but the code has grown big and to post all of it wont result in a clear question.
1. Setup:
A Box2dWeb animation in the background, where the triggering of the Step() method is done by window.requestAnimationFrame following the game loop implementation here in the »That's it« section. Every time the »draw« method is called, the b2body's transformation is handed over to a <div> and to a <g>. The <div> sets up the desired animation and the <g> acts as monitor of the body and resides into an inline <svg>.
Clicks are globally caught and if the user clicks on the <div> or on the <path> the target gains focus what leads to applying forces on the b2body.
2. Bug:
All in all everything works as expected, the animation runs fluid for the <div> and its corresponding <g>, clicking on both, the focus state changes correctly, BUT in chromium and Safari the <g> stops showing up the animation, when the user clicked on the <g>.
Here is the code that is used to set the transformation from the b2Body to the <g>:
function draw(){
var str = this._sprite.transform;
var mtrs = this._transformItem.matrix;
mtrs.a = str.a1;
mtrs.c = str.a2;
mtrs.e = str.a3;
mtrs.b = str.b1;
mtrs.d = str.b2;
mtrs.f = str.b3;
this._transformItem.setMatrix( mtrs );
}
where this._transformItem points to <g>.transform.baseVal.getItem( 0 ) and this._sprite.transform to a transform matrix of custom typ.
Here is the code to catch the clicks:
function getClickTargets( target ){
var targets = { 'sprite' : null, 'link' : null };
while( target ){
if( target.nodeName.toLowerCase() === 'a' &&
targets.link == null ){
targets.link = target;
}
if( target.hasAttribute &&
target.hasAttribute( 'data-sprite-id' ) &&
targets.sprite == null ){
targets.sprite = this._stage.getSpriteById(
target.getAttribute( 'data-sprite-id' ) );
}
if( target.nodeName.toLowerCase() == 'path' ){
var attr = target.getAttributeNS( NS, 'monitor-for-sprite' );
if( attr != '' ){
targets.sprite = this._stage.getSpriteById( attr );
}
}
if( targets.link != null && target.sprite != null ){
break;
}
target = target.parentNode;
}
return targets;
};
In FF, IE9/10, Chrome and Opera everything runs as it should and the only thing that causes the misbehavior is that a »click« happens with a <path> as target. The matrices a correct because the animation keeps on running correct for the <div>.
What could cause this, where should I search, does anybody has an idea or had a similar bug?
EDIT:
Might this be caused by the fact that the events are caught and processed »asynchronously« to the overall running »update ticks« ?
Edit 2:
I noticed that the same problem occurs if I am starting the web inspector and watch the elements, but than all <g> elements freeze.
Edit 3:
I have got it running now, at least in chromium, but I guess Safari will do it also. I slightly changed the »draw« function to this:
function(){
var str = this._sprite.transform;
var mtrs = this._transformItem.matrix;
mtrs.a = str.a1;
mtrs.c = str.a2;
mtrs.e = str.a3;
mtrs.b = str.b1;
mtrs.d = str.b2;
mtrs.f = str.b3;
//this._transformItem.setMatrix( mtrs ); //old line
this._transformList.replaceItem(
this._transformList.createSVGTransformFromMatrix( mtrs ), 0 ); //new working line
}
If somebody knows why it only works with a new »SVGTransform« it would be nice to let me know. Otherwise I assume that this is a kind of bug.
Is there a cross-platform approach to taking screenshots from a firefox extension?
Ideally I'd like to be able to take a screenshot of a dom element (irrespective of whether it's visible on the page or not), something like:
var screenshot = screenshot(document.getElementById('example');
Any pointers or suggestions would be nice, searching https://developer.mozilla.org/ only yields screenshots they've used in various guides.
After examining the code of several extensions. I took the following approach (to take a snapshot of a particular dom element). This can be used in a Firefox extension to take screenshots of the whole page, to take screenshots of the browser window and to take screenshots of a particular dom element (and all of its child nodes):
Add canvas to xul.
Find dimensions and top-left co-ordinates of element.
Copy portion of window to canvas.
Convert canvas to base64 PNG file.
function getElementScreenshot(elm) {
var x = findPosX(elm);
var y = findPosY(elm);
var width = elm.clientWidth;
var height = elm.clientHeight;
var cnvs = document.getElementById("aCanvas");
cnvs.width = width;
cnvs.height = height;
var ctx = cnvs.getContext("2d");
// To take a snapshot of entire window
// ctx.drawWindow(mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb(255,255,255)");
ctx.drawWindow(mainWindow.content, x, y, width, height, "rgb(255,255,255)");
return(cnvs.toDataURL());
}
To find top left coordinate of an element
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft += obj.offsetLeft;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop += obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
To get access to browser.xul from sidebar
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
mainWindow.gBrowser.addTab(...);
Download one of the many Firefox screen capture extensions, and look at their code to see how they do it. Eg Screengrab, Fireshot, or Page Saver
I guess it would be something like this:
Copy the DOM element in question to a separate iframe or browser (which is not visible to the user)
Paint the window of that iframe onto an html canvas using drawWindow(). Check out the source of the Tab Preview addon to see how this is done.
I'm using Ctrl+Left / Ctrl+Right in a GreaseMonkey script as a hotkey to turn back / forward pages. It seems to works fine, but I want to disable this behavior if I'm in a text edit area. I'm trying to use document.activeElement to get the page active element and test if it's an editable area, but it always returns "undefined".
document.activeElement works for me in FF3 but the following also works
(function() {
var myActiveElement;
document.onkeypress = function(event) {
if ((myActiveElement || document.activeElement || {}).tagName != 'INPUT')
// do your magic
};
if (!document.activeElement) {
var elements = document.getElementsByTagName('input');
for(var i=0; i<elements.length; i++) {
elements[i].addEventListener('focus',function() {
myActiveElement = this;
},false);
elements[i].addEventListener('blur',function() {
myActiveElement = null;
},false);
}
}
})();
element.activeElement is part of HTML5 spec but is not supported by most browsers. It was first introduced by IE.