Setting the cursor to the end of the text using SCEditor

Question

I am attempting to insert a quote, then move the cursor to the end of the editor. Currently, I insert the quote, the cursor ends up inside the quote so if you were to start typing, the user would be adding to the quote which is not what I would like to happen

I've tried looking through their documentation to figure out how to do this but I don't think I quote understand it

Here is my current code:

    $(document.body).on('click', '.action.quote', function() {

        var $target = $($(this).data('target'));
        var editor = $('#reply-body').sceditor('instance');
        var bodyText = $target.html();

        editor.insert('[quote=author]' + bodyText + '[/quote]');
        editor.focus();

        smoothScroll('#new-comment');
    });

Is there a quick way to do this? I'm quite new to SCEditor so it's all new to me

Does this help, then? https://www.sceditor.com/documentation/custom-bbcodes/#format + https://www.sceditor.com/documentation/custom-commands/#exec — brunoais, Apr 20 '17 at 10:48
I'm not sure that's what I'm looking for. I can insert the quote, but the position of the cursor is not after the [/quote] instead, it is just before that tag so when you go to type it adds to the quote not after — Ben, Apr 20 '17 at 12:22

score 2 · Accepted Answer · answered Apr 20 '17 at 12:44

There currently isn't an easy way to place the cursor after inserted content although there probably should be. I'll create an issue to add one.

For now you'll need to manually move the cursor using the range API. Something like this should work:

$(document.body).on('click', '.action.quote', function() {
    var $target = $($(this).data('target'));
    var editor = $('#reply-body').sceditor('instance');
    var bodyText = 'Dummy text for example';

    editor.insert('[quote=author]' + bodyText + '[/quote]');
    editor.focus();

    var rangeHelper = editor.getRangeHelper();
    var range = rangeHelper.cloneSelected();

    // Handle DOM ranges, if you casre about IE < 9
    // you'll need to handle TextRanges too
    if ('selectNodeContents' in range) {
        var bodyChildren = editor.getBody()[0].children;

        // Select the last child of the body
        range.selectNodeContents(bodyChildren[bodyChildren.length - 1]);

        // Move cursor to after it
        range.collapse(false);
        rangeHelper.selectRange(range);
    }

    smoothScroll('#new-comment');
});

Live example: https://jsfiddle.net/3z8cg8z1/

What if you want to move the cursor to a specific position? Not only the end. — Avatar, Sep 26 '21 at 12:04

Setting the cursor to the end of the text using SCEditor

1 Answers1