I’m migrating a CKEditor v4 to v5.
I need to be able to scroll to the bottom (or the top) of the editor content.
The solution here is not working for me.
This is what I tried:
function ckScroll(editor, position){
editor.model.change( writer => {
var root = editor.model.document.getRoot();
var pos = writer.createPositionAt( root, position);
writer.setSelection(pos);
}
);
}
ckScroll is called (with position ‘end’ or ‘before’) from a button.
Nothing happens...
Adding writer.setSelectionFocus(pos); doesn’t help.
Any help is welcome !
Related
I need to add back navigation on swipe. I can do that fairly easily by just adding a swipe listener to the page view and calling goBack. But I really would like the animation that goes with it (in Instagram or FB) where as soon as you start dragging your thumb, the page translates to the right and the previous page starts to translate into view. And then once you get to a certain point it actually performs the navigation.
I tried animating the page, as well as the frame to the right figuring since the view isn't being destroyed it might work. But it doesn't display the page Im navigating back to.
Looking for help on how to accomplish this!
I guess you might have come across the other SO thread answering this question natively.
All you have to do is modify the default gesture recogniser on iOS frame.
export function onNavigatedFrom(args: EventData) {
console.log("Adding gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && !(<any>frame)._gestureRecognizer) {
const controller = frame.ios.controller;
const popGestureRecognizer = controller.interactivePopGestureRecognizer;
const targets = popGestureRecognizer.valueForKey("targets");
if (targets) {
let gestureRecognizer = UIPanGestureRecognizer.alloc().init();
gestureRecognizer.setValueForKey(targets, "targets");
frame.nativeView.addGestureRecognizer(gestureRecognizer);
(<any>frame)._gestureRecognizer = gestureRecognizer;
}
}
}
export function onNavigatedTo(args: EventData) {
console.log("Back to root page, removing gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && (<any>frame)._gestureRecognizer) {
frame.nativeView.removeGestureRecognizer((<any>frame)._gestureRecognizer);
(<any>frame)._gestureRecognizer = null;
}
}
Playground Sample
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
I have gotten into a small issue I can't seam to wrap my head around, and I hope for some guidesnes from you folks.
I have a timeline with a bunch of groups and subgroups, and the height of the timeline is now bigger than the height of the monitor showing it.
And that is fine it can be scrolled using the scroll wheel on the mouse, however as it is ment to be just a timeline on a wall mounted screen it would be cool if I could make an autoscroll function, that scroll the timeline up and down in a given timeframe.
Unfortunatly I can't figure out where to implement it to make it work.
I have the following code to make a div scroll ( and have tried diffrent ways to make it do it in the vis.js code, but so far no luck )
if anyone knows of a way to make it scroll up and down in a given timeframe i would really appreciate the help.
<script language="javascript">
ScrollRate = 1;
function scrollDiv_init() {
//this can be a class also.
DivElmnt = document.getElementById('MyDivName');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop--;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
Well, the only tricky part I can see about scrolling timeline at http://visjs.org/examples/timeline/other/verticalScroll.html is that you have to scroll certain element, not the container of the timeline. If you use inspector to find the element with the scrollbar, you'll probably be surprised to see this:
Indeed, if I apply scrolling to that element
var scrollerElement = document.querySelector('#mytimeline1 div.vis-panel.vis-left.vis-vertical-scroll');
scrollerElement.scrollTop = 100;
the timeline gets scrolled vertically. By the way, the vis-vertical-scroll class suggests that we are on the right way. Actually, you should probably use a shorter selector instead:
var scrollerElement = document.querySelector('#mytimeline1 .vis-vertical-scroll');
You can try this via browser console on that page. I think this should be enough for you to implement the desired autoscrolling.
developing for Gear s2 web app (Tizen),
how is it possible to scroll a page which has only text, using the bezel?
Thanks.
First you have to listen to the "rotarydetent" events, e.g. like following:
document.addEventListener('rotarydetent', onRotarydetent);
function onRotarydetent(ev) {
var direction = ev.detail.direction;
if(direction === "CW"){ // CW = clockwise; CCW = counterclockwise
... scroll down ...
} else {
... scrull up ...
}
}
So now to scroll the page content it depends on how build your web app. If you use the SDK Wizard and have a project including tau.js it will be simple if you know that tau adds a scroller container around each page. Now you just need to find the scroller and scroll it. Using jQuery it could look like following:
function onRotarydetent(ev) {
var direction = ev.detail.direction,
uiScroller = $('#pageid').find('.ui-scroller'),
scrollPos = $(uiScroller).scrollTop();
console.debug("onRotarydetent: " + direction);
if(direction === "CW"){
$(uiScroller).scrollTop(scrollPos + 100); // scroll down 100px
} else {
$(uiScroller).scrollTop(scrollPos - 100); // scroll up 100px
}
}
Have a look at the UIComponents sample app available within the Tizen Wearable SDK.
You need to use the TAU library to achieve Text scrolling using Beezel.
Create a new project using the UI Components app and Install it on Gear s2 emulator or original hardware. Then Run the app and click on the first option 'Header' which contains your use case i.e. plain text scrollable by beezel.
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );