jquery Trumbowyg:在插入符号处插入文本无效

piv4azn7  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(129)

我有一个按钮,当点击它时,我想在编辑器内添加一些文本。
我看到一些问题,人们给出了解决方案,我尝试了。但是当我使用restoreRangeexecCmdinsertHTML时,它不会插入插入符号,只有在编辑器中输入了一些东西时,例如字符或空格。
换句话说,当点击编辑器时,它不会在我点击时插入插入符号的地方,但是当写东西时,它会插入。
就像如果restoreRange只在写东西时工作。
以下代码出现问题:

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

字符串
在此处重现了问题:https://jsfiddle.net/95nqv076/
我错过了什么吗?

l3zydbqr

l3zydbqr1#

找到了解决方案:保存模糊和聚焦的范围。

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

字符串
希望能帮助到别人!

lymnna71

lymnna712#

我是这样做的:

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);
    }
}

字符串

相关问题