带有不可编辑内容的富文本,angularjs

时间:2017-08-14 14:33:01

标签: javascript html angularjs textangular

当我需要在富文本中添加不可编辑的html时,我使用指令textAngular来格式化我的电子邮件通知文本并坚持使用任务。我在textAngular指令上添加了我的自定义指令。在我的自定义指令的帮助下,我将字符串中的特殊字符替换为带有参数contenteditable='false'的html span标记,但此参数不起作用且内容仍可编辑。

在这种情况下,我有两个问题:

  1. 如何在内容textAngular指令中设置不可编辑的html?
  2. 如何将变量连接到希望放置的字符串(目前它总是连接到字符串的末尾)
  3. 我感谢任何帮助。

    Plunker我的问题

    我的自定义指令:

    app.directive('removeMarkers', function () {
    
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
    
           element.bind('click', function (e) {
                    var target = e.target;
                    var parent = target.parentElement;
                    if (parent.classList.contains('label-danger')){
                        parent.remove()
                    }
                });
    
            function changeView(modelValue){
                modelValue= modelValue
                    .replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 14px;'>")
                    .replace(/\}}/g, "<span contenteditable='false' class='remove-tag fa fa-times'></span></span>&nbsp;");
                ngModel.$modelValue= modelValue;
    
                console.log(ngModel)
                return modelValue;
            }
            ngModel.$formatters.push(changeView);
            }
        }
    });
    

    Html

      <select class="form-control pull-right"
                    style="max-width: 250px"
                    ng-options="label.name as label.label for label in variables"
                    ng-change="selectedEmailVariables(variable)"
                    ng-model="variable">
                <option value="">template variables</option>
       </select>
    
      <div text-angular remove-markers name="email" ng-model="data.notifiation"></div>
    

0 个答案:

没有答案