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.
![Designing for Simplicity]()
Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![CSS Circles]()
A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...
![Google Extension Effect with CSS or jQuery or MooTools JavaScript]()
Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...
Instead of
you can simply use
Updated, thank you!
This will work for sure.