textAngular - 如何在光标处插入文本/ html到编辑器

我正在使用textAngular 1.4.1，我无法弄清楚如何在当前光标位置的textAngular指令中插入文本。textAngular - 如何在光标处插入文本/ html到编辑器

我原以为这是一个简单的操作。我有一个选择列表的选项插入。当他们按插入按钮我希望文字被插入到光标处的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>

来源

2015-06-05 Scott Warren

解决此问题的一种方法是设置插件，通常通过在您的配置中设置装饰器并插入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

希望这给出一些想法

来源

2015-12-06 17:33:12 Samuel

试试这个：

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

来源

2016-08-05 20:02:01

textAngular - 如何在光标处插入文本/ html到编辑器

回答

相关问题