How to insert text/HTML into editor at the cursor

Question

I am using textAngular 1.4.1 and I cannot figure out how to insert text into the a textAngular directive at the current cursor location.

I would have thought this was a simple operation.

I have a SELECT with a list of options to insert. When they press the Insert button I want the text to be insert into the HTML at the cursor.

In my controller I have this code

$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

Try with this:

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

Answer 2

One way to approach this will be to setup a plugin and this is usually done by setting up a decorator in your config and insert html in the action method. Yeah I know, just to insert html!

Have a read here https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar

so basically the idea is given that you have a module setup and textangular

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

you will set up a config

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

this will create a button with a name 'insertMyHtml' that does the job. You can trigger it, etc.

to insert text (where the html will be created automatically), change the action method to

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

and that insertTextAtCursor is

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

i got that method directly from this answer How to insert text/symbols from a custom button on textAngular toolbar

Hope this gives some ideas

Answer 3

Simply give a name to your text-angular in html file.

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

Insert textAngularManager service in your controller and use the below code:

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

'abc' will insert in your text angular editor.