bogaty tekst z nie edytowalną treścią, angularjs

Question

Używam dyrektywy textAngular do sformatowania mojego tekstu powiadomienia e-mail i utknąłem na czas z zadaniem, gdy muszę dodać nie edytowalny HTML wewnątrz tekstu sformatowanego. Dodałem moją dyrektywę niestandardową do dyrektywy textAngular. Z pomocą mojej dyrektywy niestandardowej zamieniam znaki specjalne w ciągu na znaczniki zakresu html o parametrze contenteditable='false', ale ten parametr nie działa, a treść nadal można edytować.

W tym przypadku mam dwa pytania:

1. W jaki sposób można skonfigurować nieedytowalnych html wewnątrz treści dyrektywy textAngular?
2. Jak mogę Concat mój zmiennej łańcucha pragnąć miejsce (obecnie zawsze concats do końca łańcucha)

I wdzięczni za każdą pomoc.

Plunker z moim problemem

Moja dyrektywa zwyczaj:

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> 

Answer 1

1) Nie można simply use contenteditable='false' atrybut na swoich elementach, ponieważ textAngularstrips it. To enable it w przeszłości mieliśmy aby pobrać textAngular-sanitize.min.js i edytować tablicę dozwolonych atrybutów. Zaczyna się to od J=f("abbr,align,, musisz po prostu dodać contenteditable do tej rozdzielonej przecinkami listy.

2) Aby wstawić szablon do pozycji kursora można use wrapSelection method within editor scope, coś takiego może działać:

$scope.selectedEmailVariables = function (item) { 
    if (item !== null) { 
      var editorScope = textAngularManager.retrieveEditor('editor1').scope; 
      editorScope.displayElements.text[0].focus(); 
      editorScope.wrapSelection('insertHtml', 
      " <span class='label label-danger' contenteditable='false' style='color: #FFFFFF; font-size: 14px;'>" + item + "<span contenteditable='false' class='remove-tag fa fa-times'></span></span> ", true); 
    } 
}; 

Oto working plnkr.

P.S .: textAngular wydaje się być dobrym edytorem, ale brakuje mu niektórych funkcji i osobiście, nie podoba mi się jego dokumentacja. Musisz zebrać dużo informacji poprzez problemy na githubie. Teraz przełączyłem się na innych redaktorów alternatywnych, ale prawdopodobnie wrócę do tego w przyszłości.