Trumbowyg: Insert text at caret not working

Question

I have a button and when clicking on it I want to add some text inside the Editor.

I saw some issues where people gave the solution and I tried it. But when I use restoreRange and execCmd with insertHTML, it does not insert at the caret, only if something is input in the editor before, like a character or a space.

In other words, when clicking on the editor, it does not insert where the caret was when I clicked, but when writing something, it does.

Like if restoreRange only worked when writing something.

The problem happens with the following code:

$('#editor').trumbowyg({
  btnsDef: {
    testButton: {
      fn: function () {
        // Restore the previous position
        $("#editor").trumbowyg('restoreRange');
        // Add text in the current position 
        $("#editor").trumbowyg('execCmd',
        {
          cmd: 'insertHTML',
          param: 'Dummy text',
          forceCss: false
        });
      },
      title: 'test button',
      text: 'insert text',
      hasIcon: false
    }  
  },
  btns: [
    ['testButton'],
  ]
});

Reproduced the problem here: https://jsfiddle.net/95nqv076/

Am I missing something?

score 2 · Answer 1 · answered Aug 19 '20 at 08:40

Found the solution: save the range on blur and on focus.

$('#editor').trumbowyg({
btnsDef: {
  testButton: {
    fn: function () {
      $("#editor").trumbowyg('restoreRange');
      $("#editor").trumbowyg('execCmd',
        {
      cmd: 'insertHTML',
          param: 'Dummy text',
          forceCss: false
        });
      },
      title: 'Button tooltip',
      text: 'Displayed button name',
      hasIcon: false
    }
  },
  btns: [
    ['testButton'],
  ]
}).on('tbwblur', function(){
  $("#editor").trumbowyg('saveRange');
}).on('tbwfocus', function(){
  $("#editor").trumbowyg('saveRange');
});

Hope it helps someone!

score 0 · Answer 2 · answered Jul 11 '23 at 07:59

I do it this way:

function insertTextAtCursor(editorId, text) {
    var editor = $('#' + editorId).trumbowyg('html'); // Get the Trumbowyg editor content
    var range, selection;

    if (window.getSelection) {
        // For modern browsers
        var editorElement = $('#' + editorId).get(0); // Get the editor element
        editorElement.focus();
        selection = window.getSelection();
        range = selection.getRangeAt(0);

        var newNode = document.createElement('span');
        newNode.innerHTML = text;
        range.insertNode(newNode);

        // Move the cursor to the end of the inserted content
        range.setStartAfter(newNode);
        range.setEndAfter(newNode);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection && document.selection.createRange) {
        // For Internet Explorer
        editor.focus();
        range = document.selection.createRange();
        range.pasteHTML(text);
    } else {
        // If the browser does not support the above methods, append the text to the end of the editor.
        $('#' + editorId).trumbowyg('html', editor + text);
    }
}

Trumbowyg: Insert text at caret not working

2 Answers2