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

Question

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

我还以为这是一个简单的操作。

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

在我的 Controller 中我有这段代码

$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

解决这个问题的一种方法是设置一个插件，这通常是通过在您的配置中设置一个装饰器并在操作方法中插入 html 来完成的。是的，我知道，只是为了插入 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 得到了那个方法

希望这能给一些想法