jquery - 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?

Answer 1

找到解决方案：将范围保存在模糊和焦点上。

$('#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');
});

希望它可以帮助某人！