textAngular - 如何在光標處插入文本/ html到編輯器

Question

我正在使用textAngular 1.4.1，我無法弄清楚如何在當前光標位置的textAngular指令中插入文本。

我原以爲這是一個簡單的操作。 我有一個選擇列表的選項插入。當他們按插入按鈕我希望文字被插入到光標處的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：

<div text-angular id="item_bodyHTML" name="item_bodyHTML" placeholder="Body HTML" ng-required="true" data-ng-model="item.bodyHTML" ></div> 
 

 
<select class="form-control" placeholder="Insert Field" data-ng-model="insertHTML" ng-options="o.code as o.name for o in optionsToInsert"></select> 
 

 
<button class="btn btn-default" type="button" ng-click="insertToHtml(insertHTML)">Insert</button>

Answer 1

解決此問題的一種方法是設置插件，通常通過在您的配置中設置裝飾器並插入htm l在操作方法中。是的，我知道，只是爲了插入HTML！

有一個在這裏閱讀https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar

所以基本的想法是因爲你有一個模塊設置和textangular

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

這將創造一個名爲'insertMyHtml'的按鈕可以完成這項工作。您可以觸發它，等

插入文本（其中HTML將被自動創建），更改操作方法

action: function (taRegisterTool, taOptions) {     
      insertTextAtCursor('<h1>Hello, world!</h1>');    
       } 

和insertTextAtCursor是

function insertTextAtCursor(text) { 
        var sel, range; 
        if (window.getSelection) { 
         sel = window.getSelection(); 
         if (sel.getRangeAt && sel.rangeCount) { 
          range = sel.getRangeAt(0); 
          range.deleteContents(); 
          range.insertNode(document.createTextNode(text)); 
         } 
        } else if (document.selection && document.selection.createRange) { 
         document.selection.createRange().text = text; 
        } 
       } 

我得到的方法直接從這個答案How to insert text/symbols from a custom button on textAngular toolbar

希望這給出一些想法

Answer 2

試試這個：

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