如何在焦点textAngular元素中插入HTML?

时间:2016-08-01 11:29:49

标签: javascript angularjs textangular

我在同一页面中有多个textAngular字段和常用工具栏,我创建了一个指令,可以在当前插入位置的textAngular字段中自动插入一些文本。现在的问题是,当只有一个textAngular字段时,我可以插入代码。但是有多个textAngular字段,我无法找到哪个textAngular字段被聚焦。 这是我的代码:

HTML

<div class="row mrgn20">
    <div class="formFld">
        <text-angular name="message" ta-target-toolbars="messageToolbar" ng-model="composeEmail.body"></text-angular>
        <text-angular name="emailSignature" ta-target-toolbars="messageToolbar" ng-model="composeEmailCtrl.emailSignature.text"></text-angular>
        <text-angular-toolbar ta-toolbar="[['uploadAttachment','bold','italics', 'ul', 'insertLink', 'fontSize', 'uploadImage', 'fontColor']]" class="toolbar" name="messageToolbar"></text-angular-toolbar>
    </div>
    <auto-insert-text options="composeEmailCtrl.autoInsertTextOptions" insert-in="message"></auto-insert-text>
</div>

JS

控制器

function ($scope){
  $scope.composeEmailCtrl = {};
  $scope.composeEmail ={};
  $scope.candidate = {
    name : 'Rahul',
    company : 'Test Company'
  }
  $scope.composeEmailCtrl.autoInsertTextOptions = [{
                title: 'candidate fullName',
                value: scope.candidate.name,
                key : 'candidate_fullname'
            }, {
                title: 'company name',
                value: scope.candidate.company,
                key : 'company_name'
   }];

}    

指令

app.directive('autoInsertText', function(textAngularManager) {
  return {
    restrict: 'E',
    template: '<span translate="insert_auto_text"></span> <span  ng-repeat="option in options"><button type="button" ng-bind="option.title" ng-click="insertText($event,option)" unselectable="on"></button></span>',
    scope: {
        options: "=",
        insertIn: "@"
    },
    link: function(scope, elem, attr) {
        var _editorScope = '';
        scope.insertText = function(event, option) {
            _editorScope = _editorScope || textAngularManager.retrieveEditor(scope.insertIn).scope;
            _editorScope.displayElements.text[0].focus();
            _editorScope.wrapSelection("insertHTML", option.value, true);
        }
    }
  };
}); 

autoInsertText指令采用插入选项和要插入值的textangular字段名称。我想支持在多个textAngular字段中插入,具体取决于当前的插入位置。

0 个答案:

没有答案