गैर संपादन योग्य सामग्री के साथ रिच टेक्स्ट, AngularJS

Question

मैं निर्देश textAngular का उपयोग अपने ईमेल सूचना टेक्स्ट को फ़ॉर्मेट करने और जब तक कार्य के साथ मैं जब रिच टेक्स्ट के अंदर गैर संपादन योग्य एचटीएमएल जोड़ने की जरूरत के लिए अटक गया। मैंने टेक्स्ट एंजुलर निर्देश पर अपना कस्टम निर्देश जोड़ा। मदद अपने कस्टम के निर्देश के साथ मैं स्ट्रिंग में विशेष वर्ण की जगह परम contenteditable='false' साथ अवधि टैग HTML करने के लिए है, लेकिन इस परम काम नहीं करता है और सामग्री अभी भी संपादन योग्य।

इस मामले में मैं दो प्रश्न हैं:

1. कैसे कर सकते हैं मैं सेटअप को भी संपादित सामग्री textAngular निर्देश के अंदर एचटीएमएल?
2. मैं कैसे स्ट्रिंग के लिए मेरे चर concat जगह की इच्छा कर सकते हैं (वर्तमान में यह हमेशा स्ट्रिंग के अंत करने के लिए concats)

मैं किसी भी मदद की सराहना करते हैं।

मेरी समस्या के साथ 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); 
     } 
    } 
}); 

एचटीएमएल

<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) आप कर सकते हैं अतीत हम था में अपने तत्वों पर नहीं simply use contenteditable='false' विशेषता, textAngularstrips it. To enable it के बाद से textAngular-sanitize.min.js डाउनलोड करने और अनुमति विशेषताओं की सरणी संपादित करने के लिए। यह J=f("abbr,align, साथ शुरू होता है, तो आप बस इस अल्पविराम से अलग सूची contenteditable जोड़ने के लिए।

2) कर्सर की स्थिति के लिए टेम्पलेट सम्मिलित करने के लिए आप use wrapSelection method within editor scope, कुछ इस तरह काम कर सकता था कर सकते हैं:

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

यहाँ एक working plnkr है।

पीएस .: textAngular एक अच्छा संपादक प्रतीत होता है, लेकिन इसमें कुछ कार्यक्षमता और व्यक्तिगत रूप से कमी नहीं है, मुझे इसकी प्रलेखन पसंद नहीं है। आपको जिथब पर मुद्दों के माध्यम से बहुत सारी जानकारी इकट्ठी करनी है। अभी अन्य वैकल्पिक संपादकों के लिए स्विच किया गया है, लेकिन संभवतः भविष्य में इसे वापस ले जाएगा।