Scroll to Element within CKEditor
CKEditor is the outstanding WYSIWYG editor we use on the Mozilla Developer Network. We have many custom plugins and we do everything we can to make writing easy for contributors. One trick I just picked up was skipping to an element within the editor by ID and setting the cursor focus within that element. Here's how!
The JavaScript
You'll start by scrolling the element into view within CKEditor:
var element = editor.document.getById('someHeading');
var range;
if(element) {
element.scrollIntoView();
// Thank you S/O
// http://stackoverflow.com/questions/16835365/set-cursor-to-specific-position-in-ckeditor
range = editor.createRange();
range.moveToPosition(element, CKEDITOR.POSITION_AFTER_START);
editor.getSelection().selectRanges([range]);
}
With the element in view, you'll attempt to insert the cursor at the beginning of the element using a Range.
Firefox will actually insert the cursor for you but Chrome wont, so the Range step is necessary.
![Camera and Video Control with HTML5]()
Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Send Email Notifications for Broken Images Using MooTools AJAX]()
One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible.
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
Instead of
you can simply use
Updated, thank you!
This will work for sure.