văn bản đa dạng với nội dung không chỉnh sửa được, angularjs

Question

Tôi sử dụng chỉ thị textAngular để định dạng văn bản thông báo qua email và bị kẹt trong khi có tác vụ khi tôi cần thêm html không thể chỉnh sửa bên trong văn bản có định dạng. Tôi đã thêm chỉ thị tùy chỉnh của mình qua chỉ thị textAngular. Với trợ giúp chỉ thị tùy chỉnh của tôi, tôi thay thế các ký tự đặc biệt trong chuỗi ký tự thành các thẻ span html với thông số contenteditable='false', nhưng thông số này không hoạt động và nội dung vẫn có thể chỉnh sửa được.

Trong trường hợp này tôi có hai câu hỏi:

1. Làm thế nào tôi có thể thiết lập không thể chỉnh sửa html bên trong nội dung textAngular chỉ thị?
2. Làm thế nào tôi có thể concat biến của tôi vào chuỗi ham muốn nơi (hiện nay nó luôn concats đến cuối chuỗi)

Tôi đánh giá cao sự giúp đỡ nào.

Plunker với vấn đề của tôi

thị tùy chỉnh của tôi:

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) Bạn có thể không simply use contenteditable='false' thuộc tính trên các yếu tố của bạn, vì textAngularstrips it. To enable it trong thời gian qua chúng tôi đã có để tải xuống textAngular-sanitize.min.js và chỉnh sửa mảng thuộc tính được phép. Điều này bắt đầu với J=f("abbr,align,, bạn chỉ cần thêm contenteditable vào danh sách được phân tách bằng dấu phẩy này.

2) Để chèn mẫu vào vị trí con trỏ bạn có thể use wrapSelection method within editor scope, một cái gì đó như thế này có thể làm việc:

$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); 
    } 
}; 

Đây là một working plnkr.

P.S .: textAngular có vẻ là một trình soạn thảo tốt, nhưng thiếu một số chức năng và cá nhân, tôi không thích tài liệu của nó. Bạn phải thu thập rất nhiều thông tin thông qua các vấn đề trên github. Ngay bây giờ đã chuyển sang các trình chỉnh sửa thay thế khác, nhưng có thể sẽ quay lại trình chỉnh sửa đó trong tương lai.