How to insert text / HTML into the editor at the cursor
I am using textAngular 1.4.1 and I cannot figure out how to insert text into the textAngular directive at the current cursor position.
I would have thought it was a simple operation.
I have a SELECT with a list of options to insert. When they click the "Insert" button, I want the text to be inserted into the HTML at the index.
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>
source to share
One way to approach this is by customizing a plugin, and this is usually done by setting up a decorator in your config and injecting html into the action method. Yes, I know, just to insert the html!
Read it here https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar
so basically the idea is given that you have a module setup and a textangular
var module=angular.module('my_app',['textAngular']);
you will set up the configuration
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 named "insertMyHtml" that does the job. You can call it etc.
to insert text (where the html will be generated automatically) change the action method to
action: function (taRegisterTool, taOptions) {
insertTextAtCursor( '<h1>Hello, world!</h1>');
}
and that 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;
}
}
I got this method directly from this answer How to insert text / characters from a custom button in the TextAngular toolbar
Hope this gives some ideas
source to share
Try the following:
$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));
}
}
}
source to share
Just give a name to your text corner in the html file.
<text-angular name="myTextAngular"></text-angular>
Insert the textAngularManager service into your controller and use the following code:
var editorScope = textAngularManager.retrieveEditor('myTextAngular').scope;
editorScope.wrapSelection("insertHTML", 'abc', true)
'abc' will paste into your text corner editor.
source to share