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.
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Vertically Centering with Flexbox]()
Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be. We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...
![Sexy Link Transformations with CSS]()
I was recently visiting MooTools Developer Christoph Pojer's website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is...
Instead of
you can simply use
Updated, thank you!
This will work for sure.