Богатый текст с неизменяемым контентом, angularjs

Я использую директиву textAngular, чтобы форматировать текст сообщения электронной почты и застревать в то время как с задачей, когда мне нужно добавить не редактируемый html внутри rich текст. Я добавил свою собственную директиву по директиве textAngular. С помощью моей настраиваемой директивы я заменяю специальные символы в строке на теги html span с параметром contenteditable='false', но этот параметр не работает, а контент все еще доступен для редактирования.

В этом случае у меня есть два вопроса:

Как настроить не редактируемый HTML-текст внутри текста textAngular директива?
Как я могу передать мою переменную в строку в желаемое место (в настоящее время она всегда совпадает с концом строки)

Я ценю любую помощь.

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>

Ответ 1

1) Вы не можете просто использовать атрибут contenteditable='false' для своих элементов, поскольку textAngular разделяет его. Чтобы включить его, в прошлом нам приходилось загружать textAngular-sanitize.min.js и редактировать массив разрешенных атрибутов. Это начинается с J=f("abbr,align,, вам нужно просто добавить contenteditable в этот список, разделенный запятой.

2) Чтобы вставить шаблон в позицию курсора, вы можете использовать метод wrapSelection в пределах редактора, что-то вроде этого могло бы работать:

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

Вот рабочий plnkr.

PS: textAngular кажется хорошим редактором, но ему не хватает некоторых функций и лично, мне не нравится его документация. Вы должны собрать много информации по вопросам, связанным с github. Прямо сейчас переключился на других альтернативных редакторов, но, возможно, вернется к нему в будущем.