滚动到CKEditor中的Element

太过爱你忘了你带给我的痛 2023-02-22 03:38 7阅读 0赞

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!

CKEditor是我们在Mozilla开发人员网络上使用的出色的WYSIWYG编辑器。 我们有许多自定义插件，我们将尽一切努力使贡献者的写作变得容易。 我刚掌握的一个技巧是通过ID跳到编辑器中的某个元素，然后在该元素中设置光标焦点。 这是如何做！

## JavaScript **(**The JavaScript**)** ##

You'll start by scrolling the element into view within CKEditor:

首先，将元素滚动到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.

在显示元素的情况下，您将尝试使用Range将光标插入到元素的开头。

Firefox will actually insert the cursor for you but Chrome wont, so the Range step is necessary.

Firefox实际上会为您插入光标，但Chrome不会，因此“范围”步骤是必需的。

> 翻译自: [https://davidwalsh.name/scroll-element-ckeditor][https_davidwalsh.name_scroll-element-ckeditor]

[https_davidwalsh.name_scroll-element-ckeditor]: https://davidwalsh.name/scroll-element-ckeditor