リッチテキスト、編集不可能なコンテンツ、angularjs

Question

私はリッチテキストの中に編集不可能なhtmlを追加する必要があるときに、電子メール通知テキストを書式設定し、while with withタスクのために指示文textAngularを使用します。私はtextAngularディレクティブにカスタムディレクティブを追加しました。ヘルプで私のカスタムディレクティブを使用すると、文字列の特殊文字をhtml spanタグに置き換えます（contenteditable='false'）が、このパラメータは機能せず、コンテンツは編集可能です。この場合

私は2つの質問がある：

1. どのようにすることができ、コンテンツtextAngularディレクティブ内部Iセットアップ編集不可能なhtmlの？
2. 私は、任意の助けに感謝どのように私は場所を希望する文字列に私の変数をCONCATすることができます（現在は、それは常に文字列の末尾にconcats）

。あなたはsimply use contenteditable='false'は、我々が持っていた過去のtextAngularstrips it. To enable itいるので、あなたの要素に属性をすることはできません

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）：私の問題

マイカスタムディレクティブで

PlunkertextAngular-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です。

P.S .: textAngularは良いエディタだと思われますが、機能の一部が欠けていて、個人的にはドキュメントが嫌いです。あなたはgithubの問題を通して多くの情報を集める必要があります。今すぐ他の代替エディタに切り替えましたが、将来的にはそのエディタに戻ってくる可能性があります。