Javascript 如何在光标处将文本/HTML插入编辑器

我使用的是textAngular 1.4.1，我不知道如何在当前光标位置将文本插入到textAngular指令中

我本以为这是个简单的手术

我有一个SELECT，其中包含要插入的选项列表。当他们按下插入按钮时，我希望文本在光标处插入HTML

在我的控制器中，我有以下代码

$scope.insertToHtml = function (newText) {
    var editor = textAngularManager.retrieveEditor('item_bodyHTML')
    $timeout(function(){
        editor.scope.displayElements.text.trigger('focus');
        rangy.getSelection().getRangeAt(0).insertNode(document.createTextNode(newText)) 
    }); 
}

HTML:

插入

一种方法是设置一个插件，这通常是通过在配置中设置一个装饰器并在操作方法中插入html来完成的。是的，我知道，只是为了插入html

在这里读一读

所以基本上，我们的想法是，你有一个模块设置和文本

var module=angular.module('my_app',['textAngular']);

您将设置一个配置文件

    module.config(function($provide){
    $provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){       
        taRegisterTool('insertMyHtml', {
              buttontext: 'insert my html',
            action: function (taRegisterTool, taOptions) {                
         this.$editor().wrapSelection('insertHtml', '<h1>Hello, world!</h1>');             
            }
        });
        taOptions.toolbar=['insertMyHtml'];
        return taOptions;
    }]);
});

我直接从这个答案中得到了这个方法

希望这能提供一些想法

尝试一下：

$scope.insertToHtml = function (newText) {
  var sel = window.getSelection();

  if (sel.getRangeAt && sel.rangeCount) {
     var range = sel.getRangeAt(0);
     var ancestor = range.commonAncestorContainer;

     while (typeof ancestor.id === "undefined" || (ancestor.id !== "item_bodyHTML" && ancestor.parentNode !== null))
     {
        ancestor = ancestor.parentNode;
     }

     if (ancestor.id == "item_bodyHTML") {
        range.insertNode(document.createTextNode(newText));
     }
  }
}

---

只需在html文件中为文本命名即可

<text-angular name="myTextAngular"></text-angular>

“abc”将插入到文本编辑器中

$scope.insertToHtml = function (newText) {
  var sel = window.getSelection();

  if (sel.getRangeAt && sel.rangeCount) {
     var range = sel.getRangeAt(0);
     var ancestor = range.commonAncestorContainer;

     while (typeof ancestor.id === "undefined" || (ancestor.id !== "item_bodyHTML" && ancestor.parentNode !== null))
     {
        ancestor = ancestor.parentNode;
     }

     if (ancestor.id == "item_bodyHTML") {
        range.insertNode(document.createTextNode(newText));
     }
  }
}

<text-angular name="myTextAngular"></text-angular>

var editorScope = textAngularManager.retrieveEditor('myTextAngular').scope;
    editorScope.wrapSelection("insertHTML", 'abc', true)