将插入符号设置为焦点后结束 CKEditor

发布于 2024-12-07 21:03:21 字数 634 浏览 1 评论 0原文

可能的重复:
CKEditor - 将光标位置设置为文本末尾

我有一个

有很多内容。单击此 div 后,将加载 CKEditor 来编辑此 div。

现在我想在用编辑器替换它后将插入符号/光标设置到内容的末尾。

我的代码目前是这样的:

var editor = CKEDITOR.replace('content', {
  // Settings

  // Event listeners
  on: {
    instanceReady: function(evt) {
      var editor = evt.editor;
    
      // give focus (displays caret at the beginning of the content, not the end)
      editor.focus();
    }
  }
});

Possible Duplicate:
CKEditor - Set cursor position to end of text

I have a <div> with a lot of content. After a click on this div, the CKEditor is loaded to edit this div.

Now I would like to set the caret/cursor to the end of the contents after replacing it with the editor.

My code currently is something like this:

var editor = CKEDITOR.replace('content', {
  // Settings

  // Event listeners
  on: {
    instanceReady: function(evt) {
      var editor = evt.editor;
    
      // give focus (displays caret at the beginning of the content, not the end)
      editor.focus();
    }
  }
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

怪我太投入 2024-12-14 21:03:21

经过一番摆弄后,我已经让它可以使用以下代码:

$(document).ready(function() {

    CKEDITOR.on('instanceReady', function(ev) {

        ev.editor.focus();

        var s = ev.editor.getSelection(); // getting selection
        var selected_ranges = s.getRanges(); // getting ranges
        var node = selected_ranges[0].startContainer; // selecting the starting node
        var parents = node.getParents(true);

        node = parents[parents.length - 2].getFirst();

        while (true) {
            var x = node.getNext();
            if (x == null) {
                break;
            }
            node = x;
        }

        s.selectElement(node);
        selected_ranges = s.getRanges();
        selected_ranges[0].collapse(false);  //  false collapses the range to the end of the selected node, true before the node.
        s.selectRanges(selected_ranges);  // putting the current selection there
    }

});

这个想法是:

  1. 获取根节点(而不是主体)
  2. 前进到下一个节点,直到没有更多的节点可以前进到。
  3. 选择最后一个节点。
  4. 折叠
  5. 设置范围

After a bit of fiddling, I've got it to work with the following code:

$(document).ready(function() {

    CKEDITOR.on('instanceReady', function(ev) {

        ev.editor.focus();

        var s = ev.editor.getSelection(); // getting selection
        var selected_ranges = s.getRanges(); // getting ranges
        var node = selected_ranges[0].startContainer; // selecting the starting node
        var parents = node.getParents(true);

        node = parents[parents.length - 2].getFirst();

        while (true) {
            var x = node.getNext();
            if (x == null) {
                break;
            }
            node = x;
        }

        s.selectElement(node);
        selected_ranges = s.getRanges();
        selected_ranges[0].collapse(false);  //  false collapses the range to the end of the selected node, true before the node.
        s.selectRanges(selected_ranges);  // putting the current selection there
    }

});

The idea is:

  1. Get the root node (not body)
  2. Advance to next node, until there are no more nodes to advance to.
  3. Select last node.
  4. Collapse it
  5. Set range
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文