How can I position the caret in CKEditor3.x?
I have 2 positions and I want use insertHTML() on both positions.
Pseudo-code:
editor.setCaret(20); // function does not exists
editor.insertHtml('::');
editor.setCaret(40); // function does not exists
editor.insertHtml('::');
I have tried (to set caret to position: 20):
var ranges = [];
var range = new CKEDITOR.dom.range( this.document );
range.startOffset = 20;
range.endOffset = 20;
ranges.push( range );
editor.getSelection().selectRanges( ranges );
This is not working. Can anybody help me please?
To insert text or do something with html in the editor you don't need to get the caret position.
Treat it as usual html.
P.S. If you probably want to restore cursor position after dom manipulating, try this
var s = editor.getSelection();
var selected_ranges = s.getRanges(); // save selected range
// do something
s.selectRanges(selected_ranges); // restore it
If you use insertElement instead of insert html (and say, insert a span element) the following should probably work:
editor.insertElement(element);
var range = new CKEDITOR.dom.range(editor.document);
range.moveToElementEditablePosition(element, true);
editor.getSelection().selectRanges([range]);
Related
I'm not able to get the width nor the height of an element in the effects attaching to the element. I tried every single way:
void UpdateSize()
{
var _1 = ((BoxView)Element).Width; //-1
var _2 = ((BoxView)Element).WidthRequest; //-1
var _3 = ((BoxView)Element).Height; //-1
var _4 = ((BoxView)Element).HeightRequest; //-1
var _5 = Control.Width; //NaN (UWP). NaN is not a number
var _6 = Control.ActualWidth; //0
var _7 = Control.Height; //Nan (UWP). NaN is not a number
var _8 = Control.ActualHeight; //0
}
I even tried to pass the width and the height as a attached properties to the effect.
I need the width and height because i'm creating a drop shadow and I must resize the SpriteVisual to be the same size as the element.
May be the element draws after applying the renderer/effects so we have no size yet. If so, how to work around with this?
I would suggest to wire-up the SizeChanged event of Element when effect is attached and then creating your shadow once it fires. Also, make sure to unsubscribe the event when the effect is detached.
I have a D3 text added inside a rectangle , where the value of text field is updated programtically. Now I need to expand the width based on the text value length but making sure to keep the default width as min width.
I have tried getting the new value.length and updating the d3 text width like below.
var length = //length of the updated text value
var elm = d3.selectAll("[id=s1]");
elm.attr('width', function(d) { return length; });
This works fine but when i delete the text D3 text box also shrinks all the way. I need to keep a default width and then just increase if the value is longer than that. Any idea how to do this?
You can use a ternary operator to check for a minimum value:
elm.attr('width', function() {
return length < minimumValue ? minimumValue : length;
});
Where minimumValue is, of course, your minimum value.
Is it possible to set a max-width and max-height for cells in Handsontable?
I've tried to set this via CSS on the <th> and <td> elements but this doesn't work.
I saw in the docs that you can set the columns to particular widths, but not maximums.
So, the solution is to use your HOT instance's manualColumnWidths array. This array will set the widths for all columns automatically. It's nested somewhere in the code so that anytime there's a change to the DOM it updates which is why using CSS or jQuery on the widths of the elements themselves wasn't working. It's a good structure, we just need this to be more explicitly written somewhere.
Note that you can repeat this for rows by just using manualRowHeights instead, as well as the rest of the row methods.
Now, here is how you would set maximums and minimums for column resizing events. Set the afterColumnResize option to this following function:
function setAfterColumnResize() {
return function(col, size) {
var headers = $(".colHeader"); // first is empty if there are rowHeaders
var maxW = [10, 200, 400]; // note that the first is the row header
var minW = [1, 100, 100]; // note that the first is the row header
var actualCol = col + 1; // this is to account for the row header
var maxColW = maxW[actualCol];
var minColW = minW[actualCol];
var actualW = $(headers[actualCol]).parent().parent().width();
if (hot && maxColW && actualW > maxColW) {
hot.manualColumnWidths[col] = maxColW;
hot.render()
}
if (hot && minColW && actualW < minColW) {
hot.manualColumnWidths[col] = minColW;
hot.render()
}
}
}
Now let me explain it. When this event gets triggered, you first find the header using the col index it gives you. Correct it if you have row headers set to true (which is what I do here and in the fiddle). Then you set the arrays of max/min widths (of course you can do this more elegantly in your code).
Then grab the actual current width of the column in question by looking at the parent's parent of the span (this is a little messy but it's the simplest way I found of doing). The conditional after should be self explanatory.
And lastly, the important bits. You can see that by accessing hot.manualColumnWidths you can set the width that you want. I set it to the max if my current width exceeds it. Then just re-render and you're done!
There are a few issues like the fact that these events get called only after resizing so if you originally set the table to render with a width larger than your max, it won't do anything. If that's the case, just call this function after rendering the table the first time (call it once per column).
This would also be the case if you didn't want to use the column resizing event; in this case, it would just be a normal function that you call after rendering.
Hope this helps! Here is a demo fiddle showing it in action :D
I'm trying to go through a selection of paragraphs with d3 and conditionally add elements in between some of them.
I'm currently using a mix of d3 and plain DOM stuff:
diagram.each(function (d, i) {
if (currentRow !== d.row) {
currentRow += 1;
var br = document.createElement('br');
this.parentNode.insertBefore(br, this);
}
});
Is there a way to do this bit with d3?
var br = document.createElement('br');
this.parentNode.insertBefore(br, this);
In English: I'm trying to insert a break element after the current paragraph element. Append acts on a parent, and insert would be nice, but I have no way, that I know of, to reference this current paragraph in the second parameter of insert: https://github.com/mbostock/d3/wiki/Selections#insert
Any pointers?
var br = d3.select("svg").append("br") ?
is this not what you want ? I don't have enough experience to comment :((
I have a simple application which polls database for data every minute. When new data is fetched, I am updating the graph using ajax. However, whenever I update the graph (re-plot it with new values added to plot data) the current state of zoom is lost. Before updating the graph, I want to preserve the latest zoom position. After updating the graph, I want to zoom the graph to its saved position. This is important because re-zooming every minute is irritating. Is this possible?
I tried this answer from Ozan and I couldn't get the block for copying the zoom to work so I just used plot.getOptions() and used that to draw the graph.
Like this:
var oldOptions = plot.getOptions();
plot = $.plot($("#graph"), data, oldOptions);
This way you can dynamically change your view and the auto-update will update without changing your view.
Here is the answer by Joshua Varner 1
When you get your new data before you re plot get the current zoom and
add it to the options on update.
// Get the current zoom
var zoom = plot.getAxes();
// Add the zoom to standard options
var zoomed = {};
$.extend(zoomed,options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;
// draw/save the plot
plot = $.plot($("#graph"), d, zoomed);
You should get the information about the state of the current axes, merge it with your initial options and than provide them to the new plot.
// Deep copy of the options object so that we can keep it unchanged
// for when we don't want to preserve the zoom.
var copyOptions = $.extend(true, {}, options);
if (plot != null && preserveZoom) {
// There might be more than one Y axis
var zoomY = plot.getYAxes();
for (var i = 0; i < zoomY.length; i++) {
copyOptions.yaxes[i].min = zoomY[i].min;
copyOptions.yaxes[i].max = zoomY[i].max;
}
// Considering only one X axis, in case of more than one
// you should use the same method as for the Y axis.
copyOptions.xaxis.min = plot.getXAxes()[0].min;
copyOptions.xaxis.max = plot.getXAxes()[0].max;
}
plot = $.plot("#placeholder", data, copyOptions);