帶有非可編輯內容的豐富文本，angularjs

我使用指令textAngular來格式化我的電子郵件通知文本，並在需要添加不可編輯的html內部文本時停留在任務中。我通過textAngular指令添加了自定義指令。藉助我的自定義指令，我將字符串中的特殊字符替換爲參數contenteditable='false'的html span標籤，但是此參數不起作用，並且內容仍然可編輯。帶有非可編輯內容的豐富文本，angularjs

在這種情況下，我有兩個問題：

如何內容textAngular指令裏面我設置不可編輯HTML？
我如何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); 
     } 
    } 
});

的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>

來源

2017-08-14 antonyboom

看來開發人員非常不願意添加此功能。顯然，一個好的選擇是ckeditor。 – Deckerz

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似乎是一個很好的編輯器，但它缺乏一些功能和個人，我不喜歡它的文檔。您必須通過github上的問題收集大量信息。現在切換到其他替代編輯，但可能會在未來回到它。

來源

2017-08-16 16:32:55

該死！你救了我，謝謝你，你是男人！ – antonyboom

你用什麼編輯器代替TextAngular？ – antonyboom

@antonyboom很高興它幫助你。我們必須轉到['CKEditor']（https://ckeditor.com/），因爲它具有更好的字體管理，還有很多插件（圖片上傳，工具欄下拉等），文檔似乎對我更清楚（但這只是我的意見:)）。這裏唯一的問題是找到/實現一個好的指令包裝來使用它。 –

帶有非可編輯內容的豐富文本，angularjs

回答

相關問題